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

395 Views

March 30, 16

スライド概要

2016/3/17の勉強会にて発表された資料です。

SCRIPTY#5 ~フロントエンド紳士・淑女のための勉強会~
http://scripty.connpass.com/event/27752/

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

改め

3.

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

4.

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

5.

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

6.

アクセシビリティとは

7.

アクセシビリティとは 誰もが、どんな環境でも 利用するのに支障がない状態の度合い Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 7

8.

アクセシビリティとは 誰もが、どんな環境でも 利用するのに支障がない状態の度合い 様々な利用者 様々な利用機器 様々なコンテキスト 健常者、障害者、高齢者、 怪我をした利用者、プログラム デバイス、ブラウザ、支援技術、マウスの有無、 タッチディスプレイ、多様なスクリーンサイズ 運転中でよそ見ができない、 電車内で音が出せない、マウスが壊れた Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 8

9.

アクセシビリティに取り組む目的 • 将来の多様化する利用環境に備える • IoT やウェアラブルデバイスなど • 利用可能な環境を最大化 • ユーザビリティの土台として • 障害者差別禁止法に備える • CSR、SEO、etc…… Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 9

10.

アクセシビリティに取り組む目的 誰だっていつでもどこでもどんなデバイスでも 自由に Web を使いたい(と思っているはず) • 誰だって歳をとって高齢者になる • 誰だって怪我をしたら一時的な障害者になりえる • 新しいデバイスでも Web を使いたい • IE 限定のページはもう嫌だ Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 10

11.

アクセシビリティを高めるためには • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 11

12.

アクセシビリティを高めるためには • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 12

13.

Web コンテンツと利用者との関係性 Web コンテンツ 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 13

14.

Web コンテンツと利用者との関係性 Web コンテンツを UA(ブラウザなど) が取得して解析 利用機器 Web コンテンツ UA 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 14

15.

Web コンテンツと利用者との関係性 人によってはスクリーンリーダーなどの支援技術を使用 利用機器 Web コンテンツ UA 支援 技術 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 15

16.

Web コンテンツと利用者との関係性 ディスプレイ、スピーカー、点字リーダーなどの 出力機器を通して利用者へ伝達 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 16

17.

Web コンテンツと利用者との関係性 キーボード、マウス、タッチディスプレイなどの 入力機器を使用して操作 利用機器 Web コンテンツ UA 支援 技術 出力機器 入力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 17

18.

Web コンテンツと利用者との関係性 利用者は、機械を通して Web コンテンツを利用している 利用機器 Web コンテンツ UA 支援 技術 出力機器 入力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 18

19.

マシンリーダブルにすると UA が解釈可能であれば これはダイアログか 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 19

20.

マシンリーダブルにすると UA や支援技術がよしなにして ダイアログだって教えてあげといてー 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 20

21.

マシンリーダブルにすると 利用者に情報を適切に伝えやすくなる これ、ダイアログでっせ 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 21

22.

マシンリーダブルにすると ついでに UA 側で適切な操作にもしてくれたり ついでにダイアログ的な操作にしておこ 利用機器 Web コンテンツ UA 支援 技術 出力機器 入力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 22

23.

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

24.

今回扱うモーダルダイアログ Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 24

25.

今回扱うモーダルダイアログ Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 25

26.

今回依存する技術仕様 • HTML 5 • WAI-ARIA 1.0 • ホスト言語に不足している情報 (役割や状態、プロパティー)を拡張する仕様 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 26

27.

モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル(識別名称)を示す 3. ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 27

28.

モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル(識別名称)を示す 3. ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 28

29.

1. 「モーダルダイアログであること」を示す 「モーダルダイアログであること」を 機械にも解釈できるようにする Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 29

30.

残念ながら…… 2016年3月時点で 「モーダルダイアログであること」を 示す方法が見つかりませんでした。。。 • • • • Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 30

31.

仕様では • • dialog 要素 • ダイアログであることを示す • The dialog element - HTML Living Standard • showModal メソッドを使うとモーダルに aria-modal 属性(WAI-ARIA 1.1) • モーダルであることを示す • aria-modal 属性 - WAI-ARIA 1.1 日本語訳 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 31

32.

代わりに「ダイアログであること」を示す role="dialog" を付加して「ダイアログであること」を 機械に認識できるようにする <div class="Dialog" role="dialog"> <!-- モーダルダイアログの中身 --> </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 32

33.

モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル(識別名称)を示す 3. ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 33

34.

2. ダイアログのラベル(識別名称)を示す 「このダイアログってなにもの?」を 機械にも解釈できるようにする Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 34

35.

aria-labelledby 属性を使ってラベリング • ダイアログのラベルの記述箇所を示して、 機械にダイアログのラベルを認識できるようにする • 4.1.1. Labeling - WAI-ARIA 1.0 Authoring Practices <div class="Dialog" role="dialog" aria-labelledby="dialog-title"> <div class="Dialog__header"> <h1 id="dialog-title">新規追加入力</h1> </div> ……… </div> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 35

36.

モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル(識別名称)を示す 3. ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 36

37.

3. ダイアログの説明(内容や目的)を示す ダイアログの説明を機械にも解釈できるようにする Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 37

38.

aria-describedby 属性を使って説明を関連付け • ダイアログの説明の記述箇所を示して、 機械にダイアログの説明を認識できるようにする • 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. 無断引用・転載禁止 38

39.

モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル(識別名称)を示す 3. ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 39

40.

マシンリーダブルにしたことで機械が分かること これは「新規登録」のダイアログで 目的は「追加する情報を入力してください」 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 40

41.

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

42.

操作に不都合がないようにする 様々な入力機器でも操作ができるようにする • 意味や操作性を保持したフォーカス移動をする • モーダルダイアログが立ち上がってる間は、 他のコンテンツを操作できないようにする • 3.3. Making a Dialog Modal - WAI-ARIA 1.0 Authoring Practices Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 42

43.

操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 43

44.

1. 開いたとき • ダイアログ内のフォーカス可能な要素に フォーカスを移動させる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 44

45.

フォーカスを移動させないとどうなるか キーボードで操作する際に Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 45

46.

フォーカスを移動させないとどうなるか フォーカスを移動させてあげないと Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 46

47.

フォーカスを移動させないとどうなるか フォーカスがトリガーとなる要素に残ったままなので Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 47

48.

フォーカスを移動させないとどうなるか (ダイアログの要素の記述箇所によっては) Tab キーをたくさん叩かないと Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 48

49.

フォーカスを移動させないとどうなるか (ダイアログの要素の記述箇所によっては) Tab キーをたくさん叩かないと Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 49

50.

フォーカスを移動させないとどうなるか (ダイアログの要素の記述箇所によっては) Tab キーをたくさん叩かないと Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 50

51.

フォーカスを移動させないとどうなるか (ダイアログの要素の記述箇所によっては) Tab キーをたくさん叩かないと Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 51

52.

フォーカスを移動させないとどうなるか ダイアログにたどり着けない Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 52

53.

フォーカスを移動させないとどうなるか • キーボードだと操作するのが大変 • 見えてないとダイアログが開いたことに気付けない Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 53

54.

やること Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 54

55.

やること ダイアログを開いたら Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 55

56.

やること ダイアログのフォーカス可能な要素に フォーカスを移動させる Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 56

57.

操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 57

58.

2. 開いているあいだ • ダイアログの中を操作させたいので、 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 58

59.

2. 開いているあいだ • ダイアログの中を操作させたいので、 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 59

60.

フォーカスを制御しないとどうなるか Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 60

61.

フォーカスを制御しないとどうなるか フォーカスがここにあるとき Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 61

62.

フォーカスを制御しないとどうなるか Shift + Tab を押すと Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 62

63.

フォーカスを制御しないとどうなるか ダイアログの裏が操作できちゃう Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 63

64.

やること フォーカスを制御して、 フォーカスをダイアログの範囲に収める Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 64

65.

2. 開いているあいだ • ダイアログの中を操作させたいので、 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 65

66.

無視させないとどうなるか • Tab 移動以外の方法で、ダイアログ以外の コンテンツにアクセスできてしまう • 見出しジャンプやランドマークジャンプなど Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 66

67.

やること ダイアログが立ち上がったときに、 裏側は機械が無視するようにする Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 67

68.

後ろのコンテンツを機械に無視させる 後ろのコンテンツの aria-hidden 属性を true に設定する <body> <div class="Wrapper" aria-hidden="true"> ……後ろのコンテンツ…… </div> <div class="Dialog" role="dialog" ……> ……ダイアログ内のコンテンツ…… </div> </body> Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 68

69.

操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 69

70.

3. 閉じたとき • ダイアログを実行した要素へフォーカスを戻す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 70

71.

戻さないとどうなるか Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 71

72.

戻さないとどうなるか ダイアログを閉じると Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 72

73.

戻さないとどうなるか フォーカスを持ってたダイアログが消えるので Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 73

74.

戻さないとどうなるか Tab を押したらフォーカス位置がリセットされてしまう Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 74

75.

長いフォームの一部で使われていると最悪 ナビ ナビ ナビ ナビ Top > Parent > Current ○○○○○○入力 追加する情報を入力してください。 ほげほげ ほげほげ 追加 ほげほげ ここでモーダル開くようなの ほげほげ 新規追加 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 75

76.

戻さないとどうなるか • キーボードだと操作するのが大変 • 見えてないとダイアログが閉じたときに ページのどこにいるのか分からなくなる Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 76

77.

やること Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 77

78.

やること ダイアログを閉じたら Top > Parent > Current 新規追加入力 × ○○○○○○一覧 追加する情報を入力してください。 新規追加 艦名 鈴谷 Bismarck 艦名 艦種 艦種 選択してください レベル レベル 航空巡洋艦 110 戦艦 110 加賀 正規空母 新規追加 大鳳 装甲空母 キャンセル Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 110 110 78

79.

やること 実行した要素にフォーカスを戻す Top > Parent > Current ○○○○○○一覧 新規追加 艦名 艦種 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 レベル 79

80.

まとめ

81.

アクセシビリティを高めるためにやること • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 81

82.

モーダルダイアログをマシンリーダブルにする • 「モーダルダイアログであること」を示す • ダイアログのラベル(識別名称)を示す • ダイアログの説明(内容や目的)を示す Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 82

83.

マシンリーダブルにしたことで機械が分かること これは「○○○○」のダイアログで 内容は「○○○○○○○○○○○○」 利用機器 Web コンテンツ UA 支援 技術 出力機器 利用者 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 83

84.

モーダルダイアログの操作に不都合がないようにする • 意味や操作性を保持したフォーカス移動にする • モーダルダイアログが立ち上がってる間は、 他のコンテンツを操作できないようにする Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 84

85.

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

86.

Appendix

87.

参考情報 • 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 Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 87