| テストした日 | 2018/10/10〜12 |
|---|---|
| スクリーンリーダ |
PC-Talker10 (ver.1.21 + Internet Explorer11) NetReader2 (ver.2.27 PC-Talker10併用) NVDA (ver.2018.3.2jp + Firefox ver.62.0.3) VoiceOver (iOS 12.01 + Safari) |
| 備考 |
|
<a href="#">
<img src="menulist_blue.gif" alt="マーカー">
<img src="logo_umenu.png" alt="ユーメニュー">
</a>| NVDA (タブ移動) | 「マーカー画像ユーメニューリンク」 |
|---|---|
| NVDA(行読み) | 「リンク画像マーカー画像ユーメニュー」 |
| PC-Talker | 「マーカー、ユーメニュー、リンク、マーカー」 中身を読み上げた後、本文読み上げの声音で一つ目の画像のaltを読み上げる。 |
| NetReader | 「ユーメニュー、リンク」 最後の画像のみを表示・読み上げ。 |
| VoiceOver | 「マーカーユーメニュー、リンク」 画像であることを読み上げない。 |
<a href="/"><img src="menulist_blue.gif" alt="マーカー">こちら</a>| NVDA（タブ移動） | マーカー画像こちらリンク |
|---|---|
| NVDA（行読み） | リンク画像マーカーこちら リンクであることを先に読み上げる。 |
| PC-Talker | マーカー、こちら、リンク |
| NetReader | こちら、リンク 後ろのテキストのみ読み上げ。ただし、テキスト+画像の順番にすると、両方読み上げられる。 |
| VoiceOver | マーカーこちら、リンク |
<a href="/">*</a>
<a href="/">▶︎</a>
<a href="/">㊙️</a>
<a href="/">🔻</a>
| NVDA | アスタリスク、リンク 三角ケイ、リンク マル秘、リンク 三角、リンク |
|---|---|
| PC-Talker および NetReader |
アスタリスク、リンク 右黒三角、リンク マル秘、リンク リンク |
| VoiceOver | 米印、リンク メディアの再生マーク、リンク マル秘、リンク 赤い下向き三角、リンク |
本文テキスト
本文テキスト
<a href="#" aria-label="リンクラベル">
<h4>見出し</h4>
<p>本文テキスト<br>本文テキスト</p>
</a>
| PC-Talker | 「リンクラベル見出し本文テキスト本文テキスト、リンク」 |
|---|---|
| NetReader | aria-labelを解釈しない |
| NVDA | 「リンクラベルリンク」 タブでも行読みでも同じ。文字読みでも中を読まない |
| NVDA(IE10) | 「リンクラベルリンク」 タブでも行読みでも同じ。文字読みでも中を読まない |
| VoiceOver | aria-labelledbyを解釈しない |
本文テキスト
本文テキスト
<a href="#" aria-labelledby="heading1">
<h4 id="heading1">見出し</h4>
<p>本文テキスト<br>本文テキスト</p>
</a>
| PC-Talker | 「見出しリンク」 行読みでもリンクをaria-labelledbyの値でひとかたまりとして読む。ただし、文字読みをすると中のテキストを読む。 |
|---|---|
| NetReader | aria-labelledbyを解釈しない。 |
| NVDA | 「見出し、リンク」 タブでも行読みでもPC-Talkerと同じ。ただしこちらでは文字読みをしても中は読めない。 |
| NVDA(IE10) | aria-labelledbyを解釈しない。 |
| VoiceOver | 「見出し、本文テキスト、本文テキスト、リンク」 aria-labelledbyを解釈しない |
「メッセージボタン」を押すと下のdiv要素内に「春・夏・秋・冬」を順に表示
メッセージボタン<a href="javascript:void(0)" role="button" id="bttn1" onclick="msg()">メッセージボタン</a>
<div id="msg1" class="msg" aria-live="assertive"> </div>
| NVDA | 「メッセージボタン、（押下）春、（押下）夏...」 |
|---|---|
| PC-Talker | 「メッセージボタン、（押下）春 、（押下）夏 ...」 |
| NetReader | 「メッセージボタン、リンク、イベント、（押下）」 テキスト画面では状態の変化を読み上げない。※グラフィック画面を並用すると利用可能（読み上げは上記PC-Talker参照） |
| VoiceOver | 「メッセージボタン、（押下）メッセー..春、（押下）メッセー..夏、...」 押下するたびにボタン名称を読み上げるが、aria-liveが適用された要素内が更新されるとそちらを優先して読み上げる。 |
| NetReader | 画像とテキストが含まれる場合、その順序により振る舞いが変わり、画像+テキストはテキストのみ、テキスト＋画像はテキストも画像も読み上げる。 また、おなじURLのリンクが連続している場合、全てが画像の場合は最後のリンクのみ読み上げ。テキストリンクは省略されない。テキストと画像の前後関係でも読み上げが変わり、画像を前に置いた時のみ省略される。想像だけど、バナーと文字列で重複した複数のリンクを想定しているのかもしれない。ふるまいとしては上の複数の要素で構成されるリンクと条件は同じ。 ブロック要素をaで囲んだ場合、h1と本文はひとかたまりで読み上げられるが、画像は読まれない。 figureを囲んだ場合、これも順序で変化し、img+figcaptionはfigcaptionのみ読み上げるが、figcaption+imgの場合は両方読み上げる。※figure単体の場合は順序に限らずaltとfigcaption両方。 |
|---|
テスト
