Bootstrap 4は、どの辺がアクセシブルなのか？／スマホでスクリーンリーダーを使ってみよう
Report
Nozomi SawadaFollow
Jul. 2, 2018•0 likes•2,113 views
Bootstrap 4は、どの辺がアクセシブルなのか？／スマホでスクリーンリーダーを使ってみよう
Jul. 2, 2018•0 likes•2,113 views
Download to read offline
Report
Internet
2018-07-01（日）に大阪JUSO Coworkingにて行われた「D2Dアクセシビリティ勉強会 2018・夏」でのスライドです。 【簡単マニュアルPDF版は以下】 http://bit.ly/d2d_VO_TB
Nozomi SawadaFollow
More Related Content
More from Nozomi Sawada
Webアクセシビリティ 今ならどうするの？Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIANozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことNozomi Sawada
WAI-ARIAの正しい使い方 〜あるある？ケーススタディ〜Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しようNozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい／WebアクセシビリティチェックのポイントNozomi Sawada
Bootstrap 4は、どの辺がアクセシブルなのか？／スマホでスクリーンリーダーを使ってみよう
- 1. 1
- 3. 自己紹介 3
- 4. 4 澤田 望
- 6. 岡山で独立（2014～） キヤノン （～2013） 6 • Webアクセシビリティ検証 • イラスト制作 • 岡山情報ビジネス学院 非常勤講師 • ウェブアクセシビリティ基盤委員会 などなど • サイトデザイン監修 • Webアクセシビリティ対応
- 8. 8 【アクセシブル】アクセシビリティが高い状態のこと access + ability = accessibility アクセスする 能力 アクセスできる度合い 入手する 技量 たどり着けるかどうか たどり着く 度合い 【Webアクセシビリティ】 Webコンテンツの情報にアクセスできる度合い （全ての人や機械が対象） アクセシブルであるとは？
- 10. 10 • 知覚可能 － 情報及びUIコンポーネントは、 利用者が知覚できること • 操作可能 － UIコンポーネント及びナビゲーションは 操作できること • 理解可能 － 情報及びUIの操作は理解できること • 堅牢性 － 技術やUAが進化しても、 コンテンツはアクセシブルなこと アクセシビリティの 4 つの原則 https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より
- 11. 11 • 知覚可能 － UIコンポーネントの変化する状態や関係性を、 見えていても見えていなくても伝えられること • 操作可能 － マウスやタッチスクリーンだけではなく、 キーボードでもUIコンポーネントの操作ができること • 理解可能 － UIコンポーネントの表示や挙動を理解して、 間違わずに操作できること • 堅牢性 － UIコンポーネントの名前や役割が、 正しくプログラムに伝えられること アクセシビリティの 4 つの原則をBootstrap 4に適用
- 12. 12 • 知覚可能 － タブとタブパネルの関係性や、 どのタブがアクティブなのかという状態を伝えられる • 操作可能 － タブをキーボードで切り替えられ、 タブパネル内も正しい順序でキーボード操作できる • 理解可能 － タブの表示や挙動を理解して、間違わずに操作できる • 堅牢性 － 個々のタブの名前やナビゲーションとしての役割が、 プログラムに伝えられ、コントロールできる 例：タブUIの場合
- 16. 16 WCAG 2.0（W3C勧告）が、 そのまま国際規格であるISO/IEC規格に （ISO/IEC 40500:2012） WCAG 2.0 http://waic.jp/docs/WCAG20/Overview.html
- 19. 19 JIS X 8341-3:2016のレベルによる対応の違いの例 色のコントラスト比 文字画像 オススメ度 A 特になし 特になし 最低限のレベル AA 4.5：1 使ってる技術で 表現不可能なら例外 十分なレベル AAA 7：1 例外なし 実現不可能なレベル
- 26. 26 • UAが正しく解釈し、正しく振る舞うようになる • スクリーンリーダー利用者に正しく伝わる • CSSやJavaScriptを使った開発が楽になる＊ WAI-ARIAを使うと何が変わるのか？
- 29. WAI-ARIA Authoring Practices 1.1 29
- 34. 34 HTMLの既存の要素の意味や役割を上書きして変更す るための属性 https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html （改行位置変更／省略箇所あり） WAI-ARIA Authoring Practices 1.1（Tabs）
- 35. 35 HTMLの既存の要素の意味や役割を上書きして変更す るための属性 公式ドキュメントとWAI-ARIA Authoring Practicesの共通点（Tabs） ※ tabindex=“-1”はタブの 切り替えをTABキーでは なく←→キーで行うため Bootstrap 4公式ドキュメント WAI-ARIA Authoring Practices 1.1
- 36. 36 コンポーネントによって、WAI-ARIA Authoring Practices への適応度は マチマチなので注意。 ※ 公式ドキュメントに従っておけばOK
- 37. 37 WCAG 2.0やJIS X 8341-3:2016 を満たす必要のあるサイトは WCAG 2.0 達成方法集を参考に。
- 38. 38 JIS X 8341-3:2016 達成方法 絶賛翻訳中！ WCAG 2.0 達成方法集 https://waic.jp/docs/WCAG-TECHS/Overview.html
- 48. 48 Bootstrapのデフォルトパレットを構成するほとんどの色 ̶ ボタンのバリエーション、アラートのバリエーション、フォームのバリデーションイ ンジケータなどのためにフレームワーク全体で使用されている ̶ は、明るい 背景に対して使用された場合、*不十分な*色のコントラスト （推奨値 [WCAG 2.0カラーコントラスト比 4.5：1] 以下）になります。 作 者は、適切なカラーコントラスト比を確保するために、これ らのデフォルトカラーを手動で変更/拡張する必要があります。 https://getbootstrap.com/docs/4.1/getting-started/accessibility/ より デフォルトのカラーパレットについて “ ”