Some accessibility issues can prevent some people from using your website. Others create minor annoyances — but they’re still worth addressing, especially if they don’t take much effort to fix. One great example: long entries in ordered and unordered lists.
At the Bureau of Internet Accessibility, we love lists. They’re a great way to break up long content, and they improve readability. In fact, we’ll be using a few lists in this article.
But when each list entry is a full paragraph, they’re less helpful, and they may be annoying for people who use screen readers to “scan" through content before deciding what to read. Generally, you should keep each list entry to one or two sentences.
Below, we’ll explain why long bullet points can be frustrating and provide some quick user experience (UX) tips.
How Long Bulleted Lists Can Affect Accessibility
Screen reader users often look for parts of a page that are more likely to contain important content, such as subheadings, hyperlinks, and lists. If you don’t use a screen reader, you probably do the same: Studies show that few internet users read every line of content, with most preferring to “scan" pages visually.
But if each list entry is extremely long, screen reader users must listen to every word before skipping to the next section (unless they manually skip the rest of the entry). They might wonder why you used a list in the first place.
The Web Content Accessibility Guidelines (WCAG) doesn’t prescribe a certain length for bulleted lists. However, the goal of digital accessibility is to provide a better experience for as many users as possible, not to fulfill WCAG requirements.
With that in mind, here are some quick tips — which we’ve formatted as a list, for obvious reasons:
- Try to keep each bullet point to two sentences. If you need to write more than two sentences, use subheadings instead.
- Use a consistent style. We prefer using periods at the end of each bullet point, since this approach may improve screen reader pronunciation.
- Look for opportunities to use lists. They’re generally great for accessibility, particularly if you’re writing longer articles (like this one).
Once again, long list entries aren’t a WCAG conformance issue, but concise bullet points will improve the user experience.
Related: 4 Often-Overlooked Accessibility Mistakes (And What To Do Instead)
Other Common Accessibility Issues When Using Lists
HTML lists aren’t especially complicated, but improper markup can make them less accessible.
One common issue: using incorrect semantic HTML to identify your lists. The <ol> tag is appropriate for ordered lists, while the <ul> tag is appropriate for unordered lists. The less common <dl> tag provides descriptions or definitions for grouped items (such as glossaries).
Here are some additional tips to keep in mind when writing markup:
- Don’t rely on visual appearance alone. In other words, don’t use CSS to format content as a list if you aren’t using HTML to identify the list.
- Use nested lists where appropriate. A nested list is a list within a list; foor more guidance, read: Tips for Making HTML Lists Accessible.
- WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) may be used for identifying lists, but in most cases, it’s better to use semantic HTML. For more guidance, read the ARIA: list role tutorial from MDN Web Docs.
If you follow these tips, you’ll write better, clearer content, which benefits all users, regardless of whether they use screen readers or other assistive technology (AT).
Related: It's About Trust: What an Accessible Web Experience Tells Users and Prospects
Breaking up longer content improves accessibility
When you break up longer articles with bullet points, images, and subheadings, you make your content more readable. Your articles will reach a wider audience, and you’ll keep readers engaged.
By actively considering the expectations of users with disabilities, you can find more ways to improve your UX. As we’ve discussed in other articles, following the best practices of accessibility enhances your website in dozens of ways — and many accessibility improvements are extremely easy to implement.
For more tips, download our free eBook: The Ultimate Guide to Web Accessibility. To test your website against WCAG 2.1 Level AA, get started with our free automated analysis.
