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

アクセシビリティとは

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

アクセシビリティとは

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

7

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

アクセシビリティとは

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

8

様々な利用者 健常者、障害者、高齢者、 怪我をした利用者、プログラム

様々な利用機器 デバイス、ブラウザ、支援技術、マウスの有無、タッチディスプレイ、多様なスクリーンサイズ

様々なコンテキスト 運転中でよそ見ができない、電車内で音が出せない、マウスが壊れた

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

アクセシビリティに取り組む目的

• 将来の多様化する利用環境に備える

• IoT やウェアラブルデバイスなど

• 利用可能な環境を最大化

• ユーザビリティの土台として

• 障害者差別禁止法に備える

• CSR、SEO、etc……

9

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

アクセシビリティに取り組む目的

10

• 誰だって歳をとって高齢者になる

• 誰だって怪我をしたら一時的な障害者になりえる

• 新しいデバイスでも Web を使いたい

• IE 限定のページはもう嫌だ

誰だっていつでもどこでもどんなデバイスでも自由に Web を使いたい（と思っているはず）

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

• ヒューマンリーダブルにする

• マシンリーダブルにする

• 操作に不都合がないようにする

11

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

• ヒューマンリーダブルにする

• マシンリーダブルにする

• 操作に不都合がないようにする

12

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

13

Webコンテンツ

利用者

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

14

Web コンテンツをUA（ブラウザなど） が取得して解析

Webコンテンツ

利用機器

利用者

UA

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

15

人によってはスクリーンリーダーなどの支援技術を使用

Webコンテンツ

利用機器

利用者

UA支援 技術

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

16

ディスプレイ、スピーカー、点字リーダーなどの 出力機器を通して利用者へ伝達

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

17

キーボード、マウス、タッチディスプレイなどの 入力機器を使用して操作

Webコンテンツ

利用機器

利用者

出力機器

入力機器

UA支援 技術

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

18

利用者は、機械を通してWeb コンテンツを利用している

Webコンテンツ

利用機器

利用者

出力機器

入力機器

UA支援 技術

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

マシンリーダブルにすると

19

UA が解釈可能であれば

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

これはダイアログか

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

マシンリーダブルにすると

20

UA や支援技術がよしなにして

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

ダイアログだって教えてあげといてー

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

マシンリーダブルにすると

21

利用者に情報を適切に伝えやすくなる

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

これ、ダイアログでっせ

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

Webコンテンツ

利用機器

利用者

出力機器

入力機器

UA支援 技術

マシンリーダブルにすると

22

ついでに UA 側で適切な操作にもしてくれたり

ついでにダイアログ的な操作にしておこ

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

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

今回扱うモーダルダイアログ

24

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

今回扱うモーダルダイアログ

25

新規追加入力 ×

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

今回依存する技術仕様

• HTML 5

• WAI-ARIA 1.0

• ホスト言語に不足している情報（役割や状態、プロパティー）を拡張する仕様

26

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

モーダルダイアログをマシンリーダブルにするためにやること

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

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

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

27

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

モーダルダイアログをマシンリーダブルにするためにやること

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

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

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

28

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

29

「モーダルダイアログであること」を機械にも解釈できるようにする

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

残念ながら……

2016年3月時点で「モーダルダイアログであること」を

• • • •

示す方法が見つかりませんでした。。。

30

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

仕様では

• dialog 要素

• ダイアログであることを示す

• The dialog element - HTML Living Standard

• showModal メソッドを使うとモーダルに

• aria-modal 属性（WAI-ARIA 1.1）

• モーダルであることを示す

• aria-modal 属性 - WAI-ARIA 1.1 日本語訳

31

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

代わりに「ダイアログであること」を示す

32

role="dialog" を付加して「ダイアログであること」を機械に認識できるようにする

<div class="Dialog" role="dialog"><!-- モーダルダイアログの中身 -->

</div>

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

モーダルダイアログをマシンリーダブルにするためにやること

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

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

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

33

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

34

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

「このダイアログってなにもの？」を機械にも解釈できるようにする

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

モーダルダイアログをマシンリーダブルにするためにやること

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

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

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

36

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

37

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

ダイアログの説明を機械にも解釈できるようにする

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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>

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

モーダルダイアログをマシンリーダブルにするためにやること

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

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

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

39

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

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

40

これは「新規登録」のダイアログで 目的は「追加する情報を入力してください」

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

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

操作に不都合がないようにする

42

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

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

• 3.3. Making a Dialog Modal - WAI-ARIA 1.0 Authoring Practices

様々な入力機器でも操作ができるようにする

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

操作に不都合がないようにする

1. 開いたとき

2. 開いているあいだ

3. 閉じたとき

43

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

1. 開いたとき

• ダイアログ内のフォーカス可能な要素にフォーカスを移動させる

44

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

フォーカスを移動させないとどうなるか

45

キーボードで操作する際に

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

フォーカスを移動させないとどうなるか

46

フォーカスを移動させてあげないと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

フォーカスを移動させないとどうなるか

47

新規追加入力 ×

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスがトリガーとなる要素に残ったままなので

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを移動させないとどうなるか

48

（ダイアログの要素の記述箇所によっては）Tab キーをたくさん叩かないと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

フォーカスを移動させないとどうなるか

49

新規追加入力 ×

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

（ダイアログの要素の記述箇所によっては）Tab キーをたくさん叩かないと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを移動させないとどうなるか

50

（ダイアログの要素の記述箇所によっては）Tab キーをたくさん叩かないと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを移動させないとどうなるか

51

（ダイアログの要素の記述箇所によっては）Tab キーをたくさん叩かないと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを移動させないとどうなるか

52

ダイアログにたどり着けない

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

フォーカスを移動させないとどうなるか

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

• 見えてないとダイアログが開いたことに気付けない

53

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

やること

54

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

やること

55

ダイアログを開いたら

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

やること

56

ダイアログのフォーカス可能な要素にフォーカスを移動させる

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

操作に不都合がないようにする

1. 開いたとき

2. 開いているあいだ

3. 閉じたとき

57

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

2. 開いているあいだ

• ダイアログの中を操作させたいので、ダイアログ以外を操作できないようにする

• フォーカスを制御する

• 後ろのコンテンツを無視させる

58

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

2. 開いているあいだ

• ダイアログの中を操作させたいので、 ダイアログ以外を操作できないようにする

• フォーカスを制御する

• 後ろのコンテンツを無視させる

59

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

フォーカスを制御しないとどうなるか

60

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを制御しないとどうなるか

61

フォーカスがここにあるとき

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを制御しないとどうなるか

62

Shift + Tab を押すと

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

フォーカスを制御しないとどうなるか

63

ダイアログの裏が操作できちゃう

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

やること

64

フォーカスを制御して、フォーカスをダイアログの範囲に収める

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

2. 開いているあいだ

• ダイアログの中を操作させたいので、 ダイアログ以外を操作できないようにする

• フォーカスを制御する

• 後ろのコンテンツを無視させる

65

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

無視させないとどうなるか

• Tab 移動以外の方法で、ダイアログ以外のコンテンツにアクセスできてしまう

• 見出しジャンプやランドマークジャンプなど

66

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

やること

67

ダイアログが立ち上がったときに、裏側は機械が無視するようにする

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

<body><div class="Wrapper" aria-hidden="true">……後ろのコンテンツ……

</div><div class="Dialog" role="dialog" ……>

……ダイアログ内のコンテンツ……

</div></body>

後ろのコンテンツを機械に無視させる

68

後ろのコンテンツの aria-hidden 属性をtrue に設定する

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

操作に不都合がないようにする

1. 開いたとき

2. 開いているあいだ

3. 閉じたとき

69

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

3. 閉じたとき

• ダイアログを実行した要素へフォーカスを戻す

70

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

戻さないとどうなるか

71

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

戻さないとどうなるか

72

ダイアログを閉じると

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

戻さないとどうなるか

73

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

フォーカスを持ってたダイアログが消えるので

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

戻さないとどうなるか

74

Tab を押したらフォーカス位置がリセットされてしまう

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

長いフォームの一部で使われていると最悪

75

追加する情報を入力してください。

ほげほげ

ほげほげ

ほげほげ

ほげほげ

新規追加

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

追加

ナビ ナビ ナビ ナビ

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

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

戻さないとどうなるか

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

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

76

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

やること

77

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

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

追加する情報を入力してください。

艦名

レベル

キャンセル新規追加

選択してください艦種

やること

78

ダイアログを閉じたら

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

新規追加

○○○○○○一覧

艦名 艦種 レベル

鈴谷 航空巡洋艦 110

Bismarck 戦艦 110

加賀 正規空母 110

大鳳 装甲空母 110

Top > Parent > Current

やること

79

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

まとめ

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

• ヒューマンリーダブルにする

• マシンリーダブルにする

• 操作に不都合がないようにする

81

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

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

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

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

82

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

Webコンテンツ

利用機器

利用者

出力機器

UA支援 技術

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

83

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

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

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

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

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

84

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

Appendix

Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

参考情報

• 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