Say NO to asterisks, dashes, and DIY numbering! They may look nice, visually but they do not work for readers with disabilities or that use screen readers. Instead, use the tools provided in your document or WYSIWYG editor to create beautiful and accessible lists for all of your users. Numbered or bulleted, ordered or unordered, it’s easy to do!
Today we’re going to talk about lists!
It’s really important when you format your lists that you use the built-in formatting tools available to you. When I talk about built-in formatting, I’m talking about bullets and numbering and using the menus and buttons available to you in your web editor or word processor. Some software, like Word or PowerPoint, tends to automatically correctly format your lists for you even if you use asterisks or dashes. Unfortunately, many other systems don’t.
Using the menu buttons and formatting options for your lists changes the underlying code to make your content accessible. Your code must be accessible for your content to be accessible. In coding terms, there are two types of lists: ordered (numbered) and unordered (bulleted). If you take a peek at your content’s HTML code, you’ll see OL for Ordered Lists and UL for Unordered Lists.
Ordered lists, or numbered lists, are used for things like a set of directions. For instance, here is an ordered list with instructions to go to the coffee shop:
- Turn right at Culver
- Turn left at Walnut
- You have arrived!
For the above list, I used the built-in number in my editor. If I didn’t use it, it would still look fine to a user with no visual disabilities, but it would read as regular text to someone using a screenreader, as if it were a plain paragraph. When the proper formatting is used, these lists become more browsable by users with screenreaders. Proper formatting allows these users to “read” the list by number and go back and forth between steps. Without the correct underlying code, this list would read straight through as if it were a paragraph and it wouldn’t be as usable.
Here’s an example of an unordered list, my groceries:
- Apples
- Steak
- Bagels
- Coffee
It’s “unordered” in that the order doesn’t matter – it’s just a list of things. But formatting it as a proper unordered list, again, allows all users to be able to scroll up and down in the list, rather than read it straight through.
While “ordered” and “unordered” might not matter much to you visually, knowing the difference will help you spot errors in the underlying code if you needed to.