Why the table technique is not perfect for accessibility

You’ve heard us say that you should really steer clear of employing tables when coding bulleted lists. But why?

You may well or might not know that screen readers are increasing radically in popularity—275 million persons are predicted to use them by 2023. Your subscribers may be working with display viewers because they have a incapacity that involves it, or simply because they want to listen to what e-mail they have when 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, vs . generic

and tags. But when it arrives to semantic tags, a single sticking level for electronic mail developers is the bulleted or unordered list.

Display audience have trouble reading out email messages with tables. If a screen reader identifies a desk in your email’s code, it will read out loud as one particular. It will practically inform you about just about every and each individual row and column’s placement and content. This can be a little bit much for subscribers listening to your email messages, and it certainly would make it really hard for them to glean the supposed information. Let us search at this bulleted checklist:

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

That’s… not good, is it? When it will come to bulleted lists, quite a few builders resolve the visual concern by coding faux bulleted lists in tables. But if you realized people tables sounded like that, would you carry on to code your lists that way?

Unlike tables,

,
, and
1. tags are a lot easier for a display screen reader to fully grasp. When a monitor reader sees these tags in an email it’s reading out loud, it will read through this to your subscribers:
   • To start out a listing, it will tell you how lots of products there are in the list
   • It will explain the kind of bullet employed to denote just about every list merchandise, from the adhering to:
     • Unordered Lists: “bullet” for variety=”disc”, “white bullet” for kind=”circle”, “black square” for form=”square”
     • Purchased Lists: The affiliated alphanumeric character or Roman numeral (For example: “a”, “2”, “IV”)
   • To conclude a record, it will say “out of record”

   For case in point, here’s an obtainable bulleted listing, read by a display screen reader:

   That seems significantly better than listening to a whole bunch of rows and columns, doesn’t it? It’s significantly simpler to understand content material in lists when it’s go through out loud in the same way you would browse the list inside of your head, as if you ended up hunting at the electronic mail by itself.

   Completely ready to make your lists bulletproof?

   Enthusiastic to make your email’s bulleted record obtainable and want to make absolutely sure it renders effectively throughout email clients and gadgets? Using a device like Litmus Email Previews will aid you make certain your bullets in the e mail are bulletproof. In addition, our new accessibility checks in Litmus Take a look at assist you instantaneously see whether your emails follow essential accessibility most effective practices and get actionable suggestions on how you can make your e-mail extra inclusive.

   Initially posted on July 8, 2019, by Alice Li. Last up to date July 12, 2022.

   The Supreme Guideline to Email Accessibility This tutorial has the insights and phase-by-action assistance you need to compose, style and design, and code emails that can be appreciated by anyone—regardless of their capacity. Down load the ebook