Our courses require accessibility for learners who use screen reading software. When creating a list of nested sub-bullets, we've found that sub-bullets are not identified by NVDA or JAWS, but are instead read as top-level bullets. I've searched the discussion forums for a solution, but all I've found are suggestions to indent the sub-bullets. This simulates sub-bullets from a visual standpoint, but it remains confusing for users who rely on accessibility software.
Is there are a way to create actual sub-bullets in a list, rather than just simulated sub-bullets?
I'm sorry you've hit this snag with the sub-bullets not being identified by screen readers; I'm happy to help!
As an initial troubleshooting step, please upgrade your project text and see if it helps. Upgrading allows your project to use the latest text-rendering technology and support multiple accessibility features, such as accessible text and semantic formatting.
If the issue persists, would you be willing to share a copy of your Storyline file here or privately through a support case so we can look at it? We'll delete it when we're done testing. Kindly mention the NVDA and JAWS version you're using as well. Thank you!
Hi, Eric. Thanks for your reply. I've attached two files, each containing the same nested lists. One is a Storyline file, and the other is an HTML file. Although the content and layout is identical, the screen reader announces them differently.
Here is a transcript of how NVDA announces each page, with differences noted in bold.
HTML Version
"Each team will have one chance to score."
"List with four items:"
"Bullet: The blue team goes first."
"Bullet: The red team goes second."
"List with one item:"
"White bullet: All players must be on the field."
"Out of list."
"Bullet: The green team goes third."
"Out of list."
"When all teams have attempted to score, the game ends."
Storyline Version
"Each team will have one chance to score." "List with three items:" "Bullet: The blue team goes first." "Bullet: The red team goes second." "List with one item:" "Bullet: All players must be on the field." "Out of list." "Bullet: The green team goes third." "Out of list." "When all teams have attempted to score, the game ends."
As the HTML version is coded according to W3 Web Accessibility Initiative guidelines, one assumes that is the correct structure and reading. I just need to figure out what's causing the inconsistency.
(Regarding my original comment: This issue was flagged for me by a JAWS user, who noted: "JAWS does not read the indented list as a nested list. Therefore, it appears that it is one long bullet list." I don't think that's what I'm seeing here with NVDA, but the two files are being read differently, at least. I don't have access to JAWS, but a colleague who does is going to review these two test files next week, and I can report back with those results if you like.)
Thank you for your detailed reply with the HTML file and Storyline project! I looked into it, and I'd like to share my findings. The w3.orgcode structure for nested lists shows that the sub-bullets should be nested within one of the bullets. The sub-bullet's beginning and closing tags (<ul> ... </ul>) should be within its enclosing bullet's beginning and closing tags (<li> ... </li>)
I opened the HTML file you shared in Google Chrome and inspected it to see the code structure. The supposed sub-bullet (<ul> ... </ul>) is not treated as such because the closing tag of the bullet above does not enclose it, and therefore is not treated as a sub-bullet. This explains why the screen reader reads 4 same-level items instead of just 3, with a sub-bullet.
I published the Storyline project to Review 360 and viewed it in Google Chrome. The inspect element shows the correct w3.org structure; there are 3 items (bullets) and one sub-bullet nested within the second item, which the screen reader correctly announces.
This is reflected in my tests as well using NVDA Version 2023.3.0.29780 with the transcript below:
Each team will have one chance to score. list with 3 items •The blue team goes first. •The red team goes second. list with 1 item •All players must be on the field. out of list •The green team goes third. out of list When all teams have attempted to score, the game ends.
Please let me know the findings of your colleague as well, and how they are expecting the screen readers to announce the sub-bullets so we can investigate further as needed.
Thank you for this comprehensive investigation. I've sent a revised version of our course to my colleague who uses JAWS, and will report back if there are any inconsistencies.
4 Replies
Hello Paul!
I'm sorry you've hit this snag with the sub-bullets not being identified by screen readers; I'm happy to help!
As an initial troubleshooting step, please upgrade your project text and see if it helps. Upgrading allows your project to use the latest text-rendering technology and support multiple accessibility features, such as accessible text and semantic formatting.
If the issue persists, would you be willing to share a copy of your Storyline file here or privately through a support case so we can look at it? We'll delete it when we're done testing. Kindly mention the NVDA and JAWS version you're using as well. Thank you!
Hi, Eric. Thanks for your reply. I've attached two files, each containing the same nested lists. One is a Storyline file, and the other is an HTML file. Although the content and layout is identical, the screen reader announces them differently.
Here is a transcript of how NVDA announces each page, with differences noted in bold.
HTML Version
Storyline Version
"List with three items:"
"Bullet: The blue team goes first."
"Bullet: The red team goes second."
"List with one item:"
"Bullet: All players must be on the field."
"Out of list."
"Bullet: The green team goes third."
"Out of list."
"When all teams have attempted to score, the game ends."
Hello Paul!
Thank you for your detailed reply with the HTML file and Storyline project! I looked into it, and I'd like to share my findings. The w3.org code structure for nested lists shows that the sub-bullets should be nested within one of the bullets. The sub-bullet's beginning and closing tags (<ul> ... </ul>) should be within its enclosing bullet's beginning and closing tags (<li> ... </li>)
I opened the HTML file you shared in Google Chrome and inspected it to see the code structure. The supposed sub-bullet (<ul> ... </ul>) is not treated as such because the closing tag of the bullet above does not enclose it, and therefore is not treated as a sub-bullet. This explains why the screen reader reads 4 same-level items instead of just 3, with a sub-bullet.
I published the Storyline project to Review 360 and viewed it in Google Chrome. The inspect element shows the correct w3.org structure; there are 3 items (bullets) and one sub-bullet nested within the second item, which the screen reader correctly announces.
This is reflected in my tests as well using NVDA Version 2023.3.0.29780 with the transcript below:
Please let me know the findings of your colleague as well, and how they are expecting the screen readers to announce the sub-bullets so we can investigate further as needed.
Thank you for this comprehensive investigation. I've sent a revised version of our course to my colleague who uses JAWS, and will report back if there are any inconsistencies.
Thanks again!