Web Componentsを試してみた

2014年7月16日に、@addyosmaniさんが下記のようにつぶやかれていました。

ちょうど読みかけていた「フロントエンドエンジニア養成読本」に「Web Components入門」の項があり、x-youtubeコンポーネントの作成例が掲載されていたので、さっそくコーディング。Chrome 36で開いたところ、chrome:://flagsにアクセスして設定を変更したりすることなしにYouTube動画が表示されました。すごい! x-youtubeコンポーネントでYouTube動画をページに埋め込んだ様子

今日になってふと思ったのが、キーボードで操作したりスクリーンリーダで読み上げられたりするのかなというアクセシビリティの側面。早速実験してみました。

まずキーボード操作ですが、問題なく再生ボタン等のコントロールにフォーカスして操作する事ができました。

そしてスクリーンリーダーですが、いつものようにVMware Fusion上のWindows 7にインストールしてあるNVDAでアクセスしてみたところ、こちらも問題なく再生ボタン等のコントロールが読み上げられました。Shadow Rootでカプセル化された内部のコンテンツもきちんと読み上げられる事が分かり、これまたすごいなと思いました。

読み上げている様子を録音してみたので、よろしければお聞きください。YouTubeのエリアをTabキーで順にフォーカスしていきました。

海外の記事「Accessibility and the Shadow DOM | Substantial」に、次のような一節を見つけました(ブックマークだけして全然読めていない...)。

Web Components, including Shadow DOM, are accessible because assistive technologies encounter pages as rendered, meaning the entire document is read as "one happy tree".

Web Componentsについてはまだ深く追えていないので詳しい事が書けないのですが、ひとまずここ数日で学んだ事をレポートするということで。