List
Critical - WCAG Level A
The issue at hand is the improper structuring of lists in HTML, which can occur when developers fail to use the appropriate list elements such as <ul> (unordered list), <ol> (ordered list), and <li> (list item). When lists are not structured correctly, screen readers and other assistive technologies may struggle to convey the information accurately, leading to confusion for users who rely on these tools.
For users with disabilities, particularly those who are blind or have low vision, the correct use of lists is crucial. Screen readers announce lists in a specific way, allowing users to understand the context and hierarchy of the information presented. If lists are improperly structured, users may miss important relationships between items or be unable to navigate the content effectively.
To fix this issue:
Identify the content that should be presented as a list. This could be items that are related or sequential.
Wrap the list items in the appropriate list element:
Use <ul> for unordered lists (bulleted).
Use <ol> for ordered lists (numbered).
Ensure that each item in the list is wrapped in an <li> tag.
Best Practices:
Always use semantic HTML elements for lists to maintain accessibility.
Avoid using <div> or <span> tags to create lists, as this removes semantic meaning.
Use ARIA roles only when necessary; proper HTML elements are preferred for conveying structure.
Common Mistakes:
Mixing <ul> and <ol> elements incorrectly or nesting them without proper structure.
Forgetting to include <li> tags for list items, which can lead to confusion for assistive technologies.