Bullet points (or unordered lists) can improve accessibility by adding structure to your web pages. However, you’ll need to use the best practices of WCAG (the Web Content Accessibility Guidelines) and avoid a few common implementation mistakes.
Below, we’ll explain how to use HTML lists effectively and accessibly. To discuss a specific web accessibility issue, send us a message to connect with an expert.
Bullet points provide a better experience by structuring your content
Most people “scan" content — they don’t read every word on the page. When you opened this blog, you probably read through the subheadings to decide whether you wanted to read further.
That’s because in most online situations, people want to find information quickly. Bullet points help content creators provide important info in a fast and intuitive way.
Lists can be particularly helpful for folks with disabilities in several ways:
- Providing Structure: Lists convey the information's structure and hierarchy in a way that visual styling alone cannot. Assistive technologies like screen readers can recognize and interpret <ul>, <ol>, and <li> tags.
- Improving Navigation: People who use keyboards or their voices to navigate the web can use lists as navigation landmarks. A well-structured list allows them to quickly jump between list items and sections of a page.
- Enhancing Comprehension: For people with cognitive disabilities and attention disorders, lists break down information into smaller, more manageable chunks. This improves readability and makes it easier to process the content.
- Providing More Control: Assistive technologies can be customized to interact with lists according to the user’s preferences.
These benefits only really work when lists are actual lists, so don’t use asterisks, emojis, or other “visual only" characters. Likewise, developers shouldn’t hide list content in <div> or <span> elements — structural HTML markup ensures that lists appear the same to screen readers and other assistive tech.
Related: Accessibility Tips: Using the DIV and SPAN Elements
How do screen readers present bullet points to users?
Screen readers are software that convert text to audio or braille. They’re commonly used by people with vision disabilities, so screen readers are frequently used for accessibility testing (it’s important to note that web accessibility isn’t just for people who are blind).
When encountering an ordered list, most screen readers will announce the number of items in the list. The screen reader will then begin reading the items in order. The exact output will vary depending on the user’s verbosity settings; learn how verbosity affects how screen readers present information.
So, for example, a screen reader might announce: “List. Five items.” That tells the user what to expect — and gives them the opportunity to skip past the list if they’re not interested in the content.
Related: Semantics and Screen Readers: Creating Better Content
Avoid common accessibility mistakes when using bullet points
While bullet points can be great for accessibility, poorly implemented lists can be frustrating to users. Here are a few tips to keep in mind when authoring your content:
- Use HTML tags to identify lists. Don’t use asterisks, emojis, or other “visual only" characters. Proper HTML markup ensures that they work with screen readers and other assistive tech. Read our tips for making HTML lists accessible.
- Each item on the list should be fairly concise. If you’re writing more than two or three sentences per item, consider using subheadings instead.
- Use the right type of list. Ordered (or numbered) lists should be used when presenting a series of steps, ranking items, or presenting information that needs to follow a certain order.
- Avoid lists with an excessive number of items. If a screen reader user hears, “List. 26 items,” they’ll probably skip the content — and while long lists are sometimes defensible, you could probably present that content in a better way.
Finally, remember that accessibility is about creating a better experience for all users. You’re creating better content by adding structure — and with appropriate HTML, you’ll ensure that your bullet points are informative, easy to understand, and accessible to everyone, including people who use assistive technologies.
To learn more about the best practices of digital accessibility, download AudioEye’s free guide: A Comprehensive Guide on Accessible Web Design.
