Listitem
Critical - WCAG Level A
The issue with list items (<li>) not being used semantically arises when these elements are placed outside of a proper list container, such as <ul>, <ol>, or <menu>. This misuse disrupts the semantic structure of the document, making it difficult for assistive technologies like screen readers to interpret the content correctly. For users relying on these technologies, improperly structured lists can lead to confusion and a poor user experience, as the logical grouping and order of items are not conveyed.
To fix this issue:
Ensure that every <li> element is a direct child of a <ul>, <ol>, or <menu> element.
This maintains the semantic integrity of the list, allowing screen readers to announce the list structure and the number of items correctly.
Best practices:
Use <ul> for unordered lists where the order of items is not important, <ol> for ordered lists where sequence matters, and <menu> for a list of commands or options.
Avoid using CSS to visually format non-list elements to appear as lists, as this does not provide the necessary semantic information.
Common mistakes to avoid:
Placing <li> elements directly inside <div> or <span> elements without a parent <ul>, <ol>, or <menu>.
Ensure that list containers are not used for layout purposes, which can confuse users of assistive technologies.
By adhering to these guidelines, you ensure that your web content is accessible and provides a better experience for all users.