アクセシブルなモーダルダイアログの作り方 #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



Top > Parent > Current新規追加入力 ×


艦名

レベル




残念ながら……

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


ほげほげ

ほげほげ

ほげほげ

ほげほげ

新規追加

○○○○○○入力Top > Parent > Current

追加

ナビナビナビナビ

ここでモーダル開くようなの



• キーボードだと操作するのが大変

• 見えてないとダイアログが閉じたときにページのどこにいるのか分からなくなる

76


やること

77

新規追加

○○○○○○一覧



Bismarck 戦艦 110





艦名

レベル




新規追加

○○○○○○一覧



Bismarck 戦艦 110





艦名

レベル



やること

78

ダイアログを閉じたら


新規追加

○○○○○○一覧



Bismarck 戦艦 110




やること

79

実行した要素にフォーカスを戻す

まとめ


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




81


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

• 「モーダルダイアログであること」を示す

• ダイアログのラベル（識別名称）を示す

• ダイアログの説明（内容や目的）を示す

82


Webコンテンツ

利用機器

利用者

出力機器

UA支援技術

マシンリーダブルにしたことで機械が分かること

83

これは「○○○○」のダイアログで内容は「○○○○○○○○○○○○」


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

• 意味や操作性を保持したフォーカス移動にする

• モーダルダイアログが立ち上がってる間は、他のコンテンツを操作できないようにする

84

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

Appendix


参考情報

• 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 Info87

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

Technology