SlideShare a Scribd company logo
1 of 47
Download to read offline
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を誰もがどんな状況でも利用できること
Webがどう利用されるか限定しない
●
障害や年齢
– 支援技術
●
利用デバイス
●
ユーザーが置かれている状況
支援技術
●
スクリーン・リーダー
●
スイッチアクセス
●
画面拡大
●
音声操作
など
Android 6のアクセシビリティ(ユーザー補助)画面
支援技術
セマンティクスとWebアクセシビリティ
●
マシン(ブラウザーや支援技術)がセマンティクス
を理解
➔
ユーザーや状況に合わせて情報・機能を提供
Web
ブラウザー
ブラウザー
ユーザー
ユーザー
WAI-ARIA
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="menu"
role="menu" aria-labelledby="button">
<li role="menuitem">開く…</li>
</ul>
</div>
珍プレー好プレー
1. インタラクションを忘れてます
珍プレー
<span role="button"
onclick="…">ボタン</span>
問題
●
キーボードで操作できない
好プレー
<span role="button"
onclick="…"
tabindex="0"
onkeydown="...">ボタン</span>
WAI-ARIAの役割(再掲)
マシンに伝えられるセマンティクスを増やす
– HTMLでは表現できないセマンティクスを定義
– すでにHTMLで表現できるセマンティクスも定義
ARIAはセマンティクスを変えるだけで、表現やイン
タラクションは変えない
➔
表現、インタラクションは別に実装
clickイベントの挙動
●
button要素やa要素(href属性あり)
– マウスによるクリックで発生
– キーボードでEnterキーなどを押したときに発生
●
それ以外
– マウスによるクリックのみ発生
– キーボード操作は別途実装
WAI-ARIAの役割(再々掲)
マシンに伝えられるセマンティクスを増やす
– HTMLでは表現できないセマンティクスを定義
– すでにHTMLで表現できるセマンティクスも定義
➔
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要素やspan要素相当)として処理してよい
(Presentational Children)
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アプリ
ケーションをもっとアクセシブルに

More Related Content

What's hot

0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)
Motoho Jitsukawa
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
Yusuke Tamukai
 

What's hot (20)

アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
 
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
 
Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?Webアクセシビリティ なぜ?どうやって?
Webアクセシビリティ なぜ?どうやって?
 
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
Webアクセシビリティセミナー2:なぜ企業はWebアクセシビリティに取り組むのか?
 
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
受託開発の会社が自社サービスを開発・運営する中で見つけた自分たちにあったスタンス
 
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
受託の会社が自社サービスをやる中で取り組んだ開発・運用の工夫
 
Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向Web制作者が知っておきたいアクセシビリティ最新動向
Web制作者が知っておきたいアクセシビリティ最新動向
 
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
ウェブディレクションの基礎(第1回:設計編) 先生:高瀬 康次
 
0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)0からのディレクション講座設計編(140426開催)
0からのディレクション講座設計編(140426開催)
 
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
 
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のことこれだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
 
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
受託開発会社による「受託開発と自社サービス開発の両立」と新サービス「Board」ができるまで
 
お任せではなく一緒に作るUIデザイン - SaCSS Special24 福岡コラボ Special(SaCSS vol.106)
お任せではなく一緒に作るUIデザイン - SaCSS Special24  福岡コラボ Special(SaCSS vol.106)お任せではなく一緒に作るUIデザイン - SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
お任せではなく一緒に作るUIデザイン - SaCSS Special24 福岡コラボ Special(SaCSS vol.106)
 
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
 
受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで受託開発をやりながらboardを軌道に乗せるまで
受託開発をやりながらboardを軌道に乗せるまで
 
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
 
Webサイトの分析と改善の方法(前編) | ナイル株式会社
Webサイトの分析と改善の方法(前編) | ナイル株式会社Webサイトの分析と改善の方法(前編) | ナイル株式会社
Webサイトの分析と改善の方法(前編) | ナイル株式会社
 
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
受託開発脳から自社開発脳への切り替えの7つの壁 x スマホアプリCMS「Patto」
 
凡人のための論理設計アプローチ
凡人のための論理設計アプローチ凡人のための論理設計アプローチ
凡人のための論理設計アプローチ
 
受託開発の会社が自社サービスを立ち上げて軌道に乗せるまでの取り組み
受託開発の会社が自社サービスを立ち上げて軌道に乗せるまでの取り組み受託開発の会社が自社サービスを立ち上げて軌道に乗せるまでの取り組み
受託開発の会社が自社サービスを立ち上げて軌道に乗せるまでの取り組み
 

Similar to WAI-ARIA珍プレー好プレー

Similar to WAI-ARIA珍プレー好プレー (6)

中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
 
アジャイルマインドの重要性
アジャイルマインドの重要性アジャイルマインドの重要性
アジャイルマインドの重要性
 
ウェブマスターツールの使い方徹底講座
ウェブマスターツールの使い方徹底講座ウェブマスターツールの使い方徹底講座
ウェブマスターツールの使い方徹底講座
 
アジャイルマインドの重要性(長野)
アジャイルマインドの重要性(長野)アジャイルマインドの重要性(長野)
アジャイルマインドの重要性(長野)
 
Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革Webアクセシビリティ向上のためのマインドセット変革
Webアクセシビリティ向上のためのマインドセット変革
 
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
キヤノンのウェブサイトにおけるアクセシビリティへの取り組み(2013年12月10日版)
 

More from Mitsue-Links Co.,Ltd. Accessibility Department

More from Mitsue-Links Co.,Ltd. Accessibility Department (13)

WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
 
CSUN 2018 参加報告セミナー
CSUN 2018 参加報告セミナーCSUN 2018 参加報告セミナー
CSUN 2018 参加報告セミナー
 
Webと出版の融合で高まる情報アクセシビリティ向上への期待
Webと出版の融合で高まる情報アクセシビリティ向上への期待Webと出版の融合で高まる情報アクセシビリティ向上への期待
Webと出版の融合で高まる情報アクセシビリティ向上への期待
 
今さら聞けない!?Webアクセシビリティに取り組む理由
今さら聞けない!?Webアクセシビリティに取り組む理由今さら聞けない!?Webアクセシビリティに取り組む理由
今さら聞けない!?Webアクセシビリティに取り組む理由
 
アクセシビリティへの取り組みの歴史
アクセシビリティへの取り組みの歴史アクセシビリティへの取り組みの歴史
アクセシビリティへの取り組みの歴史
 
Webデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組みWebデザインにおけるアクセシビリティへの取組み
Webデザインにおけるアクセシビリティへの取組み
 
Accessible Graphics for High Pixel Density Era
Accessible Graphics for High Pixel Density EraAccessible Graphics for High Pixel Density Era
Accessible Graphics for High Pixel Density Era
 
「10年後のWeb」のために、今すべきこと
「10年後のWeb」のために、今すべきこと「10年後のWeb」のために、今すべきこと
「10年後のWeb」のために、今すべきこと
 
Web Componentsのアクセシビリティ
Web ComponentsのアクセシビリティWeb Componentsのアクセシビリティ
Web Componentsのアクセシビリティ
 
Mobile and Accessibility - A Japanese Perspective
Mobile and Accessibility - A Japanese PerspectiveMobile and Accessibility - A Japanese Perspective
Mobile and Accessibility - A Japanese Perspective
 
Webアクセシビリティ
WebアクセシビリティWebアクセシビリティ
Webアクセシビリティ
 
Webアクセシビリティ 基本のキ
Webアクセシビリティ 基本のキWebアクセシビリティ 基本のキ
Webアクセシビリティ 基本のキ
 
アクセシビリティを加速するWAI-ARIA
アクセシビリティを加速するWAI-ARIAアクセシビリティを加速するWAI-ARIA
アクセシビリティを加速するWAI-ARIA
 

WAI-ARIA珍プレー好プレー