Validation result how to read the combination of the aria-labelledby attribute and the aria-describedby attribute by screen readers.
I verified on June 26, 2015. The combination of version of the OS and the screen reader and the browser is as follows.
- Windows7/NVDA2015.1jp/Firefox38.0.5
- Windows7/PC-Talker7/Internet Explorer11
- iOS 8.3/VoiceOver/Safari
- Android4.4.2/TalkBack4.2.0.8/S browser
The screen reader read by Japanese language. I translate it to English.
| Code of HTML | NVDA | PC-Talker | VoiceOver | TalkBack |
|---|---|---|---|---|
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ edit Auto Complete Please use numbers and letters. Blank line |
mail address※input of character | mail address※ Text field Please use numbers and letters. |
mail address Edit text Please use numbers and letters. |
| <label>mail address ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">Please use numbers and letters.</span> |
edit Auto Complete Please use numbers and letters. Blank line |
mail address※input of character | Please use numbers and letters. Text field |
edit text Please use numbers and letters. |
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" /> <span>Please use numbers and letters.</span> |
mail address※ edit Auto CompleteBlank line |
mail address※input of character | mail address※ Text field |
mail address edit text |
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-describedby="label--email description--email" /> <span id="description--email">Please use numbers and letters.</span> |
edit Auto Complete mail address※ Please use numbers and letters. Blank line |
mail address※input of character | mail address※ Please use numbers and letters. Text field |
edit text mail address Please use numbers and letters. |
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ Please use numbers and letters. edit Auto Complete Blank line |
mail address※input of character | mail address※ Please use numbers and letters. Text field |
mail address Please use numbers and letters. edit text |
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-describedby="description--email label--email" /> <span id="description--email">Please use numbers and letters.</span> |
edit Auto Complete Please use numbers and letters. mail address※ Blank line |
mail address※input of character | Please use numbers and letters. mail address※ Text field |
edit text Please use numbers and letters. mail address |
| <label id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="description--email label--email" /> <span id="description--email">Please use numbers and letters.</span> |
Please use numbers and letters. mail address※ edit Auto Complete Blank line |
mail address※input of character | Please use numbers and letters. mail address※ Text field |
Please use numbers and letters. mail address edit text |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ edit Auto Complete Please use numbers and letters. Blank line |
mail address※input of character | mail address※ Text field Please use numbers and letters. | mail address edit text Please use numbers and letters. |
| <label for="email">mail address ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ edit Auto Complete Please use numbers and letters. Blank line |
mail address※input of character | mail address※ Text field Please use numbers and letters. |
mail address edit text Please use numbers and letters. |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" /> <span>Please use numbers and letters.</span> |
mail address※ edit Auto Complete Blank line |
mail address※input of character | mail address※ Text field |
mail address edit text |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-describedby="label--email description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ edit Auto Complete mail address※ Please use numbers and letters. Blank line |
mail address※input of character | mail address※ Text field mail address※ Please use numbers and letters. |
mail address edit text mail address Please use numbers and letters. |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email description--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ Please use numbers and letters. edit Auto Complete Blank line |
mail address※input of character | mail address※ Text field |
mail address Please use numbers and letters. edit text |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-describedby="description--email label--email" /> <span id="description--email">Please use numbers and letters.</span> |
mail address※ edit Auto Complete Please use numbers and letters. mail address※ Blank line |
mail address※input of character | mail address※ Text field Please use numbers and letters. mail address※ |
mail address edit text Please use numbers and letters. mail address |
| <label for="email" id="label--email">mail address ※</label> <input type="text" id="email" name="email" aria-labelledby="description--email label--email" /> <span id="description--email">Please use numbers and letters.</span> |
Please use numbers and letters. mail address※ edit Auto Complete Blank line |
mail address※input of character | mail address※ Text field |
Please use numbers and letters. mail address edit text |
