Sharings from Sara Soueidan's Practical Accessibility course

Written on and last modified on

As part of my CPD I have slowly been going through Sara Soueidan's Practical Accessibility course.

I've already learnt a bunch of things that I wasn't aware of, like if you add list-style: none to a list to override the bullets or numbers, it loses it's role as a list and becomes generic in Safari on MacOS (Bug 170179 - VoiceOver does not announce a list for groups of links when list-style: none;), except when it is inside a <nav> element.

Meme with a cartoon boy pointing to a butterfly with his mouth open. Text labels the boy as 'MacOS', the butterfly is labeled with CSS that removes the list style from lists, underneath it says 'Is this plain text?'
A meme made by my colleague

To resolve this, I am styling the content property the ::marker pseudo element instead of overriding the list-style property on <ul> and <ol> elements.

There is a limited set of CSS properties you can apply to markers, which you can read more about on the MDN web docs.

Edit 11/01/2024

A toot from Starbreaker highlighted that this wasn't going to be the end of it:

So, I've been experimenting with `::marker` based on a blog post by @frills. The idea is that you should set the content property in the `::marker` pseudo-element because it provides better accessibility than setting `list-style-type` to "none". Particularly, the latter breaks Apple's VoiceOver screen reader unless you're doing it inside a nav element.

Unfortunately, Safari still doesn't support content in ::marker, according to WebKit bug 204163 bugs.webkit.org/show_bug.cgi?i…

Stuff like this is why I keep paraphrasing Spaceballs at work. You try to set content in ::marker to support VoiceOver and Safari, but Safari doesn't implement that. Dammit.

@starbreaker@libranet.de

Annoyingly, as previously mentioned, changing the content property was my workaround method, but it seems I didn't review the compatability table thoroughly enough as that property is listed as not yet being supported by Safari. Bah!

So back to square one with finding a cross-browser compatible option. That was, until I came across a blog post!

Removing list styles without affecting semantics by Manuel Matuzović.

In essence, instead of touching the ::marker go straight to the source and overwrite the list-style-type value.

ul {
  list-style-type: "";
}

Manuel conducted a fair amount of testing with 6 different browser and screen reader pairings, all coming up rosy.

So there you have it. That took a turn I didn't expect, onwards with the main thing I actually wanted to share on this post... πŸ₯

BingO Bakery

Sara shares in one of the chapters of the course is this lovely video produced by Microsoft. It is styled as a cute 8bit game, demonstrating the need for headings, landmarks and tab usability by showing how Hope, the 8bit sprite, is able (or not able) to order a pre-made birthday cake quickly. It's cute, it's fun and it gets the point across. Give it a watch!

BingO Bakery: Headings, Landmarks, and Tabs by MSFTEnable