top of page
  • Writer's pictureBrent Payne

The Incorrect Use of List Item (<li>) Elements

In today's digital age, ensuring your website is accessible to all users, including those with disabilities, is not just good practice—it's essential. One common issue that hinders accessibility is the incorrect use of list item (`<li>`) elements. Here's a breakdown of why this matters, how to correct it, and where to find more resources.


Why This Issue Matters:

Lists are a fundamental part of web content, used to group related items. Proper structure—using `<ul>` (unordered) or `<ol>` (ordered) elements to wrap `<li>` (list item) elements—is crucial. This structure allows screen readers to recognize and effectively communicate the list to users with visual impairments, informing them of both the list's presence and its size. Without this correct structure, the usability of your website can significantly decrease for a large portion of your audience.


How to Fix the Problem:

Correcting this issue is straightforward:

- Ensure that every `<li>` element is nested within a `<ul>` or `<ol>` tag.

- Remember, `<ul>` is for unordered lists (where the order of items doesn't matter), and `<ol>` is for ordered lists (where the sequence is important).


Examples:

- Bad: Directly placing `<li>` elements in your HTML.


<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>


- Good: Wrapping `<li>` elements with a `<ul>` or `<ol>` tag.


<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>


Further Resources:

To dive deeper into making your web content accessible and mastering the art of semantic HTML structures, we recommend these resources:

- Deque University offers comprehensive courses on accessibility practices Start Learning

- Join the conversation and contribute to the `axe-core` project on GitHub to stay on the cutting edge of web accessibility Contribute to axe-core

- For practical guidelines on using lists accessibly, refer to W3C Techniques for WCAG 2.0, H48


By understanding the importance of correctly structuring lists and implementing these best practices, you can significantly enhance the accessibility of your website. Making the web more accessible is a collective effort, and by paying attention to these details, we contribute to a more inclusive digital world.

9 views

Recent Posts

See All

ClubReq Gets A Link (Because They Asked)

I am a mentor for Techstars and have been for over 10 years. In those ten years I have mentioned to startups to ask ANYONE and everyone that they meet to link to their site. Yet, in all those times on

Comments


bottom of page