アクセシブルなモーダルダイアログの作り方 #scripty05

アクセシブルな
モーダルダイアログの作り方
ヤフー株式会社　マーケティングソリューションカンパニー
開発本部 UI フロントエンド開発部 
福本翔
2016年3月17日

このモー
ダイア 
　　ログ
アクセシ 
　　ビリティ
ダル
にを
KONO MODAL DIALOG NI ACCESSIBILITY WO!

福本翔 @fukumotoy
ヤフー株式会社 
マーケティングソリューションカンパニー  
開発本部 UI フロントエンド開発部 
UI エンジニアリングチーム
アクセシビリティエンジニア / 
フロントエンドエンジニア / 
Web デザイナー
広告サービスの業務ツール、 
プロモーションサイト / 
アクセシビリティの啓蒙など

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
アジェンダ
1. アクセシビリティとは
2. モーダルダイアログをアクセシブルにする
5

アクセシビリティとは

誰もが、どんな環境でも 
利用するのに支障がない状態の度合い
7

誰もが、どんな環境でも 
利用するのに支障がない状態の度合い
8
様々な利用者
健常者、障害者、高齢者、
怪我をした利用者、プログラム
様々な利用機器
デバイス、ブラウザ、支援技術、マウスの有無、 
タッチディスプレイ、多様なスクリーンサイズ
様々なコンテキスト
運転中でよそ見ができない、 
電車内で音が出せない、マウスが壊れた

アクセシビリティに取り組む目的
• 将来の多様化する利用環境に備える
• IoT やウェアラブルデバイスなど
• 利用可能な環境を最大化
• ユーザビリティの土台として
• 障害者差別禁止法に備える
• CSR、SEO、etc……
9

アクセシビリティに取り組む目的
10
• 誰だって歳をとって高齢者になる
• 誰だって怪我をしたら一時的な障害者になりえる
• 新しいデバイスでも Web を使いたい
• IE 限定のページはもう嫌だ
誰だっていつでもどこでもどんなデバイスでも 
自由に Web を使いたい（と思っているはず）

アクセシビリティを高めるためには
• ヒューマンリーダブルにする
• マシンリーダブルにする
• 操作に不都合がないようにする
11

アクセシビリティを高めるためには
12

Web コンテンツと利用者との関係性
13
Web 
コンテンツ
利用者

14
Web コンテンツを 
UA（ブラウザなど）が取得して解析
Web 
コンテンツ
利用機器
利用者
UA

15
人によってはスクリーンリーダーなどの支援技術を使用
Web 
コンテンツ
利用機器
利用者
UA
支援
技術

16
ディスプレイ、スピーカー、点字リーダーなどの
出力機器を通して利用者へ伝達
Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術

17
キーボード、マウス、タッチディスプレイなどの
入力機器を使用して操作
Web 
コンテンツ
利用機器
利用者
出力機器
入力機器
UA
支援
技術

18
利用者は、機械を通して 
Web コンテンツを利用している
Web 
コンテンツ
利用機器
利用者
出力機器
入力機器
UA
支援
技術

マシンリーダブルにすると
19
UA が解釈可能であれば
Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術
これはダイアログか

20
UA や支援技術がよしなにして
Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術
ダイアログだって教えてあげといてー

21
利用者に情報を適切に伝えやすくなる
Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術
これ、ダイアログでっせ

Web 
コンテンツ
利用機器
利用者
出力機器
入力機器
UA
支援
技術
22
ついでに UA 側で適切な操作にもしてくれたり
ついでにダイアログ的な操作にしておこ

モーダルダイアログを 
マシンリーダブルにする

今回扱うモーダルダイアログ
24
新規追加
○○○○○○一覧
艦名艦種レベル
鈴谷航空巡洋艦 110
Bismarck 戦艦 110
加賀正規空母 110
大鳳装甲空母 110
Top > Parent > Current

新規追加
○○○○○○一覧
Bismarck 戦艦 110
今回扱うモーダルダイアログ
25
新規追加入力 ×
追加する情報を入力してください。
艦名
レベル
キャンセル新規追加
選択してください艦種

今回依存する技術仕様
• HTML 5
• WAI-ARIA 1.0
• ホスト言語に不足している情報 
（役割や状態、プロパティー）を拡張する仕様
26

モーダルダイアログをマシンリーダブルにするためにやること
1. 「モーダルダイアログであること」を示す
2. ダイアログのラベル（識別名称）を示す
3. ダイアログの説明（内容や目的）を示す
27

28

29
「モーダルダイアログであること」を 
機械にも解釈できるようにする
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル

残念ながら……
2016年3月時点で 
「モーダルダイアログであること」を 
• • • •
示す方法が見つかりませんでした。。。
30

仕様では
• dialog 要素
• ダイアログであることを示す
• The dialog element - HTML Living Standard
• showModal メソッドを使うとモーダルに
• aria-modal 属性（WAI-ARIA 1.1）
• モーダルであることを示す
• aria-modal 属性 - WAI-ARIA 1.1 日本語訳
31

代わりに「ダイアログであること」を示す
32
role="dialog" を付加して「ダイアログであること」を 
機械に認識できるようにする
<div class="Dialog" role="dialog">

</div>

33

34
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
「このダイアログってなにもの？」を 
機械にも解釈できるようにする

aria-labelledby 属性を使ってラベリング
35
<div class="Dialog" role="dialog" 
aria-labelledby="dialog-title">
<div class="Dialog__header">
<h1 id="dialog-title">新規追加入力</h1>
</div>
………
</div>
• ダイアログのラベルの記述箇所を示して、 
機械にダイアログのラベルを認識できるようにする
• 4.1.1. Labeling - WAI-ARIA 1.0 Authoring Practices

36

37
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
ダイアログの説明を機械にも解釈できるようにする

aria-describedby 属性を使って説明を関連付け
38
• ダイアログの説明の記述箇所を示して、 
機械にダイアログの説明を認識できるようにする
• 4.1.2. Describing - WAI-ARIA 1.0 Authoring Practices
<div class="Dialog" role="dialog" 
aria-labelledby="dialog-title" 
aria-describedby="dialog-description">
………
<div class="Dialog__body">
<p id="dialog-description">追加～～ください。</p>
………
</div>
………
</div>

39

Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術
マシンリーダブルにしたことで機械が分かること
40
これは「新規登録」のダイアログで
目的は「追加する情報を入力してください」

モーダルダイアログの操作に 
不都合がないようにする

操作に不都合がないようにする
42
• 意味や操作性を保持したフォーカス移動をする
• モーダルダイアログが立ち上がってる間は、 
他のコンテンツを操作できないようにする
• 3.3. Making a Dialog Modal - WAI-ARIA 1.0
Authoring Practices
様々な入力機器でも操作ができるようにする

1. 開いたとき
2. 開いているあいだ
3. 閉じたとき
43

1. 開いたとき
• ダイアログ内のフォーカス可能な要素に 
フォーカスを移動させる
44

フォーカスを移動させないとどうなるか
45
キーボードで操作する際に
新規追加
○○○○○○一覧
Bismarck 戦艦 110

新規追加
○○○○○○一覧
Bismarck 戦艦 110
46
フォーカスを移動させてあげないと

新規追加
○○○○○○一覧
Bismarck 戦艦 110
47
艦名
レベル
フォーカスがトリガーとなる要素に残ったままなので

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
48
（ダイアログの要素の記述箇所によっては） 
Tab キーをたくさん叩かないと

新規追加
○○○○○○一覧
Bismarck 戦艦 110
49
艦名
レベル

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
50

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
51

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
52
ダイアログにたどり着けない

• キーボードだと操作するのが大変
• 見えてないとダイアログが開いたことに気付けない
53

やること
54
新規追加
○○○○○○一覧
Bismarck 戦艦 110

新規追加
○○○○○○一覧
Bismarck 戦艦 110
やること
55
ダイアログを開いたら

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
やること
56
ダイアログのフォーカス可能な要素に 
フォーカスを移動させる

1. 開いたとき
3. 閉じたとき
57

• ダイアログの中を操作させたいので、 
ダイアログ以外を操作できないようにする
• フォーカスを制御する
• 後ろのコンテンツを無視させる
58

59

フォーカスを制御しないとどうなるか
60
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
61
フォーカスがここにあるとき

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
62
Shift + Tab を押すと

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
63
ダイアログの裏が操作できちゃう

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
やること
64
フォーカスを制御して、 
フォーカスをダイアログの範囲に収める

65

無視させないとどうなるか
• Tab 移動以外の方法で、ダイアログ以外の 
コンテンツにアクセスできてしまう
• 見出しジャンプやランドマークジャンプなど
66

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
やること
67
ダイアログが立ち上がったときに、 
裏側は機械が無視するようにする

<body>
<div class="Wrapper" aria-hidden="true">
……後ろのコンテンツ……
</div>
<div class="Dialog" role="dialog" ……>
……ダイアログ内のコンテンツ……
</div>
</body>
後ろのコンテンツを機械に無視させる
68
後ろのコンテンツの aria-hidden 属性を 
true に設定する

1. 開いたとき
3. 閉じたとき
69

3. 閉じたとき
• ダイアログを実行した要素へフォーカスを戻す
70

戻さないとどうなるか
71
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
72
ダイアログを閉じると

73
新規追加
○○○○○○一覧
Bismarck 戦艦 110
フォーカスを持ってたダイアログが消えるので

新規追加
○○○○○○一覧
Bismarck 戦艦 110
74
Tab を押したらフォーカス位置がリセットされてしまう

長いフォームの一部で使われていると最悪
75
ほげほげ
ほげほげ
ほげほげ
ほげほげ
新規追加
○○○○○○入力
追加
ナビナビナビナビ
ここでモーダル開くようなの

• キーボードだと操作するのが大変
• 見えてないとダイアログが閉じたときに 
ページのどこにいるのか分からなくなる
76

やること
77
新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル

新規追加
○○○○○○一覧
Bismarck 戦艦 110
艦名
レベル
やること
78
ダイアログを閉じたら

新規追加
○○○○○○一覧
Bismarck 戦艦 110
やること
79
実行した要素にフォーカスを戻す

アクセシビリティを高めるためにやること
81

モーダルダイアログをマシンリーダブルにする
• 「モーダルダイアログであること」を示す
• ダイアログのラベル（識別名称）を示す
• ダイアログの説明（内容や目的）を示す
82

Web 
コンテンツ
利用機器
利用者
出力機器
UA
支援
技術
マシンリーダブルにしたことで機械が分かること
83
これは「○○○○」のダイアログで
内容は「○○○○○○○○○○○○」

モーダルダイアログの操作に不都合がないようにする
• 意味や操作性を保持したフォーカス移動にする
• モーダルダイアログが立ち上がってる間は、 
他のコンテンツを操作できないようにする
84

以上、ご静聴ありがとうございました！

参考情報
• WAI-ARIA 1.0 Authoring Practices
• 3.3. Making a Dialog Modal
• 4.1. Labeling and Describing
• dialog - WAI-ARIA 1.0 日本語訳
• The dialog element - HTML Living Standard
• dialog - WAI-ARIA 1.1 日本語訳
• Using the dialog role - MDN
• Modal - Bootstrap4
• The Incredible Accessible Modal Window, Version 3
• モーダルウィンドウを考える - Website Usability Info
87

アクセシブルなモーダルダイアログの作り方 #scripty05

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to アクセシブルなモーダルダイアログの作り方 #scripty05

Similar to アクセシブルなモーダルダイアログの作り方 #scripty05 (20)

More from Yahoo!デベロッパーネットワーク

More from Yahoo!デベロッパーネットワーク (20)

Recently uploaded

Recently uploaded (8)

アクセシブルなモーダルダイアログの作り方 #scripty05