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

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

例

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

Web Componentsとアクセシビリティ

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

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

56

Web Componentsのアクセシビリティ

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

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

57

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

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

58

アンケートのお願い

http://bit.ly/html5C201501

59