< Back to Demos | Learn more at PaulJAdam.com >

Lists

Bug report for VoiceOver not speaking list item numbers and letters when there are internal paragraph tags: https://bugs.webkit.org/show_bug.cgi?id=177150.

Lists with progresbars but not using paragraph elements and using span for text so that VoiceOver iOS and macOS speak the list prefix numbers and letters.

VoiceOver iOS likes aria-label better than aria-valuetext because it won't read the aria-valuenow attribute if -valuetext is present, with aria-label iOS VO will read both values.

1. This is the first question in a list of questions?
1. This is the first answer in a list of the first questions answers.
   60%
   
   13%
2. This is the second answer in a list of the first questions answers.
   60%
   
   13%
3. This is the third answer in a list of the first questions answers.
   60%
   
   13%
4. This is the fourth answer in a list of the first questions answers.
2. This is the second question in a list of questions?
1. This is the first answer in a list of the second questions answers.
2. This is the second answer in a list of the second questions answers.
3. This is the third answer in a list of the second questions answers.
4. This is the fourth answer in a list of the second questions answers.

Bad Example - Paragraph tags break list numbers and letters speaking to VoiceOver

1. This is the first question in a list of questions?

1. This is the first answer in a list of the first questions answers.

   
   60%
   
   13%

2. This is the second answer in a list of the first questions answers.

   
   60%
   
   13%

3. This is the third answer in a list of the first questions answers.

   
   60%
   
   13%

4. This is the fourth answer in a list of the first questions answers.

2. This is the second question in a list of questions?

1. This is the first answer in a list of the second questions answers.

2. This is the second answer in a list of the second questions answers.

3. This is the third answer in a list of the second questions answers.

4. This is the fourth answer in a list of the second questions answers.

role=presentation on paragraphs Example - fixes the VoiceOver bug also

1. This is the first question in a list of questions?

1. This is the first answer in a list of the first questions answers.

   
   60%
   
   13%

2. This is the second answer in a list of the first questions answers.

   
   60%
   
   13%

3. This is the third answer in a list of the first questions answers.

   
   60%
   
   13%

4. This is the fourth answer in a list of the first questions answers.

2. This is the second question in a list of questions?

1. This is the first answer in a list of the second questions answers.

2. This is the second answer in a list of the second questions answers.

3. This is the third answer in a list of the second questions answers.

4. This is the fourth answer in a list of the second questions answers.