WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1

2016年12月 1日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。

• Windows7/NVDA2016.3jp/Firefox48.0.2
• Windows7/PC-Talker7/Internet Explorer11
• iOS 9.3.5/VoiceOver/Safari
• Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124

検証1　Tabs | jQuery UIの場合

jQuery UI - v1.12.1 - 2016-09-14 が使われているこちらのタブメニュー部分は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。また、li要素にはタブパネルdiv要素のidの値に関連付けられたaria-controls属性とa要素のidの値に関連付けられたaria-labelledby属性とaria-selected属性とaria-expanded属性が付いており、タブパネルにはa要素のidの値に関連付けられたaria-labelledby属性とaria-hidden属性が付いています。

読み上げ方	NVDA	PC-Talker	VoiceOver	TalkBack
上から続けて読み上げた場合	クリック可能 タブ 展開 選択 「Nunc tincidunt」 タブ 折り畳み「Proin dolor」 タブ 折り畳み「Aenean lacinia」 (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo…	「Nunc tincidunt」の選択 タブで決定「Nunc tincidunt」 「Nunc tincidunt」 「Proin dolor」の選択 タブで決定「Proin dolor」 「Proin dolor」 「Aenean lacinia」の選択 タブで決定「Aenean lacinia」 「Aenean lacinia」 (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo…	選択中の「Nunc tincidunt」タブ 全3個中1個 拡大 「Proin dolor」タブ 全3個中2個 隠されました 「Aenean lacinia」タブ 全3個中3個 隠されました (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo…	「Nunc tincidunt」 タブ 選択済 「Proin dolor」タブ 「Aenean lacinia」タブ (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo…
Tabと矢印キーで移動した或いはタップで読み上げた場合	タブコントロール「Nunc tincidunt」タブ 展開 選択 1-3 「Proin dolor」タブ 折り畳み 選択 2-3 展開 「Aenean lacinia」タブ 折り畳み 選択 3-3 展開 (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo…	続けて読み上げた場合と同じ結果	続けて読み上げた場合と同じ結果	タブリストに3個のアイテムが表示されてます 「Nunc tincidunt」 タブ 選択済 ダブルタップすると有効になります 「Proin dolor」タブ ダブルタップすると有効になります 「Aenean lacinia」タブ ダブルタップすると有効になります 「Nunc tincidunt」 タブパネル

検証2　Accessible jQuery-ui Components Demonstrationの場合

jQuery UI - v1.9.0pre - 2012-05-31 に独自修正を加えられたと思われるこちらのタブメニュー部分は、li要素にrole="presentation"、a要素にrole="tab"の記述になっています。(このバージョンの元のjQuery UIではv1.12.1の記述と同じです)

また、a要素にはタブパネルdiv要素のidの値に関連付けられたaria-controls属性とaria-selected属性が付いており、タブパネルにはaria-hidden属性とaria-expanded属性とa要素のidと関連付けされているaria-labelledby属性が記述されています。

読み上げ方	NVDA	PC-Talker	VoiceOver	TalkBack
上から続けて読み上げた場合	タブ 選択「Dogs」 タブ「Cats」 タブ「Sheep」 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)見出しレベル2 Dogs…	「Dogs」 リンク 「Dogs」 リンク 「Cats」 リンク 「Cats」 リンク 「Sheep」 リンク 「Sheep」 リンク (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)Dogs…	選択中の「Dogs」 タブ 全3個中1個 「Cats」 タブ 全3個中2個 「Sheep」 タブ 全3個中3個 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)Dogs…	「Dogs」 タブ 選択済 「Cats」タブ 「Sheep」タブ Dogs 見出し2
Tabと矢印キーで移動した或いはタップで読み上げた場合	タブコントロール 「Dogs」 タブ 選択 1-3 「Cats」 タブ 選択 2-3 「Sheep」 タブ 選択 3-3 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)Dogs… (フォーカスモード・Tabキーで移動した場合)Dogs プロパティページ 展開 段落 More information about Dogs on Wikipedia…	「Dogs」リンク と読み上げるだけで矢印での移動が出来ない(次の項目を読み上げられない。この不具合はバージョンアップした jQuery UI では解消されています。) (タブメニューからTabキーで移動した場合)More information about Dogs on Wikipedia…	続けて読み上げた場合と同じ結果	タブリストに3個のアイテムが表示されてます 「Dogs」 タブ 選択済 ダブルタップすると有効になります 「Cats」タブ ダブルタップすると有効になります 「Sheep」タブ ダブルタップすると有効になります 「Dogs」タブパネル

検証1と検証2の結果からの分析と考察

li要素にrole="tab"、a要素にrole="presentation"の場合とli要素にrole="presentation"、a要素にrole="tab"の場合を検証した結果、PC-Talker以外のスクリーンリーダーでli要素にrole="tab"の場合もa要素にrole="tab"の場合も「タブ」 と読み上げました。ですが、現状 PC-Talkerは日本でのスクリーンリーダーシェア率No1ですので、検証したすべてのスクリーンリーダーともタブと読み上げるli要素にrole="tab"の記述を採用したほうが良いでしょう。

また、選択中のタブに aria-selected="true" と aria-expanded="true" 、選択されてないタブに aria-selected="false" と aria-expanded="false" を記述した場合、PC-Talker以外のスクリーンリーダーで 「選択」 と読み上げます。それに加えて、NVDAでは 「展開又は折り畳み」 、ViceOverでは 「拡大又は隠されました」 と読み上げる事から、aria-selected属性にはPC-Talker以外のスクリーンリーダーが対応しており、 aria-expanded属性にはNVDAとViceOverが対応しているという事になります。

状態を表すaria-selected属性とaria-expanded属性に対応しているスクリーンリーダーが2種以上あるという結果から、要素の状態を提供した方が良い場合どちらの属性とも記述する事を推奨します。

先ほど検証1の記述を使った方が良いと書きましたが、検証1のa要素にはrole="presentation"が記述してあります。ここで「a要素の役割をpresentationにして良いのか？」という疑問が湧いてきたので調べてみたところ、ARIA in HTMLには下記のように記載されていました。

href属性を持つa要素は、デフォルトの ARIA セマンティクスでrole="link"であり(これは明示的に定義するべきでない)使用可能なロールは、button, checkbox, menuitem, menuitemcheckbox, menuitemradio, radio, tab, switch or treeitem である。

上記から、a要素に role="presentation" は使用できないので、検証1のa要素にはrole="presentation"を記述しない方が良いという事になるのですが、そのように記述を変更しても読み上げ方に影響はないのか検証する必要性が出て来たので下記のように検証してみました。

検証3　Tabs | jQuery UIでa要素にrole="presentation"がない場合

検証1と同じタブメニュー部分のa要素のrole="presentation"を削除し、li要素にrole="tab"の記述のみのものを作成し検証しました。

読み上げ検証した結果、検証1と同じ結果 つまりa要素にrole="presentation"があってもなくても同じ読み上げ方だという事がわかりました。

検証4　Accessible jQuery-ui Components Demonstrationでli要素にrole="presentation"がない場合

検証2と同じタブメニュー部分のli要素のrole="presentation"を削除し、a要素にrole="tab"の記述のみのものを作成し検証しました。

読み上げ方	NVDA	PC-Talker	VoiceOver	TalkBack
上から続けて読み上げた場合	検証2と同じ(li要素にrole="presentation"がある場合と同じ結果)	「検証2と同じ(li要素にrole="presentation"がある場合と同じ結果)	選択中の「Dogs」 タブ 全1個中1個 「Cats」 タブ 全1個中1個 「Sheep」 タブ 全1個中1個 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)Dogs…	検証2と同じ(li要素にrole="presentation"がある場合と同じ結果)
Tabと矢印キーで移動した或いはタップで読み上げた場合	タブコントロール 「Dogs」 タブ 選択 1-1 「Cats」 タブ 選択 1-1 「Sheep」 タブ 選択 1-1 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)Dogs… (フォーカスモード、Tabキーで移動した場合)Dogs プロパティページ 展開 段落 More information about Dogs on Wikipedia…	検証2と同じ(li要素にrole="presentation"がある場合と同じ結果)	続けて読み上げた場合と同じ結果	検証2と同じ(li要素にrole="presentation"がある場合と同じ結果)

検証3と4からの分析と考察

まず、検証1のa要素のrole="presentation"を記述を削除しても読み上げ方に影響しないかどうかですが、上記を読んでお分かりのようにa要素にrole="presentation"があってもなくても同じ読み上げ方になるという結果から、a要素のrole="presentation"記述を削除した方が良いと考えました。

この事から、jQuery UI のTabs で a要素に付いてる role="presentation" は削除していただきたいと思いまして、修正してもらえるようプルリク送ってみたところマージはされなかったもののコミットはしていただけました。 Tabs: Remove presentation role ・ jquery/jquery-ui@b9ffc34 ・ GitHub
次のバージョンリリースの時にこの修正を取り込んでもらえれば嬉しいのですが…。

次に、li要素にrole="presentation"がある場合とない場合を検証した結果、NVDAとViceOverでli要素にrole="presentation"がない場合、タブリストの個数と今 何個目のなのかを違う数で読み上げてしまうという事から、検証2のa要素にrole="tab"の記述を使用する場合は、li要素にrole="presentation"を付ける必要があるという事がわかりました。

role="presentation" についてはThe Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0を読んで、「子要素にそれが持つ役割と違うrole属性を付けた必須の子要素を持つ親要素に role="presentation" を付けた場合、子要素にrole="presentation" は継承されるのか？」など注意点を含む仕様を理解した上で使うようにしましょう。

4パターンの検証をやり終えたのですか、検証2で使用させていただいたAccessible jQuery-ui Components Demonstrationでは、PC-Talker7/Internet Explorer11の環境でキーボード操作が出来ないという不具合がありましたので、続けて再検証を行いました。最終結論は、WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2に記載してますので合わせてお読みください。