WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1の検証2で使わせてもらったAccessible jQuery-ui Components Demonstrationでは、PC-Talker7/Internet Explorer11の環境でキーボード操作が出来ないという不具合がありましたので、HeydonWorks | The works, workings and reckonings of HeydonのPractical ARIA Examples「Simple ARIA tab interface」を使用させていただき、それを Tabs | jQuery UI(Query UI - v1.12.1 - 2016-09-14 )と同じWAI-ARIAの記述になるよう改変したものとWAI-ARIAの記述パターンを変えたものがどのように読み上げられるのか16パターンの検証をしました。
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 Simple ARIA tab interfaceを使用させていただき Tabs | jQuery UIと同じWAI-ARIAの記述を付けたものに改変したタブ型 UI パターン1の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | タブ 展開 選択 「Section1」 タブ 折り畳み「Section2」 タブ 折り畳み「Section3」 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)見出しレベル3 Heading Section1 |
「Section1」の選択 タブで決定 「Section1」「Section1」 「Section2」の選択 タブで決定 「Section2」「Section2」 「Section3」の選択 タブで決定 「Section3」「Section3」 Heading Section 1 |
選択中の「Section1」 タブ 全3個中1個 拡大 「Section2」タブ 全3個中2個 隠されました 「Section3」タブ 全3個中3個 隠されました Heading Section1 |
「Section1」 タブ カンマ 選択済み 「Section2」タブ 「Section3」タブ Heading Section1 見出し3 2017年1月28日 aria-expanded属性を「展開されてます」「折りたたまれてます」と読み上げる様になりました。 |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | タブコントロール「Section1」タブ 展開 選択 1-3 折り畳み「Section2」タブ 展開 選択 2-3 折り畳み「Section3」タブ 展開 選択 3-3 (選択したタブに関連するタブパネル(表示されている)のコンテンツ内容)見出しレベル3 Heading Section1 |
続けて読み上げた場合と同じ結果 | タブメニュー部分は続けて読み上げた場合と同じ結果 Heading Section1 見出しレベル3 |
タブリストの中に3個のアイテムが表示されてます「Section1」 タブ カンマ 選択済み ダブルタップすると有効になります 「Section2」タブ ダブルタップすると有効になります 「Section3」タブ ダブルタップすると有効になります 「Section1」 タブパネル Heading Section1 見出し3 ダブルタップすると有効になります 2017年1月28日 aria-expanded属性を「展開されてます」「折りたたまれてます」と読み上げる様になりました。 |
検証1-1 検証1のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン1-1の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | タブメニュー部分はパターン1と同じ Heading Section 1 の文字入力 Heading Section 1 |
パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1と同じ (フォーカスモード、Tabキーで移動した場合)プロパティページ 「Section1」Heading Section1 見出しレベル3 |
続けて読み上げた場合と同じ結果 | パターン1と同じ | パターン1と同じ |
検証2 検証1のタブメニュー部分のrole属性が、li要素にrole="presentation"、a要素にrole="tab"の記述のタブ型 UI パターン2の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="presentation"、a要素にrole="tab"の記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させ、li要素に記述されていたaria-labelledby属性は削除しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | 「Section1」リンク「Section1」リンク 「Section2」リンク「Section2」リンク 「Section3」リンク「Section3」リンク タブパネル部分はパターン1と同じ |
パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | タブコントロール「Section1」タブ 展開 選択 1-3 「Section2」タブ 展開 選択 2-3 「Section3」タブ 展開 選択 3-3 タブパネル部分はパターン1と同じ |
「Section1」リンク「Section1」 「Section2」リンク「Section2」 「Section3」リンク「Section3」 タブパネル部分はパターン1と同じ |
パターン1と同じ | パターン1と同じ |
検証2-1 検証2のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン2-1の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="presentation"、a要素にrole="tab"の記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させ、li要素に記述されていたaria-labelledby属性は削除しています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | タブメニュー部分はパターン2と同じ タブパネル部分はパターン1-1と同じ |
パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン2と同じ タブパネル部分はパターン1-1と同じ |
タブニュー部分はパターン2と同じ タブパネル部分はパターン1-1と同じ |
パターン1と同じ | パターン1と同じ |
検証3 検証1のタブメニュー部分でa要素にrole="presentation"の記述がないタブ型 UI パターン3の場合
検証1と同じタブメニュー部分のa要素のrole="presentation"を削除し、li要素にrole="tab"のみの記述になっています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
検証3-1 検証3のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン3-1の場合
こちらのタブメニュー部分のrole属性は、パターン1のa要素のrole="presentation"を削除し、li要素にrole="tab"のみの記述になっています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン1-1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン-1-1と同じ | パターン1-1と同じ | パターン1と同じ | パターン1と同じ |
検証4 検証2のタブメニュー部分でli要素にrole="presentation"の記述がないタブ型 UI パターン4の場合
こちらのタブメニュー部分のrole属性は、パターン2のli要素のrole="presentation"を削除し、a要素にrole="tab"のみの記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させ、li要素に記述されていたaria-labelledby属性は削除しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2と同じ | 選択中の「Section1」 タブ 全1個中1個 拡大 「Section2」タブ 全1個中1個 隠されました 「Section3」タブ 全1個中1個 隠されました タブパネル部分はパターン1と同じ |
パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | タブコントロール「Section1」タブ 展開 選択 1-1 「Section2」タブ 展開 選択 1-1 「Section3」タブ 展開 選択 1-1 タブパネル部分はパターン1と同じ |
パターン2と同じ | タブメニュー部分は続けて読み上げるのと同じ タブパネル部分はパターン1と同じ |
パターン1と同じ |
検証4-1 検証4のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン4-1の場合
こちらのタブメニュー部分のrole属性は、パターン2のli要素のrole="presentation"を削除し、a要素にrole="tab"のみの記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させ、li要素に記述されていたaria-labelledby属性は削除しています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2-1と同じ | パターン4と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | タブメニュー部分はパターン4と同じ タブパネル部分はパターン1-1同じ |
パターン2-1と同じ | パターン4と同じ | パターン1と同じ |
検証5 検証1のaria-labelledby属性を削除し、a要素のidの値に関連付けられたaria-describedby属性をタブパネルに記述したタブ型 UI パターン5の場合
li要素とタブパネルに記述されているa要素のidの値に関連付けられたaria-labelledby属性を削除し、a要素のidの値に関連付けられたaria-describedby属性をタブパネルに記述しています。
こちらのタブメニュー部分のrole属性は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
検証5-1 検証5のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン5-1の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1-1と同じ | パターン1-1と同じ | パターン1と同じ | パターン1と同じ |
検証6 検証5のタブメニュー部分のrole属性が、li要素にrole="presentation"、a要素にrole="tab"の記述のタブ型 UI パターン6の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="presentation"、a要素にrole="tab"の記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン2と同じ | パターン2と同じ | パターン1と同じ | パターン1と同じ |
検証6-1 検証6のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン6-1の場合
こちらのタブメニュー部分のrole属性は、li要素にrole="presentation"、a要素にrole="tab"の記述になっています。
role="tab"をa要素に記述したので、aria-controls属性とaria-selected属性とaria-expanded属性もa要素に移動させています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2-1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン2-1と同じ | パターン2-1と同じ | パターン1と同じ | パターン1と同じ |
検証7 検証5のタブメニュー部分でa要素にrole="presentation"の記述がないタブ型 UI パターン7の場合
検証5と同じタブメニュー部分のa要素のrole="presentation"を削除し、li要素にrole="tab"のみの記述になっています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | タブ 展開 選択 リンク 「Section1」 タブ 折り畳み リンク「Section2」 タブ 折り畳み リンク「Section3」 タブパネル部分はパターン1と同じ |
パターン1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1と同じ | パターン1と同じ | パターン1と同じ | パターン1と同じ |
検証7-1 検証5のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン7-1の場合
検証5と同じタブメニュー部分のa要素のrole="presentation"を削除し、li要素にrole="tab"のみの記述になっています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン7と同じ | パターン1-1と同じ | パターン1と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン1-1と同じ | パターン1-1と同じ | パターン1と同じ | パターン1と同じ |
検証8 検証6のタブメニュー部分でli要素にrole="presentation"の記述がないタブ型 UI パターン8の場合
検証6と同じタブメニュー部分のli要素のrole="presentation"を削除し、a要素にrole="tab"のみの記述になっています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2と同じ | パターン4と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン4と同じ | パターン2と同じ | パターン4と同じ | パターン1と同じ |
検証8-1 検証8のタブパネルのh要素にtabindex="0"の記述を追記しているタブ型 UI パターン8-1の場合
検証6と同じタブメニュー部分のli要素のrole="presentation"を削除し、a要素にrole="tab"のみの記述になっています。
また、こちらのタブパネルのh要素にはtabindex="0"の記述を追記しています。
| 読み上げ方 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| 上から続けて読み上げた場合 | パターン1と同じ | パターン2-1と同じ | パターン4と同じ | パターン1と同じ |
| Tabと矢印キーで移動した或いはタップで読み上げた場合 | パターン4-1と同じ | パターン2-1と同じ | パターン4と同じ | パターン1と同じ |
すべての検証からの分析と考察
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1にも記載したとおり、PC-Talker以外のスクリーンリーダーでは、li要素にrole="tab"の場合もa要素にrole="tab"の場合も「タブ」と読み上げますが、日本でのスクリーンリーダーシェア率No1のPC-Talkerが「リンク」としか読み上げない事から検証1のli要素にrole="tab"の記述を採用した方が良いでしょう。
そして、li要素のaria-labelledby属性とa要素の role="presentation" が記述されていない検証7でも「リンク」としか読み上げられないという結果が出ました。a要素にrole="presentation"が記述されていない検証3、3-1では問題なかった読み上げが検証7、7-1で「リンク」と読み上げる事から、li要素にrole="tab" を記述しa要素の role="presentation" を削除する場合、li要素にaria-labelledby属性を記述する必要がある事がわかりました。
jQuery UI の開発者のかたが「仕様も大事だけれどスクリーンリーダーできちん検証しスクリーンリーダーユーザーが正確な情報を得られるよう開発する事を一番大事にしている。その上でこの記述にしているんです。」と言われていたように、 jQuery UI は 時間かけてきちんとした検証した結果を元に開発されているのが良くわかり頭が下がる思いでした。
また、WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1と同じくaria-selected属性とaria-expanded属性に対応しているスクリーンリーダーが2種以上あるという結果からこの2つの属性の記述は付けた方が良いでしょう。
続いて、こちらもWAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1と同じで、li要素に role="presentation" の記述がない場合の検証4、4-1と8、8-1でタブリストの個数と今 何個目のなのかを違う数で読み上げてしまうので、a要素に role="tab" の場合 li要素に role="presentation" を削除しないようにする必要があります。a要素に role="tab" の場合は、li要素に role="presentation" を記述するようにしましょう。
最後に、タブパネル部分についてですが TalkBackでパネル部分を「「Section1」 タブパネル」と読み上げますが、この内容を読み上げさせるにはタブパネル部分の上部をタップしないと読み上げません。この操作は視覚的に確認できる状態でないと難しいという事と通常 スクリーンリーダー利用者のかたは、フリックで次の要素へ移動して読み上げさせる事が多い事から他のスクリーンリーダーと同じようにスクリーンリーダーユーザーが「タブパネル」という情報を得る事は少ないと考えられます。(これはタブメニュー全体部分をタップした時に読み上げる「タブリストの中に3個のアイテムが表示されてます」も同様になります)
この事から、タブパネル部分に tabindex="0" を付けた場合とそうでない場合を比べるとどちらでも同じという結果と判断しました。ですが、タブパネル部分に tabindex="0" を記述しておくとPCの場合、Tabキーで選択したタブメニューの内容へすぐに移動出来る(情報が得やすい)のでタブパネル部分に tabindex="0" を記述する方が良いでしょう。
また、tabindex="0" をタブパネル部分のsection要素に記述するパターンも検証しまして、h要素にtabindex="0"を記述したパターンと同じ読み上げ結果だったのですが、Androidの環境でsection要素にフォーカス(タップ)が当たった後、次(続き)を続み上げない事がわかりました。ですので、タブパネル部分に記述する tabindex="0" は、コンテンツ内の一番初めの要素に記述するようにしましょう。
すべての検証を通し最終結論として、やはり検証1からa要素に記述されている role="presentation" を削除されており、li要素にaria-labelledby属性が記述されている検証3-1の記述を採用するのが現状ベストでしょう。
