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

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

改め

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

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

5.

6.

アクセシビリティとは

7.

8.

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

9.

10.

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

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

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

24.

25.

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

26.

27.

28.

29.

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

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.

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.

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.

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.

44.

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.

54.

55.

56.

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

57.

58.

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.

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.

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.

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.

80.

まとめ

81.

82.

83.

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

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

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

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

ゼロから始める転移学習

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

各ページのテキスト