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.
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.
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?
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.)
[Your CSS/accessibility issue here]