SlideShare a Scribd company logo
アクセシブルな
モーダルダイアログの作り方
ヤフー株式会社 マーケティングソリューションカンパニー
開発本部 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 Info
87

More Related Content

What's hot

大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
Itsuki Kuroda
 
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Editionサービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
Graat(グラーツ)
 
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
Yoshitaka Kawashima
 
Debianの修正はどのように出荷されるか
Debianの修正はどのように出荷されるかDebianの修正はどのように出荷されるか
Debianの修正はどのように出荷されるか
Hideki Yamane
 
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみようOWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP Nagoya
 
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
Trainocate Japan, Ltd.
 
KubeEdgeを触ってみた
KubeEdgeを触ってみたKubeEdgeを触ってみた
KubeEdgeを触ってみた
Tomoyuki Tanigaki
 
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Kazuya Sugimoto
 
【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発
日本マイクロソフト株式会社
 
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
Web Accessibility Infrastructure Committee (WAIC)
 
ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣
Yoshitaka Kawashima
 
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
Masanori KAMAYAMA
 
Windows 10 の新機能 Azure AD Domain Join とは
Windows 10 の新機能 Azure AD Domain Join とはWindows 10 の新機能 Azure AD Domain Join とは
Windows 10 の新機能 Azure AD Domain Join とは
Mari Miyakawa
 
スペシャリストになるには
スペシャリストになるにはスペシャリストになるには
スペシャリストになるには外道 父
 
DeNAのネイティブアプリにおけるサーバ開発の現在と未来
DeNAのネイティブアプリにおけるサーバ開発の現在と未来DeNAのネイティブアプリにおけるサーバ開発の現在と未来
DeNAのネイティブアプリにおけるサーバ開発の現在と未来
DeNA
 
業務で ISUCON することになった話.pdf
業務で ISUCON することになった話.pdf業務で ISUCON することになった話.pdf
業務で ISUCON することになった話.pdf
TakuyaFukuoka2
 
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
 
自動テストにおけるコードベース戦略とローコード戦略のすみ分け
自動テストにおけるコードベース戦略とローコード戦略のすみ分け自動テストにおけるコードベース戦略とローコード戦略のすみ分け
自動テストにおけるコードベース戦略とローコード戦略のすみ分け
tomohiro odan
 
Mavenの真実とウソ
Mavenの真実とウソMavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
 

What's hot (20)

大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
大規模レガシー環境に立ち向かう有機的な開発フォーメーション #devsumi #devsumic
 
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Editionサービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
サービスブループリント導入ガイド A Guide to Service Blueprinting Japanese Edition
 
jenkinsで遊ぶ
jenkinsで遊ぶjenkinsで遊ぶ
jenkinsで遊ぶ
 
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
 
Debianの修正はどのように出荷されるか
Debianの修正はどのように出荷されるかDebianの修正はどのように出荷されるか
Debianの修正はどのように出荷されるか
 
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみようOWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
OWASP ISVS を使って IoT エコシステムのセキュリティについて考えてみよう
 
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
なるべく作らない内製のために~「作る」から「選んでつなぐ」へ~
 
KubeEdgeを触ってみた
KubeEdgeを触ってみたKubeEdgeを触ってみた
KubeEdgeを触ってみた
 
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
Java クライント実装におけるAPIスタイル頂上決戦! 野良REST vs GraphQL vs OData vs OpenAPI (Swagger)
 
【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発
 
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
こうすれば書ける!ウェブアクセシビリティ方針と試験結果表示
 
ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣
 
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
IDaaS を利用すべき理由とエンジニアがおさえておくべきポイント (2021年1月14日)
 
Windows 10 の新機能 Azure AD Domain Join とは
Windows 10 の新機能 Azure AD Domain Join とはWindows 10 の新機能 Azure AD Domain Join とは
Windows 10 の新機能 Azure AD Domain Join とは
 
スペシャリストになるには
スペシャリストになるにはスペシャリストになるには
スペシャリストになるには
 
DeNAのネイティブアプリにおけるサーバ開発の現在と未来
DeNAのネイティブアプリにおけるサーバ開発の現在と未来DeNAのネイティブアプリにおけるサーバ開発の現在と未来
DeNAのネイティブアプリにおけるサーバ開発の現在と未来
 
業務で ISUCON することになった話.pdf
業務で ISUCON することになった話.pdf業務で ISUCON することになった話.pdf
業務で ISUCON することになった話.pdf
 
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
 
自動テストにおけるコードベース戦略とローコード戦略のすみ分け
自動テストにおけるコードベース戦略とローコード戦略のすみ分け自動テストにおけるコードベース戦略とローコード戦略のすみ分け
自動テストにおけるコードベース戦略とローコード戦略のすみ分け
 
Mavenの真実とウソ
Mavenの真実とウソMavenの真実とウソ
Mavenの真実とウソ
 

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

Yahoo! JAPAN の Ambari 活用事例 #yjdsnight
Yahoo! JAPAN の Ambari 活用事例 #yjdsnightYahoo! JAPAN の Ambari 活用事例 #yjdsnight
Yahoo! JAPAN の Ambari 活用事例 #yjdsnight
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetup
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetupYahoo! JAPAN の Ambari 活用事例 #ambarimeetup
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetup
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumiYahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
Yahoo!デベロッパーネットワーク
 
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumiヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
Yahoo!デベロッパーネットワーク
 
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
Yahoo!デベロッパーネットワーク
 
Keycloak拡張入門
Keycloak拡張入門Keycloak拡張入門
Keycloak拡張入門
Hiroyuki Wada
 
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
Nozomi Kurihara
 
Deno で始めるフロントエンド
Deno で始めるフロントエンドDeno で始めるフロントエンド
Deno で始めるフロントエンド
虎の穴 開発室
 
gumiにおける、海外支社とのAtlassian製品利用事例
gumiにおける、海外支社とのAtlassian製品利用事例gumiにおける、海外支社とのAtlassian製品利用事例
gumiにおける、海外支社とのAtlassian製品利用事例
知教 本間
 
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumiYahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo!デベロッパーネットワーク
 
AWS Proton を使ってみた
AWS Proton を使ってみたAWS Proton を使ってみた
AWS Proton を使ってみた
虎の穴 開発室
 
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groongaMroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Yahoo!デベロッパーネットワーク
 
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
 
大規模システムScrum実践 効果と課題 #rsgt2015
大規模システムScrum実践 効果と課題 #rsgt2015大規模システムScrum実践 効果と課題 #rsgt2015
大規模システムScrum実践 効果と課題 #rsgt2015
Yahoo!デベロッパーネットワーク
 
ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3
Yahoo!デベロッパーネットワーク
 
Bambooによる継続的デリバリー
Bambooによる継続的デリバリーBambooによる継続的デリバリー
PHPコアから読み解くPHP5.5
PHPコアから読み解くPHP5.5PHPコアから読み解くPHP5.5
PHPコアから読み解くPHP5.5
Yahoo!デベロッパーネットワーク
 
サーバサイドKotlinへの入門 Ktor編
サーバサイドKotlinへの入門 Ktor編サーバサイドKotlinへの入門 Ktor編
サーバサイドKotlinへの入門 Ktor編
虎の穴 開発室
 
NHNグループ合同勉強会 ライブドア片野
NHNグループ合同勉強会 ライブドア片野NHNグループ合同勉強会 ライブドア片野
NHNグループ合同勉強会 ライブドア片野
livedoor
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
Yahoo!デベロッパーネットワーク
 

Similar to アクセシブルなモーダルダイアログの作り方 #scripty05 (20)

Yahoo! JAPAN の Ambari 活用事例 #yjdsnight
Yahoo! JAPAN の Ambari 活用事例 #yjdsnightYahoo! JAPAN の Ambari 活用事例 #yjdsnight
Yahoo! JAPAN の Ambari 活用事例 #yjdsnight
 
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetup
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetupYahoo! JAPAN の Ambari 活用事例 #ambarimeetup
Yahoo! JAPAN の Ambari 活用事例 #ambarimeetup
 
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumiYahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
Yahoo! JAPANが考えるテクノロジーとITエンジニアの未来 #devsumi
 
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumiヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
ヤフオク!における機械学習 ~深層学習、分散表現~ #devsumi
 
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
リファクタリングHTML/CSS ~レガシー世界を超えて~ #scripty03
 
Keycloak拡張入門
Keycloak拡張入門Keycloak拡張入門
Keycloak拡張入門
 
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
Apache Pulsarの近況 & meetup 北京の参加報告 @PulsarMeetupJapan_20190904
 
Deno で始めるフロントエンド
Deno で始めるフロントエンドDeno で始めるフロントエンド
Deno で始めるフロントエンド
 
gumiにおける、海外支社とのAtlassian製品利用事例
gumiにおける、海外支社とのAtlassian製品利用事例gumiにおける、海外支社とのAtlassian製品利用事例
gumiにおける、海外支社とのAtlassian製品利用事例
 
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumiYahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
 
AWS Proton を使ってみた
AWS Proton を使ってみたAWS Proton を使ってみた
AWS Proton を使ってみた
 
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groongaMroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
 
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 
大規模システムScrum実践 効果と課題 #rsgt2015
大規模システムScrum実践 効果と課題 #rsgt2015大規模システムScrum実践 効果と課題 #rsgt2015
大規模システムScrum実践 効果と課題 #rsgt2015
 
ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3ヤフーの次世代パイプラインについて#yjdsw3
ヤフーの次世代パイプラインについて#yjdsw3
 
Bambooによる継続的デリバリー
Bambooによる継続的デリバリーBambooによる継続的デリバリー
Bambooによる継続的デリバリー
 
PHPコアから読み解くPHP5.5
PHPコアから読み解くPHP5.5PHPコアから読み解くPHP5.5
PHPコアから読み解くPHP5.5
 
サーバサイドKotlinへの入門 Ktor編
サーバサイドKotlinへの入門 Ktor編サーバサイドKotlinへの入門 Ktor編
サーバサイドKotlinへの入門 Ktor編
 
NHNグループ合同勉強会 ライブドア片野
NHNグループ合同勉強会 ライブドア片野NHNグループ合同勉強会 ライブドア片野
NHNグループ合同勉強会 ライブドア片野
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
 

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

ゼロから始める転移学習
ゼロから始める転移学習ゼロから始める転移学習
ゼロから始める転移学習
Yahoo!デベロッパーネットワーク
 
継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator
Yahoo!デベロッパーネットワーク
 
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるかヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
Yahoo!デベロッパーネットワーク
 
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッションオンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
Yahoo!デベロッパーネットワーク
 
LakeTahoe
LakeTahoeLakeTahoe
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
Yahoo!デベロッパーネットワーク
 
Persistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability FeaturePersistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability Feature
Yahoo!デベロッパーネットワーク
 
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
Yahoo!デベロッパーネットワーク
 
eコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtceコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtc
Yahoo!デベロッパーネットワーク
 
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtcヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo!デベロッパーネットワーク
 
ビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtcビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtc
Yahoo!デベロッパーネットワーク
 
サイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtcサイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtc
Yahoo!デベロッパーネットワーク
 
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtcヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
Yahoo!デベロッパーネットワーク
 
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtcYahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo!デベロッパーネットワーク
 
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
Yahoo!デベロッパーネットワーク
 
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtcPC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
Yahoo!デベロッパーネットワーク
 
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtcモブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
Yahoo!デベロッパーネットワーク
 
「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc
Yahoo!デベロッパーネットワーク
 
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
Yahoo!デベロッパーネットワーク
 

More from Yahoo!デベロッパーネットワーク (20)

ゼロから始める転移学習
ゼロから始める転移学習ゼロから始める転移学習
ゼロから始める転移学習
 
継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator継続的なモデルモニタリングを実現するKubernetes Operator
継続的なモデルモニタリングを実現するKubernetes Operator
 
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるかヤフーでは開発迅速性と品質のバランスをどう取ってるか
ヤフーでは開発迅速性と品質のバランスをどう取ってるか
 
オンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッションオンプレML基盤on Kubernetes パネルディスカッション
オンプレML基盤on Kubernetes パネルディスカッション
 
LakeTahoe
LakeTahoeLakeTahoe
LakeTahoe
 
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
オンプレML基盤on Kubernetes 〜Yahoo! JAPAN AIPF〜
 
Persistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability FeaturePersistent-memory-native Database High-availability Feature
Persistent-memory-native Database High-availability Feature
 
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
データの価値を最大化させるためのデザイン~データビジュアライゼーションの方法~ #devsumi 17-E-2
 
eコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtceコマースと実店舗の相互利益を目指したデザイン #yjtc
eコマースと実店舗の相互利益を目指したデザイン #yjtc
 
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtcヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
ヤフーを支えるセキュリティ ~サイバー攻撃を防ぐエンジニアの仕事とは~ #yjtc
 
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtcYahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
Yahoo! JAPANのIaaSを支えるKubernetesクラスタ、アップデート自動化への挑戦 #yjtc
 
ビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtcビッグデータから人々のムードを捉える #yjtc
ビッグデータから人々のムードを捉える #yjtc
 
サイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtcサイエンス領域におけるMLOpsの取り組み #yjtc
サイエンス領域におけるMLOpsの取り組み #yjtc
 
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtcヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
ヤフーのAIプラットフォーム紹介 ~AIテックカンパニーを支えるデータ基盤~ #yjtc
 
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtcYahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
Yahoo! JAPAN Tech Conference 2022 Day2 Keynote #yjtc
 
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
新技術を使った次世代の商品の見せ方 ~ヤフオク!のマルチビュー機能~ #yjtc
 
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtcPC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
PC版Yahoo!メールリニューアル ~サービスのUI/UX統合と改善プロセス~ #yjtc
 
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtcモブデザインによる多職種チームのコミュニケーション改善 #yjtc
モブデザインによる多職種チームのコミュニケーション改善 #yjtc
 
「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc「新しいおうち探し」のためのAIアシスト検索 #yjtc
「新しいおうち探し」のためのAIアシスト検索 #yjtc
 
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtcユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
ユーザーの地域を考慮した検索入力補助機能の改善の試み #yjtc
 

Recently uploaded

CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
Yuuitirou528 default
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
Matsushita Laboratory
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
Fukuoka Institute of Technology
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 

Recently uploaded (14)

CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料CS集会#13_なるほどわからん通信技術 発表資料
CS集会#13_なるほどわからん通信技術 発表資料
 
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
TaketoFujikawa_物語のコンセプトに基づく情報アクセス手法の基礎検討_JSAI2024
 
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdfFIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
 
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdfFIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
 
This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdfFIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdfFIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
 
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdfFIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
 
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
単腕マニピュレータによる 複数物体の同時組み立ての 基礎的考察 / Basic Approach to Robotic Assembly of Multi...
 
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 

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

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