2016年9月3日開催の「HTML5 Conference 2016」において、アクセシビリティ部 アクセシビリティ・エンジニアの黒澤 剛志が講演「WAI-ARIA珍プレー好プレー」で使用したスライドです。

1. WAI-ARIA珍プレー好プレー
株式会社ミツエーリンクス 黒澤剛志

2. 内容
●
Webアクセシビリティとは
●
WAI-ARIAとは
●
珍プレー好プレー
●
まとめ

3. 自己紹介
●
顧客Webサイトの診断、コンサルティング
●
アクセシビリティBlog
http://www.mitsue.co.jp/knowledge/blog/a11y/
黒澤剛志
株式会社ミツエーリンクス
アクセシビリティエンジニア

4. http://www.mitsue.co.jp/knowledge/blog/a11y/

5. Q. 皆さんはARIAについて
1.聞いたことがある
2.使っているが、何のためにやっているのかわからな
い
3.バリバリ使っている

6. Webアクセシビリティ

7. Webアクセシビリティ
Webを誰もがどんな状況でも利用できること

8. Webアクセシビリティ
自分が今ここでだけ使えれば良い
Webを誰もがどんな状況でも利用できること

9. Webがどう利用されるか限定しない
●
障害や年齢
– 支援技術
●
利用デバイス
●
ユーザーが置かれている状況

10. 支援技術
●
スクリーン・リーダー
●
スイッチアクセス
●
画面拡大
●
音声操作
など
Android 6のアクセシビリティ（ユーザー補助）画面

11. 支援技術
セマンティクスとWebアクセシビリティ
●
マシン（ブラウザーや支援技術）がセマンティクス
を理解
➔
ユーザーや状況に合わせて情報・機能を提供
Web
ブラウザー
ブラウザー
ユーザー
ユーザー

12. WAI-ARIA

13. WAI-ARIAとは
WAI：Web Accessibility Initiative
ARIA：Accessible Rich Internet Applications
➔
Webアプリケーションをよりアクセシブルに

14. https://www.w3.org/TR/2014/REC-wai-aria-20140320/

15. https://rawgit.com/w3c/aria/master/aria/aria.html

16. UIのアクセシビリティ
●
UIの表現（見た目など）やインタラクション
– CSSやJavaScriptで実装可能
●
UIのセマンティクス（種類や状態）
– HTMLに対応する要素や属性がなければ、セマンティ
クスを表現できない

17. 例：メニューボタン

18. ARIAが取り組む問題
●
視覚的な表現（見た目）がUIのセマンティクスを反
映していても、マシンがセマンティクスを理解しな
いければ、ユーザーに情報が伝わらない
支援技術
Web
ブラウザー
ブラウザー
ユーザー
ユーザー

19. ARIAの役割
マシンに伝えられるセマンティクスを追加定義
– HTMLでは表現できないセマンティクスを定義
– すでにHTMLで表現できるセマンティクスも定義
➔
マシンがUIのセマンティクスを理解し、ユーザーに
伝える
支援技術
Web
ブラウザー
ブラウザー
ユーザー
ユーザー

20. セマンティクスの表現方法
●
要素に専用の属性を追加指定
●
role属性：UIの種類（役割、ロール）
●
aria-*属性：UIのプロパティ

21. 例：メニューボタン（ARIAなし）
<div>
<button type="button" id="button">
ファイル</button>
<ul id="menu">
<li>開く…</li>
</ul>
</div>

22. 例：メニューボタン（ARIAあり）
<div>
<button type="button" id="button"
aria-haspopup="true" aria-controls="menu">
ファイル</button>
<ul id="menu"
role="menu" aria-labelledby="button">
<li role="menuitem">開く…</li>
</ul>
</div>

23. 珍プレー好プレー

24. 1. インタラクションを忘れてます

25. 珍プレー
<span role="button"
onclick="…">ボタン</span>

26. 問題
●
キーボードで操作できない

27. 好プレー
<span role="button"
onclick="…"
tabindex="0"
onkeydown="...">ボタン</span>

28. WAI-ARIAの役割（再掲）
マシンに伝えられるセマンティクスを増やす
– HTMLでは表現できないセマンティクスを定義
– すでにHTMLで表現できるセマンティクスも定義
ARIAはセマンティクスを変えるだけで、表現やイン
タラクションは変えない
➔
表現、インタラクションは別に実装

29. clickイベントの挙動
●
button要素やa要素（href属性あり）
– マウスによるクリックで発生
– キーボードでEnterキーなどを押したときに発生
●
それ以外
– マウスによるクリックのみ発生
– キーボード操作は別途実装

30. WAI-ARIAの役割（再々掲）
マシンに伝えられるセマンティクスを増やす
– HTMLでは表現できないセマンティクスを定義
– すでにHTMLで表現できるセマンティクスも定義
➔
HTMLで表現できるセマンティクスはARIAではな
くHTMLで表現

31. https://w3c.github.io/aria-in-html/

32. clickイベントの挙動（再掲）
●
button要素やa要素（href属性あり）
– マウスによるクリックで発生
– キーボードでEnterキーを押したときに発生
●
それ以外
– マウスによるクリックのみ発生
– キーボード操作は別途実装

33. 好プレー #2
<button type="button"
onclick="…">ボタン</button>

34. 珍プレーまとめ
●
UIの実装：
セマンティクス、表現、インタラクションをそろえて
実装
– 表現やインタラクションの実装も忘れずに
– ARIAを使わずHTMLを使ったほうが良い場面も

35. 2. 不思議な入れ子構造

36. 珍プレー
<div role="button">
<span
onclick="">ファイル</span>
<ul role="menu">
<li role="menuitem">開く…</li>
</ul>
</div>
※ わかりやすさのため、一部の属性を省略しています

37. 問題
●
ボタンの中にメニュー？？？
– 支援技術はボタンしか認識しない
●
ARIA仕様は、role="button"の子孫にメニューの
ような意味のあるコンテンツは来ないと想定
– role="button"の子孫は意味のないもの
（div要素やspan要素相当）として処理してよい
（Presentational Children）

38. https://rawgit.com/w3c/aria/master/aria/aria.html#childrenArePresentational

39. 珍プレーはこうみなされていた
<div role="button">
<span
onclick="">ファイル</span>
<div>
<div>開く…</div>
</div>
</div>

40. 好プレー
<div>
<span role="button"
onclick="">ファイル</span>
<ul role="menu">
<li role="menuitem">開く</li>
</ul>
</div>
※ わかりやすさのため、一部の属性を省略しています

41. 入れ子構造を自然に
●
ボタンの隣にメニューが来るように
role="button"の指定を変更

42. 好プレー #2
<div>
<button type="button"
onclick="">ファイル</button>
<ul role="menu">
<li role="menuitem">開く</li>
</ul>
</div>
※ わかりやすさのため、一部の属性を省略しています

43. 珍プレーがおこりがちな理由
●
ARIAは表現やインタラクションを変えない
– 表現やインタラクションに問題なければ、
入れ子構造の不自然さを見落としがち
●
ARIA仕様は入れ子構造に対する制約が緩い
– 入れ子構造が不自然でユーザーが操作できなくても、
仕様上問題ない場合が多い

44. 珍プレーを避けるために
●
意図しない入れ子構造を防ぐために、role属性は
できる限り末端の要素に指定
– UIをコンポーネント化し、組み合わせる場合は要注意
– ただし、意図的に入れ子構造を作る場合もあり
●
支援技術でテスト

45. 珍プレーまとめ
●
ARIAを使う際は入れ子構造に注意
●
UIをコンポーネント化し、組み合わせる場合は要注
意

46. まとめ

47. まとめ
●
UIの実装では、セマンティクス、表現、インタラク
ションをそろえて実装することが重要
●
ARIAを使えば、HTMLで表現できないUIのセマン
ティクスも表現可能
●
使い方に注意しつつ、ARIAを活用してWebアプリ
ケーションをもっとアクセシブルに