Validation how to read examples of aria-describedby and aria-labelledby by NVDA of screen reader.
Question1 is the input element has the aria-describedby attribute related to the dt element has id. And Question2 is the input element has the aria-labelledby attribute related to the dt element has id.
The combination of version of the OS and the screen reader and the browser is as follows.
Windows7/NVDA2016.3jp/Firefox48.0.2.
The screen reader read by Japanese language. I translate it to English.
- Question1 - Please pick out the sweater that you like best.
-
- Question2 - What color do you like?
-
Results of validation Question1 and Question2
- Reading results of Question1
- "Pretty sweater radio botton not check Question1 - Please pick out the sweater that you like best. 3 of 1"
- "Cool sweater radio botton not check Question1 - Please pick out the sweater that you like best. 3 of 2"
- "Warm sweater radio botton not check Question1 - Please pick out the sweater that you like best. 3 of 3"
- Reading results of Question2
- "Question2 - What color do you like? radio botton not check 3 of 1"
- "Question2 - What color do you like? radio botton not check 3 of 2"
- "Question2 - What color do you like? radio botton not check 3 of 3"
Question1 is no problem, so NVDA read to label texts after texts of the dt element. But, Question1 is problem, so NVDA didn't read label text In the case I use aria-labelledby attribute as described above.