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