Component Library
Lists
Issue Description
Content appears ordered in a list visually, but does not announce correctly as a list of items to assistive technology.
- Nested list items are not coded with proper list structure, causing assistive technology to announce incorrectly.
- When focus moves to a radio button option, the option text announces with JAWS the letter, dot, and option text without pause or break between each element, making it difficult to differentiate the letter option from the option text.
- When selecting an option from a list of radio buttons, the entire list is announced instead of the list option.
Recommendation
All visual information and relationships should properly marked and clear in the code. This includes lists with a visual relationships. Any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the <list> and <listitem> containers respectively. A <list> must have one or more <listitem> children, or, alternatively, have one or more groups as children, with each <group> having one or more <listitem>s as children.
- Only use ARIA <role="list"> and <role="listitem"> if, for example, you don't have control over your HTML but are able to improve accessibility dynamically after the fact with JavaScript.
- For lists or options that have separate option text, such as radio buttons in an assessment, ensure that assistive technology announces each option number or letter clearly with option text (e.g. the "dot" after each list or option item should not be announced as content).