Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

677 views

Published on

2018-07-01(日)に大阪JUSO Coworkingにて行われた「D2Dアクセシビリティ勉強会 2018・夏」でのスライドです。

Published in: Internet
  • Be the first to comment

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

×