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

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

1. 1. アクセシブルな モーダルダイアログの作り方 ヤフー株式会社　マーケティングソリューションカンパニー 開発本部 UI フロントエンド開発部
 福本翔 2016年3月17日
2. 2. 改め
3. 3. このモー ダイア
 　　ログ アクセシ
 　　ビリティ ダル に を KONO MODAL DIALOG NI ACCESSIBILITY WO!
4. 4. 福本 翔 @fukumotoy ヤフー株式会社
 マーケティングソリューションカンパニー 
 開発本部 UI フロントエンド開発部
 UI エンジニアリングチーム アクセシビリティエンジニア /
 フロントエンドエンジニア /
 Web デザイナー 広告サービスの業務ツール、
 プロモーションサイト /
 アクセシビリティの啓蒙など
5. 5. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アジェンダ 1. アクセシビリティとは 2. モーダルダイアログをアクセシブルにする 5
6. 6. アクセシビリティとは
7. 7. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティとは 誰もが、どんな環境でも
 利用するのに支障がない状態の度合い 7
8. 8. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティとは 誰もが、どんな環境でも
 利用するのに支障がない状態の度合い 8 様々な利用者 健常者、障害者、高齢者、 怪我をした利用者、プログラム 様々な利用機器 デバイス、ブラウザ、支援技術、マウスの有無、
 タッチディスプレイ、多様なスクリーンサイズ 様々なコンテキスト 運転中でよそ見ができない、
 電車内で音が出せない、マウスが壊れた
9. 9. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティに取り組む目的 • 将来の多様化する利用環境に備える • IoT やウェアラブルデバイスなど • 利用可能な環境を最大化 • ユーザビリティの土台として • 障害者差別禁止法に備える • CSR、SEO、etc…… 9
10. 10. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティに取り組む目的 10 • 誰だって歳をとって高齢者になる • 誰だって怪我をしたら一時的な障害者になりえる • 新しいデバイスでも Web を使いたい • IE 限定のページはもう嫌だ 誰だっていつでもどこでもどんなデバイスでも
 自由に Web を使いたい（と思っているはず）
11. 11. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティを高めるためには • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする 11
12. 12. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティを高めるためには • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする 12
13. 13. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 13 Web
 コンテンツ 利用者
14. 14. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 14 Web コンテンツを
 UA（ブラウザなど） が取得して解析 Web
 コンテンツ 利用機器 利用者 UA
15. 15. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 15 人によってはスクリーンリーダーなどの支援技術を使用 Web
 コンテンツ 利用機器 利用者 UA 支援 技術
16. 16. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 16 ディスプレイ、スピーカー、点字リーダーなどの 出力機器を通して利用者へ伝達 Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術
17. 17. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 17 キーボード、マウス、タッチディスプレイなどの 入力機器を使用して操作 Web
 コンテンツ 利用機器 利用者 出力機器 入力機器 UA 支援 技術
18. 18. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web コンテンツと利用者との関係性 18 利用者は、機械を通して
 Web コンテンツを利用している Web
 コンテンツ 利用機器 利用者 出力機器 入力機器 UA 支援 技術
19. 19. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 マシンリーダブルにすると 19 UA が解釈可能であれば Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術 これはダイアログか
20. 20. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 マシンリーダブルにすると 20 UA や支援技術がよしなにして Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術 ダイアログだって教えてあげといてー
21. 21. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 マシンリーダブルにすると 21 利用者に情報を適切に伝えやすくなる Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術 これ、ダイアログでっせ
22. 22. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web
 コンテンツ 利用機器 利用者 出力機器 入力機器 UA 支援 技術 マシンリーダブルにすると 22 ついでに UA 側で適切な操作にもしてくれたり ついでにダイアログ的な操作にしておこ
23. 23. モーダルダイアログを
 マシンリーダブルにする
24. 24. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 今回扱うモーダルダイアログ 24 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current
25. 25. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 今回扱うモーダルダイアログ 25 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種
26. 26. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 今回依存する技術仕様 • HTML 5 • WAI-ARIA 1.0 • ホスト言語に不足している情報
 （役割や状態、プロパティー）を拡張する仕様 26
27. 27. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル（識別名称）を示す 3. ダイアログの説明（内容や目的）を示す 27
28. 28. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル（識別名称）を示す 3. ダイアログの説明（内容や目的）を示す 28
29. 29. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 1. 「モーダルダイアログであること」を示す 29 「モーダルダイアログであること」を
 機械にも解釈できるようにする 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種
30. 30. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 残念ながら…… 2016年3月時点で
 「モーダルダイアログであること」を
 • • • • 示す方法が見つかりませんでした。。。 30
31. 31. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 草案段階の仕様では • dialog 要素（HTML5.1） • ダイアログであることを示す • dialog 要素 - HTML 5.1 日本語訳 • showModal メソッドを使うとモーダルに • aria-modal 属性（WAI-ARIA 1.1） • モーダルであることを示す • aria-modal 属性 - WAI-ARIA 1.1 日本語訳 31
32. 32. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 代わりに「ダイアログであること」を示す 32 role="dialog" を付加して「ダイアログであること」を
 機械に認識できるようにする <div class="Dialog" role="dialog"> <!-- モーダルダイアログの中身 --> </div>
33. 33. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル（識別名称）を示す 3. ダイアログの説明（内容や目的）を示す 33
34. 34. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 2. ダイアログのラベル（識別名称）を示す 34 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 「このダイアログってなにもの？」を
 機械にも解釈できるようにする
35. 35. 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
36. 36. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル（識別名称）を示す 3. ダイアログの説明（内容や目的）を示す 36
37. 37. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 3. ダイアログの説明（内容や目的）を示す 37 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 ダイアログの説明を機械にも解釈できるようにする
38. 38. 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>
39. 39. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにするためにやること 1. 「モーダルダイアログであること」を示す 2. ダイアログのラベル（識別名称）を示す 3. ダイアログの説明（内容や目的）を示す 39
40. 40. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術 マシンリーダブルにしたことで機械が分かること 40 これは「新規登録」のダイアログで 目的は「追加する情報を入力してください」
41. 41. モーダルダイアログの操作に
 不都合がないようにする
42. 42. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 操作に不都合がないようにする 42 • 意味や操作性を保持したフォーカス移動をする • モーダルダイアログが立ち上がってる間は、
 他のコンテンツを操作できないようにする • 3.3. Making a Dialog Modal - WAI-ARIA 1.0 Authoring Practices 様々な入力機器でも操作ができるようにする
43. 43. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき 43
44. 44. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 1. 開いたとき • ダイアログ内のフォーカス可能な要素に
 フォーカスを移動させる 44
45. 45. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 フォーカスを移動させないとどうなるか 45 キーボードで操作する際に 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current
46. 46. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current フォーカスを移動させないとどうなるか 46 フォーカスを移動させてあげないと
47. 47. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current フォーカスを移動させないとどうなるか 47 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスがトリガーとなる要素に残ったままなので
48. 48. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを移動させないとどうなるか 48 （ダイアログの要素の記述箇所によっては）
 Tab キーをたくさん叩かないと
49. 49. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current フォーカスを移動させないとどうなるか 49 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 （ダイアログの要素の記述箇所によっては）
 Tab キーをたくさん叩かないと
50. 50. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを移動させないとどうなるか 50 （ダイアログの要素の記述箇所によっては）
 Tab キーをたくさん叩かないと
51. 51. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを移動させないとどうなるか 51 （ダイアログの要素の記述箇所によっては）
 Tab キーをたくさん叩かないと
52. 52. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを移動させないとどうなるか 52 ダイアログにたどり着けない
53. 53. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 フォーカスを移動させないとどうなるか • キーボードだと操作するのが大変 • 見えてないとダイアログが開いたことに気付けない 53
54. 54. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 やること 54 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current
55. 55. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current やること 55 ダイアログを開いたら
56. 56. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 やること 56 ダイアログのフォーカス可能な要素に
 フォーカスを移動させる
57. 57. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき 57
58. 58. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 2. 開いているあいだ • ダイアログの中を操作させたいので、
 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる 58
59. 59. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 2. 開いているあいだ • ダイアログの中を操作させたいので、
 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる 59
60. 60. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 フォーカスを制御しないとどうなるか 60 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種
61. 61. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを制御しないとどうなるか 61 フォーカスがここにあるとき
62. 62. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを制御しないとどうなるか 62 Shift + Tab を押すと
63. 63. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 フォーカスを制御しないとどうなるか 63 ダイアログの裏が操作できちゃう
64. 64. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 やること 64 フォーカスを制御して、
 フォーカスをダイアログの範囲に収める
65. 65. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 2. 開いているあいだ • ダイアログの中を操作させたいので、
 ダイアログ以外を操作できないようにする • フォーカスを制御する • 後ろのコンテンツを無視させる 65
66. 66. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 無視させないとどうなるか • Tab 移動以外の方法で、ダイアログ以外の
 コンテンツにアクセスできてしまう • 見出しジャンプやランドマークジャンプなど 66
67. 67. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 やること 67 ダイアログが立ち上がったときに、
 裏側は機械が無視するようにする
68. 68. 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 に設定する
69. 69. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 操作に不都合がないようにする 1. 開いたとき 2. 開いているあいだ 3. 閉じたとき 69
70. 70. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 3. 閉じたとき • ダイアログを実行した要素へフォーカスを戻す 70
71. 71. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 戻さないとどうなるか 71 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種
72. 72. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 戻さないとどうなるか 72 ダイアログを閉じると
73. 73. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 戻さないとどうなるか 73 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current フォーカスを持ってたダイアログが消えるので
74. 74. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 戻さないとどうなるか 74 Tab を押したらフォーカス位置がリセットされてしまう
75. 75. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 長いフォームの一部で使われていると最悪 75 追加する情報を入力してください。 ほげほげ ほげほげ ほげほげ ほげほげ 新規追加 ○○○○○○入力 Top > Parent > Current 追加 ナビ ナビ ナビ ナビ ここでモーダル開くようなの
76. 76. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 戻さないとどうなるか • キーボードだと操作するのが大変 • 見えてないとダイアログが閉じたときに
 ページのどこにいるのか分からなくなる 76
77. 77. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 やること 77 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種
78. 78. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current 新規追加入力 × 追加する情報を入力してください。 艦名 レベル キャンセル新規追加 選択してください艦種 やること 78 ダイアログを閉じたら
79. 79. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 新規追加 ○○○○○○一覧 艦名 艦種 レベル 鈴谷 航空巡洋艦 110 Bismarck 戦艦 110 加賀 正規空母 110 大鳳 装甲空母 110 Top > Parent > Current やること 79 実行した要素にフォーカスを戻す
80. 80. まとめ
81. 81. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 アクセシビリティを高めるためにやること • ヒューマンリーダブルにする • マシンリーダブルにする • 操作に不都合がないようにする 81
82. 82. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログをマシンリーダブルにする • 「モーダルダイアログであること」を示す • ダイアログのラベル（識別名称）を示す • ダイアログの説明（内容や目的）を示す 82
83. 83. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 Web
 コンテンツ 利用機器 利用者 出力機器 UA 支援 技術 マシンリーダブルにしたことで機械が分かること 83 これは「○○○○」のダイアログで 内容は「○○○○○○○○○○○○」
84. 84. Copyright (C) 2016 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 モーダルダイアログの操作に不都合がないようにする • 意味や操作性を保持したフォーカス移動にする • モーダルダイアログが立ち上がってる間は、
 他のコンテンツを操作できないようにする 84
85. 85. 以上、ご静聴ありがとうございました！
86. 86. Appendix
87. 87. 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 日本語訳 • dialog 要素 - HTML5.1 日本語訳 • dialog - WAI-ARIA 1.1 日本語訳 • Using the dialog role - MDN • Modal - Bootstrap4 • The Incredible Accessible Modal Window, Version 3 • モーダルウィンドウを考える - Website Usability Info 87