2015年1月25日に開催された「HTML5 Conference」での講演「Web Componentsのアクセシビリティ」で使用した資料です。

1. Web Componentsのア
クセシビリティ
2015年1月25日
株式会社ミツエーリンクス 黒澤剛志

2. 自己紹介：黒澤 剛志
顧客Webサイトの診断、コンサルティング
社内制作物のアクセシビリティチェック
アクセシビリティBlogの執筆
(http://www.mitsue.co.jp/knowledge/blog/a11y/)
2
黒澤 剛志
株式会社ミツエーリンクス
アクセシビリティエンジニア

3. 3
http://www.csun.edu/cod/conference/2015/sessions/index.php/public/presentations/view/161

4. Webアクセシビリティ
4

5. Webアクセシビリティとは
特定の環境に依存せず多くの環境からWebを
利用できる
5

6. 多様なデバイス
タッチスクリーン
キーボードがないデバイス
キーボードしかないデバイス
音声入出力
電子ペーパー
6

7. 一時的な制約
屋外で直射日光の下で使う場合（環境光）
音を出せない場合、音が聞こえない場合
けがや状況による制約
7

8. 支援技術
スクリーンリーダー
画面拡大、ズーム機能
ハイコントラストモード
8

9. Webアクセシビリティの3つのポイ
ント
セマンティクス
様々なデバイス・環境でのインタラクション
代替コンテンツ
9

10. セマンティクス
マシン（ブラウザーや支援技術）がセマン
ティクスを理解
ユーザーの環境に合わせて情報・機能を提供
10
コンテン
ツ
ブラウザー
ユーザー
ブラウザー 支援技術

11. Web Components
11

12. Web Componentsとは
ページの構成要素をコンポーネントに
コンポーネントを組み合わせてページを構成
コンポーネント単位でカプセル化
12

13. 13
https://www.polymer-project.org/docs/elements/paper-elements.html

14. 14
http://gaia-components.github.io/gaia-components/

15. Web Componentsとア
クセシビリティ
15

16. Web Componentsとアクセシビリ
ティ
コンポーネント…機能や意味を切り出し
• 制作者はユーザーに提供したい情報を知っている
• ユーザーにきちんと伝えることが重要
16

17. コンポーネントのアクセシビリティ
が高ければ
使うだけで一定のアクセシビリティを確保
コンポーネント利用時に頑張る必要がない
17

18. コンポーネントのアクセシビリティ
が低ければ
使うだけで全体の質が低下
コンポーネント利用時に頑張る余地がない
18

19. Web Componentsでは…
コンポーネントのアクセシビリティが重要
• アクセシビリティの高いコンポーネントを選ぶ
• アクセシビリティの高いコンポーネントを作る
19

20. Web Componentsのア
クセシビリティ
20

21. Web Componentsのアクセシビリ
ティ
アクセシビリティの基本は一緒
21

22. https://www.polymer-project.org/articles/accessible-web-components.html
22

23. キーボードだけでも使えるか？
代替コンテンツやセマンティクスは大丈夫か？
色だけに依存してないか？
動いたり点滅したりするものは止められるか？
（大意）
https://www.polymer-project.org/articles/accessible-web-components.html
23

24. Web Componentsのアクセシビリ
ティにおける技術的な特徴
セマンティクスの指定方法
24

25. 例
HTMＬネイティブ：<progress>
良くない例：<gaia-progress>
良い例：<paper-progress>
25

26. 視覚的に伝えてる情報は同じでも…
マシンがセマンティクスを読み取れる
• HTMLネイティブ
• 良い例
セマンティクスを読み取れない
• 良くない例
26

27. Web Componentsでセマンティクス
を指定
Custom Elements
Shadow DOM
27

28. Custom Elements
http://www.w3.org/TR/custom-elements/
28

29. Custom Elementsとは
既存要素の拡張
• <button is="xxx-yyy"></button>
• document.createElement("button", "xxx-yyy");
独自要素の定義
• <xxx-yyy></xxx-yyy>
• document.createElement("xxx-yyy");
29

30. Custom Elementsでセマンティクス
を指定
既存要素の拡張
• 既存要素のセマンティクスを継承
独自要素の定義
• Shadow DOM
30

31. 既存要素の拡張
セマンティクスは既存要素から継承される
基本的に開発者が何かを行う必要はない
<button is="xxx-yyy">
<button> セマンティクス：ボタン
セマンティクス：ボタン
31

32. 例：Google ChromeのDeveloper
Tools
<button is="text-button">
• セマンティクスはbutton要素のまま
32

33. 独自要素の定義
Shadow DOMを使う
33

34. Shadow DOM
http://www.w3.org/TR/shadow-dom/
34

35. Shadow DOMとは
ページのDOMツリーとは切り離された
要素独自のDOMツリー（Shadow Tree）
• element.createShadowRoot();
35

36. Shadow DOMの例
36
https://simon.html5.org/presentations/foms-2012/
動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org

37. Shadow DOMの合成ツリー
ページの内容：もともとのDOMとShadow
DOMを合成したツリー（合成ツリー）
37
http://www.w3.org/TR/shadow-dom

38. Shadow DOMのセマンティクス
ブラウザー：合成ツリーを知っている
ブラウザー：支援技術に合成ツリーのセマン
ティクスを提供
開発者：合成ツリーにセマンティクスを提供
38

39. 39
https://simon.html5.org/presentations/foms-2012/
動画部分: © Copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
Shadow DOMの例

40. Shadow DOMでセマンティクスを指
定
適切なHTML要素を使えるのであれば、その要
素を利用
適切なHTML要素が使えなければ、WAI-ARIA
で補足
40

41. 適切なHTML要素を使える場合
41

42. 適切なHTML要素が使えない場合
WAI-ARIAを利用
42

43. WAI-ARIA
43
http://momdo.github.io/wai-aria/

44. WAI-ARIAとは
WAI: Web Accessibility Initiative
• W3C WAIが標準化
ARIA: Accessible Rich Internet Applications
• Webアプリケーションをよりアクセシブルに
44

45. WAI-ARIAのセマンティクス
ロール：role属性
• 要素の種類
• ≒HTMLの要素型
ステート・プロパティ：aria-*属性
• 要素の状態や性質
• ≒HTMLの属性
45

46. 例：プログレスバー
ロール：
• progressbar
プロパティ：
• aria-valuemin：最小値
• aria-valuemax：最大値
• aria-valuenow：進捗を表す数値
• aria-valuetext：進捗を表すテキスト
46

47. http://momdo.github.io/wai-aria/roles#progressbar
47

48. 例：プログレスバー：マークアップ
48
<div role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"></div>

49. 例：プログレスバー：更新時
値が変わったとき
• aria-valuenowを更新
進捗率が不明な場合
• aria-valuenow属性を指定しない
49

50. 例：プログレスバー：更新したマー
クアップ
50
<div role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"></div>

51. 良い例
51

52. 良くない例
52

53. 良くない例を修正した例
53

54. 良くない例を修正した例
54
良くない例（修正済）：<gaia-progress>

55. まとめ
55

56. Web Componentsとアクセシビリ
ティ
コンポーネント単位でアクセシビリティを確
保しやすくなる可能性
アクセシビリティの品質を維持・管理しやす
くなる可能性
56

57. Web Componentsのアクセシビリ
ティ
本質的にはWeb Componentsを使わない場合
と同じ
Custom ElementsやShadow DOMを使用する
際は、セマンティクスをお忘れなく
57

58. Web Componentsのアクセシビリ
ティ？
Web Componentsでアクセシビリティ！
58

59. アンケートのお願い
http://bit.ly/html5C201501
59