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

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

529 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

×