Successfully reported this slideshow.

Bootstrap 4は、どの辺がアクセシブルなのか?/スマホでスクリーンリーダーを使ってみよう

2

Share

1 of 51
1 of 51

Bootstrap 4は、どの辺がアクセシブルなのか?/スマホでスクリーンリーダーを使ってみよう

2

Share

Download to read offline

2018-07-01(日)に大阪JUSO Coworkingにて行われた「D2Dアクセシビリティ勉強会 2018・夏」でのスライドです。 【簡単マニュアルPDF版は以下】
http://bit.ly/d2d_VO_TB

2018-07-01(日)に大阪JUSO Coworkingにて行われた「D2Dアクセシビリティ勉強会 2018・夏」でのスライドです。 【簡単マニュアルPDF版は以下】
http://bit.ly/d2d_VO_TB

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Bootstrap 4は、どの辺がアクセシブルなのか?/スマホでスクリーンリーダーを使ってみよう

  1. 1. 1
  2. 2. 2 Bootstrap 4は、どの辺がアクセシブルなのか? スマホでスクリーンリーダーを使ってみよう D2Dアクセシビリティ勉強会2018年・夏(補足資料) 2018年7月1日
  3. 3. 自己紹介 3
  4. 4. 4 澤田 望
  5. 5. 5 中年男 パーマ メガネ(老眼) ガリガリ
  6. 6. 岡山で独立(2014~) キヤノン (~2013) 6 • Webアクセシビリティ検証 • イラスト制作 • 岡山情報ビジネス学院 非常勤講師 • ウェブアクセシビリティ基盤委員会 などなど • サイトデザイン監修 • Webアクセシビリティ対応
  7. 7. Bootstrap 4とアクセシビリティ 7
  8. 8. 8 【アクセシブル】アクセシビリティが高い状態のこと access + ability = accessibility アクセスする    能力     アクセスできる度合い 入手する      技量     たどり着けるかどうか たどり着く     度合い 【Webアクセシビリティ】 Webコンテンツの情報にアクセスできる度合い (全ての人や機械が対象) アクセシブルであるとは?
  9. 9. 9 Bootstrap 4で作った各コンポーネントは、 何を満たしていればアクセシブルだと 言えるの?
  10. 10. 10 • 知覚可能 - 情報及びUIコンポーネントは、 利用者が知覚できること • 操作可能 - UIコンポーネント及びナビゲーションは 操作できること • 理解可能 - 情報及びUIの操作は理解できること • 堅牢性  - 技術やUAが進化しても、 コンテンツはアクセシブルなこと アクセシビリティの 4 つの原則 https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より
  11. 11. 11 • 知覚可能 - UIコンポーネントの変化する状態や関係性を、 見えていても見えていなくても伝えられること • 操作可能 - マウスやタッチスクリーンだけではなく、 キーボードでもUIコンポーネントの操作ができること • 理解可能 - UIコンポーネントの表示や挙動を理解して、 間違わずに操作できること • 堅牢性  - UIコンポーネントの名前や役割が、 正しくプログラムに伝えられること アクセシビリティの 4 つの原則をBootstrap 4に適用
  12. 12. 12 • 知覚可能 - タブとタブパネルの関係性や、 どのタブがアクティブなのかという状態を伝えられる • 操作可能 - タブをキーボードで切り替えられ、 タブパネル内も正しい順序でキーボード操作できる • 理解可能 - タブの表示や挙動を理解して、間違わずに操作できる • 堅牢性  - 個々のタブの名前やナビゲーションとしての役割が、 プログラムに伝えられ、コントロールできる 例:タブUIの場合
  13. 13. アクセシビリティについてのガイドライン 13
  14. 14. 14 ウェブアクセシビリティ基盤委員会(WAIC)サイト
  15. 15. 15 全部同じ内容 Webアクセシビリティについてのガイドライン ==
  16. 16. 16 WCAG 2.0(W3C勧告)が、 そのまま国際規格であるISO/IEC規格に (ISO/IEC 40500:2012) WCAG 2.0 http://waic.jp/docs/WCAG20/Overview.html
  17. 17. 17WCAG 2.0 ガイドラインの例
  18. 18. 18WCAG 2.0 ガイドラインの例
  19. 19. 19 JIS X 8341-3:2016のレベルによる対応の違いの例 色のコントラスト比 文字画像 オススメ度 A 特になし 特になし 最低限のレベル AA 4.5:1 使ってる技術で 表現不可能なら例外 十分なレベル AAA 7:1 例外なし 実現不可能なレベル
  20. 20. Bootstrap 4にはWAI-ARIAが必須(言い過ぎ) 20
  21. 21. 21 アクセシブルにするためには (HTMLだけでは足りない部分に) WAI-ARIAが必要。 ※ role属性はWAI-ARIAで定義されている属性
  22. 22. 22 HTMLは元々文書をマークアップするための言語 なぜWAI-ARIAを追加する必要があるのか?
  23. 23. 23 • JavaScript/CSS等で複雑になったWebアプリ ケーションの構造 • 「何が/いつ/どう」変化したかという情報 HTMLの要素や属性だけでは表現しきれない なぜWAI-ARIAを追加する必要があるのか?
  24. 24. 24 WAI-ARIAの○○○属性を付加 構造/変化をUAに伝えられるようになる なぜWAI-ARIAを追加する必要があるのか? role属性 aria-○○○属性 tabindex属性 (tabindex自体はHTMLの仕様)
  25. 25. 25 UAが解釈するイメージ WAI-ARIAのイメージ <div role="dialog">動画プレーヤー</div> <div>動画プレーヤー</div> <dialog>動画プレーヤー</dialog> role属性の追加
  26. 26. 26 • UAが正しく解釈し、正しく振る舞うようになる • スクリーンリーダー利用者に正しく伝わる • CSSやJavaScriptを使った開発が楽になる* WAI-ARIAを使うと何が変わるのか?
  27. 27. 27 HTMLにWAI-ARIAを追加するだけで、 制御はBootstrap 4がやってくれる! ※ Bootstrap 3はイマイチだった
  28. 28. 28 じゃ、WAI-ARIAはどう書けばいい?
  29. 29. WAI-ARIA Authoring Practices 1.1 29
  30. 30. 30https://www.w3.org/TR/wai-aria-practices-1.1/ W3Cオススメの使い方
  31. 31. 31 bootstrap.jsは、WAI-ARIA Authoring Practicesに則ったマークアップを前 提に動作している。
  32. 32. 公式のドキュメントに書いてあること 32
  33. 33. 33 各コンポーネントのアクセシブルな使い方(Tabs) https://getbootstrap.com/docs/4.1/components/navs/
  34. 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. 35 HTMLの既存の要素の意味や役割を上書きして変更す るための属性 公式ドキュメントとWAI-ARIA Authoring Practicesの共通点(Tabs) ※ tabindex=“-1”はタブの 切り替えをTABキーでは なく←→キーで行うため Bootstrap 4公式ドキュメント WAI-ARIA Authoring Practices 1.1
  36. 36. 36 コンポーネントによって、WAI-ARIA Authoring Practices への適応度は マチマチなので注意。 ※ 公式ドキュメントに従っておけばOK
  37. 37. 37 WCAG 2.0やJIS X 8341-3:2016 を満たす必要のあるサイトは WCAG 2.0 達成方法集を参考に。
  38. 38. 38 JIS X 8341-3:2016 達成方法 絶賛翻訳中! WCAG 2.0 達成方法集 https://waic.jp/docs/WCAG-TECHS/Overview.html
  39. 39. 39 JIS X 8341-3:2016 達成方法 絶賛翻訳中! https://waic.jp/docs/WCAG-TECHS/aria.html WCAG 2.0 達成方法集
  40. 40. Bootstrap 4でもアクセシブルにならない点 40
  41. 41. 41 カルーセルは デフォルトのまま使っちゃダメ!
  42. 42. 42https://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-pause.html
  43. 43. 43 hover時に一時停止しますけど?
  44. 44. 44https://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-pause.html
  45. 45. 45 やっぱり一時停止ボタンを付けよう。
  46. 46. 46http://getbootstrap.com/docs/4.1/components/carousel/#carouselpause
  47. 47. 47 デフォルトカラーも デフォルトのまま使っちゃダメ!
  48. 48. 48 Bootstrapのデフォルトパレットを構成するほとんどの色 ̶ ボタンのバリエーション、アラートのバリエーション、フォームのバリデーションイ ンジケータなどのためにフレームワーク全体で使用されている ̶ は、明るい 背景に対して使用された場合、*不十分な*色のコントラスト (推奨値 [WCAG 2.0カラーコントラスト比 4.5:1] 以下)になります。 作 者は、適切なカラーコントラスト比を確保するために、これ らのデフォルトカラーを手動で変更/拡張する必要があります。 https://getbootstrap.com/docs/4.1/getting-started/accessibility/ より デフォルトのカラーパレットについて “ ”
  49. 49. スマホでスクリーンリーダーを使ってみよう 49
  50. 50. 50 簡単マニュアル作りました。 PDFファイル:bit.ly/2Kw2Agn
  51. 51. 51 ありがとうございました。 @SawadaStdDesign

×