web componentsのアクセシビリティ
TRANSCRIPT
Web Componentsのアクセシビリティ
2015年1月25日
株式会社ミツエーリンクス 黒澤剛志
自己紹介:黒澤剛志
顧客Webサイトの診断、コンサルティング
社内制作物のアクセシビリティチェック
アクセシビリティBlogの執筆(http://www.mitsue.co.jp/knowledge/blog/a11y/)
2
黒澤剛志
株式会社ミツエーリンクスアクセシビリティエンジニア
3http://www.csun.edu/cod/conference/2015/sessions/index.php/public/presentations/view/161
Webアクセシビリティ
4
Webアクセシビリティとは
特定の環境に依存せず多くの環境からWebを利用できる
5
多様なデバイス
タッチスクリーン
キーボードがないデバイス
キーボードしかないデバイス
音声入出力
電子ペーパー
6
一時的な制約
屋外で直射日光の下で使う場合(環境光)
音を出せない場合、音が聞こえない場合
けがや状況による制約
7
支援技術
スクリーンリーダー
画面拡大、ズーム機能
ハイコントラストモード
8
Webアクセシビリティの3つのポイント
セマンティクス
様々なデバイス・環境でのインタラクション
代替コンテンツ
9
セマンティクス
マシン(ブラウザーや支援技術)がセマンティクスを理解
ユーザーの環境に合わせて情報・機能を提供
10
コンテンツ
ブラウザー
ユーザー
ブラウザー 支援技術
Web Components
11
Web Componentsとは
ページの構成要素をコンポーネントに
コンポーネントを組み合わせてページを構成
コンポーネント単位でカプセル化
12
13https://www.polymer-project.org/docs/elements/paper-elements.html
14http://gaia-components.github.io/gaia-components/
Web Componentsとアクセシビリティ
15
Web Componentsとアクセシビリティ
コンポーネント…機能や意味を切り出し
•制作者はユーザーに提供したい情報を知っている
•ユーザーにきちんと伝えることが重要
16
コンポーネントのアクセシビリティが高ければ
使うだけで一定のアクセシビリティを確保
コンポーネント利用時に頑張る必要がない
17
コンポーネントのアクセシビリティが低ければ
使うだけで全体の質が低下
コンポーネント利用時に頑張る余地がない
18
Web Componentsでは…
コンポーネントのアクセシビリティが重要
•アクセシビリティの高いコンポーネントを選ぶ
•アクセシビリティの高いコンポーネントを作る
19
Web Componentsのアクセシビリティ
20
Web Componentsのアクセシビリティ
アクセシビリティの基本は一緒
21
https://www.polymer-project.org/articles/accessible-web-components.html 22
キーボードだけでも使えるか?代替コンテンツやセマンティクスは大丈夫か?色だけに依存してないか?動いたり点滅したりするものは止められるか?(大意)
https://www.polymer-project.org/articles/accessible-web-components.html 23
Web Componentsのアクセシビリティにおける技術的な特徴
セマンティクスの指定方法
24
例
HTMLネイティブ:<progress>
良くない例:<gaia-progress>
良い例:<paper-progress>
25
視覚的に伝えてる情報は同じでも…
マシンがセマンティクスを読み取れる
• HTMLネイティブ
•良い例
セマンティクスを読み取れない
•良くない例
26
Web Componentsでセマンティクスを指定
Custom Elements
Shadow DOM
27
Custom Elements
http://www.w3.org/TR/custom-elements/ 28
Custom Elementsとは
既存要素の拡張
• <button is="xxx-yyy"></button>
• document.createElement("button", "xxx-yyy");
独自要素の定義
• <xxx-yyy></xxx-yyy>
• document.createElement("xxx-yyy");
29
Custom Elementsでセマンティクスを指定
既存要素の拡張
•既存要素のセマンティクスを継承
独自要素の定義
• Shadow DOM
30
既存要素の拡張
セマンティクスは既存要素から継承される
基本的に開発者が何かを行う必要はない
<button is="xxx-yyy">
<button> セマンティクス:ボタン
セマンティクス:ボタン
31
例:Google ChromeのDeveloper
Tools
<button is="text-button">
•セマンティクスはbutton要素のまま
32
独自要素の定義
Shadow DOMを使う
33
Shadow DOM
http://www.w3.org/TR/shadow-dom/ 34
Shadow DOMとは
ページのDOMツリーとは切り離された要素独自のDOMツリー(Shadow Tree)
• element.createShadowRoot();
35
Shadow DOMの例
36https://simon.html5.org/presentations/foms-2012/
動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
Shadow DOMの合成ツリー
ページの内容:もともとのDOMとShadow
DOMを合成したツリー(合成ツリー)
37
http://www.w3.org/TR/shadow-dom
Shadow DOMのセマンティクス
ブラウザー:合成ツリーを知っている
ブラウザー:支援技術に合成ツリーのセマンティクスを提供
開発者:合成ツリーにセマンティクスを提供
38
39https://simon.html5.org/presentations/foms-2012/
動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
Shadow DOMの例
Shadow DOMでセマンティクスを指定
適切なHTML要素を使えるのであれば、その要素を利用
適切なHTML要素が使えなければ、WAI-ARIA
で補足
40
適切なHTML要素を使える場合
41
適切なHTML要素が使えない場合
WAI-ARIAを利用
42
WAI-ARIA
43http://momdo.github.io/wai-aria/
WAI-ARIAとは
WAI: Web Accessibility Initiative
• W3C WAIが標準化
ARIA: Accessible Rich Internet Applications
• Webアプリケーションをよりアクセシブルに
44
WAI-ARIAのセマンティクス
ロール:role属性
•要素の種類
• ≒HTMLの要素型
ステート・プロパティ:aria-*属性
•要素の状態や性質
• ≒HTMLの属性
45
例:プログレスバー
ロール:
• progressbar
プロパティ:
• aria-valuemin:最小値
• aria-valuemax:最大値
• aria-valuenow:進捗を表す数値
• aria-valuetext:進捗を表すテキスト
46
http://momdo.github.io/wai-aria/roles#progressbar 47
例:プログレスバー:マークアップ
48
<div role="progressbar"aria-valuemin="0"aria-valuemax="100"aria-valuenow="0"></div>
例:プログレスバー:更新時
値が変わったとき
• aria-valuenowを更新
進捗率が不明な場合
• aria-valuenow属性を指定しない
49
例:プログレスバー:更新したマークアップ
50
<div role="progressbar"aria-valuemin="0"aria-valuemax="100"aria-valuenow="50"></div>
良い例
51
良くない例
52
良くない例を修正した例
53
良くない例を修正した例
54
良くない例(修正済):<gaia-progress>
まとめ
55
Web Componentsとアクセシビリティ
コンポーネント単位でアクセシビリティを確保しやすくなる可能性
アクセシビリティの品質を維持・管理しやすくなる可能性
56
Web Componentsのアクセシビリティ
本質的にはWeb Componentsを使わない場合と同じ
Custom ElementsやShadow DOMを使用する際は、セマンティクスをお忘れなく
57
Web Componentsのアクセシビリティ?
Web Componentsでアクセシビリティ!
58
アンケートのお願い
http://bit.ly/html5C201501
59