Why the table method isn’t ideal for accessibility

You’ve heard us say that you should avoid using tables when coding bulleted lists. But why?

An estimated 7.3 million have a vision disability in the U.S. alone. Your subscribers might be using screen readers because they have a disability that requires it, or because they want to hear what emails they have while brushing their teeth in the morning.

When it comes to your email’s content hierarchy, we advocate for the use of semantic tags as much as possible—that is, meaningful and intentional use of

,

, and so on, versus generic

and tags. But when it comes to semantic tags, one sticking point for email developers is the bulleted or unordered list.

Screen readers have trouble reading out emails with tables. If a screen reader identifies a table in your email’s code, it will read out loud as one. It will literally tell you about each and every row and column’s position and content. This can be a bit much for subscribers listening to your emails, and it certainly makes it hard for them to glean the intended content.

Let’s look at this bulleted list:

Coded with tables, it would sound a little like this:

That’s… not great, is it? When it comes to bulleted lists, many developers solve the visual issue by coding faux bulleted lists in tables. But if you knew those tables sounded like that, would you continue to code your lists that way?

Unlike tables,

,
, and
1. tags are much easier for a screen reader to understand.

   When a screen reader sees these tags in an email it’s reading out loud, it will read this to your subscribers:

   • To begin a list, it will tell you how many items there are in the list.
   • It will describe the type of bullet used to denote each list item, from the following:
     • Unordered Lists: “bullet” for type=”disc”, “white bullet” for type=”circle”, “black square” for type=”square”
     • Ordered Lists: the associated alphanumeric character or Roman numeral (For example: “a”, “2”, “IV”)
   • To end a list, it will say “out of list”

   For example, here’s an accessible bulleted list, read by a screen reader:

   
   That sounds much better than hearing a whole bunch of rows and columns, doesn’t it? It’s much easier to understand content in lists when it’s read out loud in the same way you would read the list inside your head, as if you were looking at the email itself.

   How to make table lists accessible

   But what if you have to use lists in tables? Fear not: we’ve got a solution to make them more accessible.

   Let’s take a look at one of our recent emails. The following list is done with a table:

   

   We used images (the emojis) for bullets and gave them an ALT text of “bullet” so it says “bullet” before each item. We’ve also included aria-role="list" and aria-role="listitem" to add some context for screenreaders so it read it as a list.

   

   Here’s the code: