The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
The official book of California Stylesheets
(and that's okay)
It's a book about writing CSS.
And not writing CSS.
Learning to keep your markup simple will do more for the accessibility of your projects than learning the various specs for accessibility.
If you really want to drive this lesson home, download a screen reader and use it. Turn off your screen and use your website.
That’s your website. As much as looking at it is, or reading through the source. Listening to your website gives you the entire experience of some of your users. Granted, they’ll be better at using the screen reader than you are, but this is an important experience to have for any web developer.
The second but often overlooked point of accessibility and markup is changing it. If you have an established user base of sufficient size, you’re going to have users using screen readers. Changing the markup of the page can throw these users off, even if the visuals of the page don’t change much. To many of your users, the layout of the document is the layout of the site.
If you need to change the look of a page, focus on the CSS. Keep the markup the same. This is one of the reasons CSS is the disposable thing and markup is the sacred thing.
If downloading and using a screen reader seems like too much work, you’ll love this next trick: Stand back.
That’s right. Stand up and move away from your screen. You’ve just roughly replicated the vision problems of a whole bunch of your users. Try to read the different parts (especially color background pages) of your site at a distance. The problems with text contrast will be much more obvious.
The last thing to look at that’s just too easy to make excuses for? Color blindness.
Finnish men will endure just about any terrible conditions thrown at them and never complain. About 1 out of every 100 internet users is a Finnish man, and about half of them are color blind. Have you ever even received one angry Finnish email about it? No, you haven’t, even though you never optimized your site with the Finns in mind. I made the numbers in this paragraph up, but they’re close enough to true to keep it in mind. Do it for Finland.
There are a whole bunch of browser plugins which let you simulate various types of color blindness. There are desktop and mobile programs too. Look at your project or assets using these tools.
It’s fine if some things are lost for your color-blind users. It’s almost unavoidable. But the site or app needs to functionally work for all your users. Don’t let anything important depend on color difference.
Matching a color’s perceptual brightness to another’s makes for a good visual design.
Mis-matching a color’s perceptual brightness to another’s makes for a color-blind-friendly design.
So the sites with better visual designs are usually paradoxically worse for color-blind users.
Unsurprisingly, this point is hard to rectify in professional web development, especially on teams of people with strong opinions. It’s better to just not talk about it.
CASS goes for the better visual design strategy everywhere it can. But at the same time it offers composable color modifiers-- light, bright, dark and dim-- to distinguish colors further. The very and hella adverbs let you make the modifiers even more intense.
This setup allows you to use language to distinguish color levels in a way that any sighted user can see. The thing that really needs to be contrastful is the text, and CASS always maximizes for contrast there.
The Gumroad version contains a secret chapter that spills the dirt on CSS preprocessors, a tech CASS no longer uses.
