aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果
2015年6月26日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。
- Windows7/NVDA2015.1jp/Firefox38.0.5
- Windows7/PC-Talker7/Internet Explorer11
- iOS 8.3/VoiceOver/Safari
- Android4.4.2/TalkBack4.2.0.8/Sブラウザ
| HTMLの記述 | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド 半角英数で入力してください。 |
メールアドレス エディットテキスト 半角英数で入力してください。 |
| <label>メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> |
エディット オートコンプリート 半角英数で入力してください。 空行 |
メールアドレス※の文字入力 | 半角英数で入力してください。 テキストフィールド |
エディットテキスト 半角英数で入力してください。 |
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" /> <span>半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド |
メールアドレス エディットテキスト |
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="label--email description--email" /> <span id="description--email">半角英数で入力してください。</span> |
エディット オートコンプリート メールアドレス※ 半角英数で入力してください 。空行 |
メールアドレス※の文字入力 | メールアドレス※ 半角英数で入力してください。 テキストフィールド |
エディットテキスト メールアドレス 半角英数で入力してください。 |
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ 半角英数で入力してください。 エディット オートコンプリート 空行 |
メールアドレス※の文字入力 | メールアドレス※ 半角英数で入力してください。 テキストフィールド |
メールアドレス 半角英数で入力してください。 エディットテキスト |
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email label--email" /> <span id="description--email">半角英数で入力してください。</span> |
エディット オートコンプリート 半角英数で入力してください。 メールアドレス※ 空行 |
メールアドレス※の文字入力 | 半角英数で入力してください。 メールアドレス※ テキストフィールド |
エディットテキスト 半角英数で入力してください。 メールアドレス |
| <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="description--email label--email" /> <span id="description--email">半角英数で入力してください。</span> |
半角英数で入力してください。 メールアドレス※ エディット オートコンプリート 空行 |
メールアドレス※の文字入力 | 半角英数で入力してください。 メールアドレス※ テキストフィールド |
半角英数で入力してください。 メールアドレス エディットテキスト |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド 半角英数で入力してください。 | メールアドレス エディットテキスト 半角英数で入力してください。 |
| <label for="email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド 半角英数で入力してください。 |
メールアドレス エディットテキスト 半角英数で入力してください。 |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" /> <span>半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド |
メールアドレス エディットテキスト |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="label--email description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート メールアドレス※ 半角英数で入力してください。 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド メールアドレス※ 半角英数で入力してください。 |
メールアドレス エディットテキスト メールアドレス 半角英数で入力してください。 |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email description--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ 半角英数で入力してください。 エディット オートコンプリート 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド |
メールアドレス 半角英数で入力してください。 エディットテキスト |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email label--email" /> <span id="description--email">半角英数で入力してください。</span> |
メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 メールアドレス※ 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド 半角英数で入力してください。 メールアドレス※ |
メールアドレス エディットテキスト 半角英数で入力してください。 メールアドレス |
| <label for="email" id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="description--email label--email" /> <span id="description--email">半角英数で入力してください。</span> |
半角英数で入力してください。 メールアドレス※ エディット オートコンプリート 空行 |
メールアドレス※の文字入力 | メールアドレス※ テキストフィールド |
半角英数で入力してください。 メールアドレス エディットテキスト |
