これだけは知っておきたい「Webアクセシビリティ」のこと
•
5 gostaram•5,573 visualizações
2017年9月16日（土）にベルサール新宿グランドで開催された「WordCamp Tokyo 2017」でのスライド。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (14)
Semelhante a これだけは知っておきたい「Webアクセシビリティ」のこと
Semelhante a これだけは知っておきたい「Webアクセシビリティ」のこと (20)
これだけは知っておきたい「Webアクセシビリティ」のこと
- 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)
- 5. 都バスの運賃表
- 6. 都バスの運賃表
- 10. いらない。
- 17. 例えば「1.2.2 キャプション（収録済み）の達成基準」 同期したメディアに含まれている全ての収録済みの音声 コンテンツに対して，キャプションが提供されている。 これを ”日本語訳” すると… 収録済みの動画（ライブ配信ではない動画）には、その音声 が伝えている情報を書き起こしたキャプションを提供する。
- 18. 例えば、Facebook How to Add Closed 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/
- 22. Be The Fireman and not The Cop https://www.slideshare.net/johnfoliot/fireman-cop
- 24. SAWADA STANDARD DESIGN さんの動画 https://www.youtube.com/channel/UCkYDTXQCaimYzUtzhRW7zvQ
- 25. SAWADA STANDARD DESIGN さんのスライド https://www.slideshare.net/nozomisawada969/important04-sawada20170603
- 27. W3Cによる「定義」 Web accessibility means that people with disabilities can use the Web.
- 30. Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone アクセシビリティを考慮してデザインすると、 Webは誰でも、どこでも使えるものになる。 You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind.
- 32. Inclusive Design at Microsoft https://www.microsoft.com/en-us/design/inclusive
- 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/
- 42. みんなの公共サイト運用ガイドライン 2016年4月20日 公開 総務省が作成 公的機関職員向けのJIS対応 手順書 2018年3月末までにレベル AA準拠 を推奨 先進国の多くで義務化されているレベルと同じ 「ウェブアクセシビリティ取組確認・評価表」 を新たに提供 自己採点により毎年取り組み状況を評価し公表 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
- 49. Powerful Features Easy and Accessible
- 50. Accessibility Coding Standards All new 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/
- 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. アクセシビリティ - WordPress Codex 日本語版 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
- 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/
- 63. Webページのセクションをマシンリーダブルに ヘッダー <header> ナビゲーション <nav> メインコンテンツ <main> 補足 <aside> フッター <footer> ホーム → 基礎知識 ホーム → 基礎知識 ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ○○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○○ ○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○
- 65. 当面はランドマークroleを併用 <header role=“banner”> <nav role=“navigation”>{グロナビ}</nav> <form role=“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 当面は併用しておく
- 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>
- 72. 代替テキストによって、画像と同等の情報をマシンリーダブルに そのページに写真があることも “情報” <img src=“photo.jpg” alt=“写真：iPhone X のホーム画面”>
- 73. 代替テキストによって、画像と同等の情報をマシンリーダブルに 写真を説明するテキスト（キャプション）がある場合 <figure role=“group” aria-labelledby=“fig1> <img src=“photo.jpg” alt=“写真”> <figcaption id=“fig1”> iPhone X のホーム画面 </figcaption> <figure> iPhone X のホーム画面
- 75. リンク先が同じなら一つのリンクにまとめたほうがよい スクリーンリーダー＆キーボード操作対応 <a href="http://amzn.to/2bCe8ep"> <img src=“book.jpg" alt=""> <span>デザイニングWebアクセシビリ ティ - アクセシブルな設計やコンテンツ 制作のアプローチ</span> </a>
- 77. フォーカスインジケータは常に表示させる キーボード操作時にフォーカスの現在位置を示す デフォルトでの表示 ドットや水色の矩形 = 分かりづらいこともある CSSで outline:none の指定があると非表示に キーボード操作時には致命的
- 81. こんなナビゲーションバーは…
- 82. コントラスト比が低いと… ボタンに気づかない 検索窓に気づかない ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○ クーポンを使う 数量 1 ▼ ¥1,180
- 83. 参考になる書籍
- 84. 書籍「デザイニング Webアクセシビリティ」 * 電子書籍版もあり http://amzn.to/2fTsZan
- 86. 表紙