本文へ


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

| 印刷用ページ