SlideShare a Scribd company logo
1 of 51
Download to read offline
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

More Related Content

More from Nozomi Sawada

Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Nozomi Sawada
 
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIANozomi Sawada
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことNozomi Sawada
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜Nozomi Sawada
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようNozomi Sawada
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントNozomi Sawada
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」Nozomi Sawada
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」Nozomi Sawada
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」Nozomi Sawada
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでーNozomi Sawada
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」Nozomi Sawada
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」Nozomi Sawada
 

More from Nozomi Sawada (12)

Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
 
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
 
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいことより多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
 
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
 
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しようWAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
 
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/WebアクセシビリティチェックのポイントJIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
 
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
 
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」 第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
 
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
 
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
 
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
 

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