![[動画] WordPressでも意識したいアクセシビリティ 〜「優しいウェブ
サイト」作りをはじめよう〜
（横田 東母子, 森田 壮）
https://2016.tokyo.wordcamp.org/09/24/slide/#tech07](https://image.slidesharecdn.com/wordcamptokyo-20170916-ueki-170916105954/85/Web-55-320.jpg)
Uploaded byMakoto Ueki
これだけは知っておきたい「Webアクセシビリティ」のこと
2017年9月16日（土）にベルサール新宿グランドで開催された「WordCamp Tokyo 2017」でのスライド。
![コンテンツ戦国時代をどう生き抜く？成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]](https://cdn.slidesharecdn.com/ss_thumbnails/20170914-170916114238-thumbnail.jpg?width=640&height=640&fit=bounds)
これだけは知っておきたい「Webアクセシビリティ」のこと
- 1.
- 2. 植木 真 （株式会社インフォアクシア） Webアクセシビリティコンサルタント 診断・検証、ユーザビリティテスト、ガイドライン作成、リニ ューアル支援、JIS / WCAG 対応サポート など 国内外の標準化活動（規格・ガイドライン作成）に参加 日本工業規格「JIS X 8341-3」（2004年版、2010年版、2016年版） W3C勧告「WCAG 2.0」、「WCAG 2.1」ワーキングドラフト ウェブアクセシビリティ基盤委員会（WAIC） 委員長 Certified Professional in Web Accessibility (CPWA)
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. 例えば「1.2.2 キャプション（収録済み）の達成基準」 同期したメディアに含まれている全ての収録済みの音声 コンテンツに対して，キャプションが提供されている。 これを ”日本語訳”すると… 収録済みの動画（ライブ配信ではない動画）には、その音声 が伝えている情報を書き起こしたキャプションを提供する。
- 18. 例えば、Facebook How to AddClosed Captions to Facebook Videos http://www.3playmedia.com/how-it-works/how-to-guides/ht-facebook/ 閲覧時間 モバイル フレンドリー 聴覚障害者対応 集中・理解
- 19. JIS X 8341-3:2016 2016年3月22日公示 国際規格「ISO/IEC 40500:2012」（= W3C 「WCAG 2.0」）と同じ内容の一致規格 「JIS X 8341-3」＝「WCAG 2.0」の日本語訳 特定の技術に依存しない達成基準 HTML、PDF、Flash、Silverlight、??? JIS X 8341-3:2016 解説 http://waic.jp/docs/jis2016/understanding/201604/
- 20.
- 21.
- 22. Be The Firemanand not The Cop https://www.slideshare.net/johnfoliot/fireman-cop
- 23.
- 24. SAWADA STANDARD DESIGNさんの動画 https://www.youtube.com/channel/UCkYDTXQCaimYzUtzhRW7zvQ
- 25. SAWADA STANDARD DESIGNさんのスライド https://www.slideshare.net/nozomisawada969/important04-sawada20170603
- 26.
- 27. W3Cによる「定義」 Web accessibility meansthat people with disabilities can use the Web.
- 28.
- 29.
- 30. Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone アクセシビリティを考慮してデザインすると、 Webは誰でも、どこでも使えるものになる。 Youmake the web more inclusive for everyone, everywhere, when you design with accessibility in mind.
- 31.
- 32. Inclusive Design atMicrosoft https://www.microsoft.com/en-us/design/inclusive
- 33.
- 34.
- 36. 企業サイトのアクセシビリティ アメリカでの訴訟件数推移 2015年 57件 2016年 262件 2017年432件（* 8/15 時点） 3年間 合計751件 のうち、 小売業 353件 レストラン 186件 旅行関連産業 57件 0 50 100 150 200 250 300 350 400 450 500 2015年 2016年 2017年 * 参考：Website Accessibility Lawsuit Filings Still Going Strong http://www.adatitleiii.com/2017/08/website-accessibility-lawsuit-filings-still-going-strong/
- 37.
- 39.
- 40.
- 41.
- 42. みんなの公共サイト運用ガイドライン 2016年4月20日 公開 総務省が作成 公的機関職員向けのJIS対応 手順書 2018年3月末までにレベルAA準拠 を推奨 先進国の多くで義務化されているレベルと同じ 「ウェブアクセシビリティ取組確認・評価表」 を新たに提供 自己採点により毎年取り組み状況を評価し公表 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. Powerful Features Easy andAccessible
- 50. Accessibility Coding Standards Allnew or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA. Accessibility Coding Standards – Make WordPress Core https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/
- 51.
- 52. WP Accessibility WP Accessibility(By Joe Dolson) https://wordpress.org/plugins/wp-accessibility/
- 53. Contact Form 7:アクセシブルデフォルト Contact Form 7: アクセシブルデフォルト (By Joe Dolson) https://ja.wordpress.org/plugins/contact-form-7-accessible-defaults/
- 54. アクセシビリティ - WordPressCodex 日本語版 WordPress とアクセシビリティ WordPress (とまともな品質のテーマ)を使っていれば、 アクセシビリティの高いサイトを作るために特に追加で しなければならないことはありません。それでも アクセシビリティ標準に準拠したコンテンツを作成する ためにいくつか心がけることがあります。 アクセシビリティ - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3
- 55. [動画] WordPressでも意識したいアクセシビリティ 〜「優しいウェブ サイト」作りをはじめよう〜 （横田東母子, 森田 壮） https://2016.tokyo.wordcamp.org/09/24/slide/#tech07
- 56.
- 57.
- 58.
- 59.
- 60. アクセシビリティ確保の基本の「キ」 10項目 1. ページの内容が分かるページタイトルを記述する 2.ページの領域をセクショニング要素とランドマークroleで示す 3. 見出しやリストなどの文書構造をマークアップする 4. リンクテキストは、リンク先が分かる文言にする 5. 情報を伝えている画像に代替テキストを提供する はじめてのWebアクセシビリティ http://weba11y.jp/know-how/first/first_index/
- 61. アクセシビリティ確保の基本の「キ」 10項目 6. 文字色と背景色のコントラストを確保する 7.キーボードだけでも操作できるようにする 8. データテーブルの構造をマークアップする 9. フォーム・コントロールのラベルをマークアップする 10. エラーメッセージではエラー箇所と修正方法を明示する はじめてのWebアクセシビリティ http://weba11y.jp/know-how/first/first_index/
- 62.
- 63. Webページのセクションをマシンリーダブルに ヘッダー <header> ナビゲーション <nav> メインコンテンツ<main> 補足 <aside> フッター <footer> ホーム → 基礎知識 ホーム → 基礎知識 ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ○○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○○ ○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○
- 64.
- 65. 当面はランドマークroleを併用 <header role=“banner”> <nav role=“navigation”>{グロナビ}</nav> <formrole=“search”>｛サイト内検索｝</form> </header> <nav role=“navigation”>｛パンくずリスト｝</nav> <main role=“main”> {ここにメインコンテンツ} </main> <nav role=“navigation”>{ローカルナビ}</nav> <aside role=“complementary”>｛バナーとか｝</aside> <footer role=“contentinfo”>｛フッター｝</footer>
- 66. HTML5のセクションを示す主な要素 ＆ 対応するランドマークrole Webページにある セクション HTML5の要素 ランドマークrole ヘッダー header banner ナビゲーション nav navigation メインコンテンツ main main 補足情報 aside complementary フッター footer contentinfo 当面は併用しておく
- 67.
- 68. ラベルを付けて それぞれの違いをマシンリーダブルに <nav role=“navigation”aria-label=“メインメニュー”> ｛ここにナビゲーションバー｝ </nav> <nav role=“navigation” aria-label=“現在位置”> ｛ここにパンくずリスト｝ </nav> <nav role=“navigation” aria-labelledby=“local-nav”> <h2 id=“local-nav”>製品情報</h2> {ここにローカルナビゲーション｝ </nav>
- 69.
- 70.
- 71.
- 72.
- 73. 代替テキストによって、画像と同等の情報をマシンリーダブルに 写真を説明するテキスト（キャプション）がある場合 <figure role=“group” aria-labelledby=“fig1> <imgsrc=“photo.jpg” alt=“写真”> <figcaption id=“fig1”> iPhone X のホーム画面 </figcaption> <figure> iPhone X のホーム画面
- 74.
- 75. リンク先が同じなら一つのリンクにまとめたほうがよい スクリーンリーダー＆キーボード操作対応 <a href="http://amzn.to/2bCe8ep"> <img src=“book.jpg"alt=""> <span>デザイニングWebアクセシビリ ティ - アクセシブルな設計やコンテンツ 制作のアプローチ</span> </a>
- 76.
- 77. フォーカスインジケータは常に表示させる キーボード操作時にフォーカスの現在位置を示す デフォルトでの表示 ドットや水色の矩形 = 分かりづらいこともある CSSでoutline:none の指定があると非表示に キーボード操作時には致命的
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. 書籍「デザイニング Webアクセシビリティ」 *電子書籍版もあり http://amzn.to/2fTsZan
- 85.
- 86.