I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

CSS and accessibility

I am likely going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article snippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track.

Today’s topic is CSS and accessibility. I want to warn people for common accessibility pitfalls, but on the other hand want to do it in a sneaky, underhand way. In order to do so I need a list of common problems.

No chapter

I have decided that the book will not have a “CSS and accessibility” chapter because I suspect the people who need it most will skip it. Accessibility is “not realistic,” after all, and complicated, and nobody who’s blind visits our site anyway etc. You know the score.

Instead, my plan is to kind-of weave accessibility issues throughout the book, and treat them together with the technique they relate to. I am even going to try to avoid the word “accessibility” altogether, though I’m not yet certain I’ll succeed.

A list

When in doubt, make a list. What I’m currently looking for is a list of CSS/accessibiklity tips and tricks that will solve the most common 80% of the problems. That’s where you come in.

I am not certain if I’m going to treat ARIA. I have the feeling that if your HTML and CSS are structured correctly you don’t need any ARIA in 90% of the cases (but please correct me if I’m wrong). So complicated ARIA use cases fall outside the scope of this list.

With all that in mind, please give me your simple, easy-to-implement CSS and accessibility tips and tricks. I’ll add them to the list below, and I’ll write them into the book in a sneaky, underhand way. (I have no clue how that will actually work in practice, but it’s worth a try.)

The master CSS/accessibility list

The book is going to treat these topics:

• Accessibility problems with changing the order of flex and grid boxes; what happens when source order is not visual order? (auto-flow: dense for grid; see also http://adrianroselli.com/2019/04/reading-order-bookmarklet.html for reading order bookmarklet)
• Lack of contrast and how to solve it.
• The position: absolute; left: -9999px class of solutions. (I am assuming these are safe as long as you apply them to the correct bits of content.)
• Keyboard focus and :focus, :focus-within etc.
• If it’s a button or a link, make it a button or a link. (Strictly speaking this is an HTML trick. But I’ll likely be able to squeeze it in somewhere.)
• https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
• Consequences of display: none; element taken out entirely.
• Reduced motion, high-contrast, and similar media queries. (OK if they’re browser-specific)
• How display: content can remove semantics http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
• CSS symbol fonts or other icons may be read aloud (this may be beyond the scope of the book, since I won't treat fonts)
• Difference between display: none, visibility: hidden, and opacity: 0.
• Viewport height MQs (personally I'm not sure they're that great because of serious mobile issues with toolbars)
• Prevent outline: none; we need those dotted outlines!
• CSS-only disclosures such as dropdowns; usually not keyboard accessible
• Sometimes JavaScript is more accessible than CSS. (Need practical examples; https://gomakethings.com/i-was-wrong-about-javascript-free-dropdowns/)
• Modals. (Is this truly a CSS issue? Currently I see it more as a design issue.)
• [Your CSS/accessibility issue here]