Web Componentsのアクセシビリティ

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


コンポーネント…機能や意味を切り出し

•制作者はユーザーに提供したい情報を知っている

•ユーザーにきちんと伝えることが重要

16

コンポーネントのアクセシビリティが高ければ

使うだけで一定のアクセシビリティを確保

コンポーネント利用時に頑張る必要がない

17

コンポーネントのアクセシビリティが低ければ

使うだけで全体の質が低下

コンポーネント利用時に頑張る余地がない

18

Web Componentsでは…

コンポーネントのアクセシビリティが重要

•アクセシビリティの高いコンポーネントを選ぶ

•アクセシビリティの高いコンポーネントを作る

19


20


アクセシビリティの基本は一緒

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

例

HTMＬネイティブ：<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


コンポーネント単位でアクセシビリティを確保しやすくなる可能性

アクセシビリティの品質を維持・管理しやすくなる可能性

56


本質的にはWeb Componentsを使わない場合と同じ

Custom ElementsやShadow DOMを使用する際は、セマンティクスをお忘れなく

57

Web Componentsのアクセシビリティ？

Web Componentsでアクセシビリティ！

58

アンケートのお願い

http://bit.ly/html5C201501

59