The Ultimate Guide to Bullet Points in HTML Email


Example bulleted lists, using an image bullet

Why the table strategy isn’t excellent for accessibility

You have read us say that you really should steer clear of utilizing tables when coding bulleted lists. But why?

You might or might not know that display screen viewers are mounting radically in popularity—275 million men and women are predicted to use them by 2023. Your subscribers may well be employing display screen viewers since they have a disability that requires it, or since they want to listen to what e-mail they have though brushing their tooth in the early morning.

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

,

, and so on, versus generic

and tags. But when it arrives to semantic tags, one particular sticking stage for e mail builders is the bulleted or unordered record.

Display audience have problems reading through out e-mail with tables. If a screen reader identifies a desk in your email’s code, it will read out loud as just one. It will actually convey to you about every single and each individual row and column’s placement and articles. This can be a bit considerably for subscribers listening to your e-mail, and it definitely tends to make it hard for them to glean the intended information. Let us glimpse at this bulleted record:

Example of bulleted lists, listing out fruits

Coded with tables, it would audio a very little like this:

That’s… not wonderful, is it? When it comes to bulleted lists, several builders solve the visual situation by coding fake bulleted lists in tables. But if you realized these tables sounded like that, would you keep on to code your lists that way?

Not like tables,

    ,

      , and

    1. tags are a great deal simpler for a screen reader to realize. When a display screen reader sees these tags in an email it is reading through out loud, it will go through this to your subscribers:

      • To get started a listing, it will tell you how many items there are in the record
      • It will describe the sort of bullet employed to denote just about every list product, from the pursuing:
        • Unordered Lists: “bullet” for variety=”disc”, white bullet” for form=”circle”, “black square” for sort=”square”
        • Ordered Lists: The involved alphanumeric character or Roman numeral (For instance: “a”, “2”, “IV”)
      • To close a listing, it will say “out of checklist

      For instance, here’s an obtainable bulleted record, go through by a display screen reader:

      That appears considerably far better than hearing a total bunch of rows and columns, doesn’t it? It is considerably much easier to have an understanding of articles in lists when it’s read out loud in the same way you would browse the checklist inside of your head, as if you were searching at the email alone.

      Ready to make your lists bulletproof?

      Inspired to make your email’s bulleted checklist available and want to make confident it renders effectively throughout email purchasers and gadgets? Utilizing a instrument like Litmus E-mail Previews will assist you assure your bullets in the email are bulletproof. Furthermore, our new accessibility checks in Litmus Check enable you promptly see regardless of whether your e-mail observe key accessibility ideal practices and get actionable tips on how you can make your e-mail much more inclusive.

      At first printed on July 8, 2019, by Alice Li. Past up-to-date July 12, 2022.

      front cover of Litmus' Trends in Email Design and Marketing ebook

      Traits in E mail: Style and Promoting

      Down load our most up-to-date guide to get a snapshot of the most up-to-date trends in style and marketing and advertising to assistance hold your email plan fresh—and subscribers engaged.

      See the trends



Source connection