Bullets Between Inline List Items — The Accessible Way!

Shared by
Published
Updated
Find your next web developer job
ServiceNow Web Developer at Deloitte (Dallas, TX)

Screen readers read pseudo elements, using bullets will cause them to read: “Pizza MIDDLE DOT Döner MIDDLE DOT Kaffee”. Not good. Let’s try to fix it

Screen readers read pseudo elements (::before and ::after) and using bullets in them will cause it to read something like “Pizza MIDDLE DOT Döner MIDDLE DOT Kaffee”. Not good. Let’s try to fix it.

The Wrong Way

ul {
  list-style: none;
}

li {
  display: inline;
}

li + li::before {
  content: " · ";
}
<ul>
  <li>Pizza <span aria-hidden="true"> · </span></li>
  <li>Döner <span aria-hidden="true"> · </span></li>
  <li>Kaffee</li>
</ul>

Though this method is simple, it’s not accessible. Screen readers will pronounce each bullet as a middle dot or something similar.

The Accessible Way

ul {
  list-style: none;
}

li {
  display: inline;
}

This solution works great for screen readers, but granted, keeping things like list bullets in the markup seems a little dirty. Using a text character as a bullet is really the only accessible solution.

Conclusion

Both solutions don’t look great on small screens when items can’t fit on a single line. This case is a good reminder for us to be more mindful about the accessibility of our sites and apps. We should do at least the basic accessibility testing and don’t always trust our intuition, like I did with this list, was wrong, and shipped inaccessible features to production.

Did you find Bullets Between Inline List Items — The Accessible Way! useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Bullets Between Inline List Items — The Accessible Way!' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.