1

2
Bootstrap 4は、どの辺がアクセシブルなのか？
スマホでスクリーンリーダーを使ってみよう
D2Dアクセシビリティ勉強会2018年・夏（補足資料）
2018年7月1日

自己紹介
3

4
澤田 望

5
中年男
パーマ
メガネ（老眼）
ガリガリ

岡山で独立（2014～）
キヤノン （～2013）
6
• Webアクセシビリティ検証
• イラスト制作
• 岡山情報ビジネス学院 非常勤講師
• ウェブアクセシビリティ基盤委員会
などなど
• サイトデザイン監修
• Webアクセシビリティ対応

Bootstrap 4とアクセシビリティ
7

8
【アクセシブル】アクセシビリティが高い状態のこと
access + ability = accessibility
アクセスする 能力 アクセスできる度合い
入手する 技量 たどり着けるかどうか
たどり着く 度合い
【Webアクセシビリティ】
Webコンテンツの情報にアクセスできる度合い
（全ての人や機械が対象）
アクセシブルであるとは？

9
Bootstrap 4で作った各コンポーネントは、
何を満たしていればアクセシブルだと
言えるの？

10
• 知覚可能 － 情報及びUIコンポーネントは、
利用者が知覚できること
• 操作可能 － UIコンポーネント及びナビゲーションは
操作できること
• 理解可能 － 情報及びUIの操作は理解できること
• 堅牢性 － 技術やUAが進化しても、
コンテンツはアクセシブルなこと
アクセシビリティの 4 つの原則
https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html より

11
• 知覚可能 － UIコンポーネントの変化する状態や関係性を、
見えていても見えていなくても伝えられること
• 操作可能 － マウスやタッチスクリーンだけではなく、
キーボードでもUIコンポーネントの操作ができること
• 理解可能 － UIコンポーネントの表示や挙動を理解して、
間違わずに操作できること
• 堅牢性 － UIコンポーネントの名前や役割が、
正しくプログラムに伝えられること
アクセシビリティの 4 つの原則をBootstrap 4に適用

12
• 知覚可能 － タブとタブパネルの関係性や、
どのタブがアクティブなのかという状態を伝えられる
• 操作可能 － タブをキーボードで切り替えられ、
タブパネル内も正しい順序でキーボード操作できる
• 理解可能 － タブの表示や挙動を理解して、間違わずに操作できる
• 堅牢性 － 個々のタブの名前やナビゲーションとしての役割が、
プログラムに伝えられ、コントロールできる
例：タブUIの場合

アクセシビリティについてのガイドライン
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 （改行位置変更／省略箇所あり）
WAI-ARIA Authoring Practices 1.1（Tabs）

35
HTMLの既存の要素の意味や役割を上書きして変更す
るための属性
公式ドキュメントとWAI-ARIA Authoring Practicesの共通点（Tabs）
※ tabindex=“-1”はタブの
切り替えをTABキーでは
なく←→キーで行うため
Bootstrap 4公式ドキュメント
WAI-ARIA Authoring Practices 1.1

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のデフォルトパレットを構成するほとんどの色 ̶
ボタンのバリエーション、アラートのバリエーション、フォームのバリデーションイ
ンジケータなどのためにフレームワーク全体で使用されている ̶ は、明るい
背景に対して使用された場合、*不十分な*色のコントラスト
（推奨値 [WCAG 2.0カラーコントラスト比 4.5：1] 以下）になります。 作
者は、適切なカラーコントラスト比を確保するために、これ
らのデフォルトカラーを手動で変更/拡張する必要があります。
https://getbootstrap.com/docs/4.1/getting-started/accessibility/ より
デフォルトのカラーパレットについて
“
”

スマホでスクリーンリーダーを使ってみよう
49

50
簡単マニュアル作りました。
PDFファイル：bit.ly/2Kw2Agn

51
ありがとうございました。
@SawadaStdDesign