WAI-ARIA珍プレー好プレー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WAI-ARIAの役割（再掲）
マシンに伝えられるセマンティクスを増やす
ARIAはセマンティクスを変えるだけで、表現やイン
タラクションは変...

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

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

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

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

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

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

2. 不思議な入れ子構造

珍プレー
<div role="button">
<span
onclick="">ファイル</span>
<ul role="menu">
<li role="menuitem">開く…</li>
</ul>
</div>
※ わかりやすさの...

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

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

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

好プレー
<div>
<span role="button"
onclick="">ファイル</span>
<ul role="menu">
<li role="menuitem">開く</li>
</ul>
</div>
※ わかりやすさのた...

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

好プレー #2
<div>
<button type="button"
onclick="">ファイル</button>
<ul role="menu">
<li role="menuitem">開く</li>
</ul>
</div>
※ わ...

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

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

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

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

Mitsue-Links Co.,Ltd. R&D Department Accessibility Team