Want to make the websites you design more accessible?
(Think twice if you answer that with a “no:” inclusion is totally in these days!)
Last year, one of my clients expressed the desire to improve her accessibility design skills, but explained that she found the WCAG a little overwhelming. I don’t blame her: the WCAG has lots of dense content and it’s not written with designers in mind.
Ain’t nobody got time for that!
To be honest, designing accessible websites isn’t rocket science, but you wouldn’t know that by looking at the guidelines. Unless you can decode their geek-speak, you probably feel more confused than ever after clicking through them.
That’s where I come in. ?
There are a handful of important principles you should be following to make your websites WAY more accessible. I walk you through them below, translated into a language you should be able to understand.
7 principles of designing for accessibility on the web
Oh, and for your information: these principles are primarily for the actual design phase of the project, not for the development phase.
1. Ensure pages have a semantic structure
Hold up: don’t bail on me for using the word “semantic” here. ?
All this means is that you should make sure you’re using HTML elements as they were intended to be used instead of using them solely based on their visual appearance.
If you’re handing your projects off to a developer, make sure you aren’t strictly dictating what styles each heading (ie: h1, h2, etc) should have, or you may force them to violate this accessibility principle. Of course, sending some default styles over to them is fine, but realize that to keep the structure of a particular page meaningful for screen reader users, your developer may have to deviate from those on occasion.
For more: https://webaim.org/techniques/semanticstructure/
2. Don’t depend on only color to convey meaning or differentiate an element
This is one principle I see violated a lot when it comes to links in body text. If a website user is color blind and the only way you style links is with a different color, he or she might not be able to tell there’s a link in the text at all!
This isn’t to say that you can’t use color as one of the differentiators for an element like a link, but make sure you apply another style to it to ensure users with color-related visual impairments can still use your site.
For more: https://webaim.org/articles/visual/colorblind
3. Don’t use text inside an image, use live type
This means using actual text on your webpages, not images of text made in Photoshop or the like. In today’s world of responsive websites, images of text are a user experience nightmare for many visitors (what looks easy-to-read on your desktop browser is often illegible on a mobile device), and visitors with visual impairments can’t always read text inside images either. Screen readers certainly can’t!
Don’t balk at this principle for styling purposes: developers can do a LOT with CSS these days! Just about any style you can create in an image editing program can be recreated with clever CSS rules.
That being said, sometimes text inside an image is considered “essential” by WCAG. This means that the same information cannot be conveyed by a regular text presentation as it can with a text inside image presentation (one example is a logotype).
In those “essential” cases, make sure you add an appropriate alt text attribute to the image in question so that screen readers can process it.
For more: https://www.w3.org/WAI/WCAG21/quickref/#images-of-text
4. Instructions don’t rely on visual location/description
An example of a violation of this principle would be saying something like “find the references in the sidebar to the left of the page.” Users with visual impairments wouldn’t really know where to find the sidebar to the left, so you can see how that might be problematic.
For more: https://www.w3.org/WAI/WCAG21/quickref/#sensory-characteristics
5. Appropriate contrast level between background and text
Regular text needs to have a contrast level of at least 4.5:1 (a measurement of contrast), while large text needs to have a contrast level of at least 3:1. It’s really difficult to manually assess this, so using a tool like the WebAIM contrast checker really helps. Of course, this principle helps users with visual impairments (but who still have some use of their eyes, so do not need a screen reader) access your site’s content.
For more: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum
6. Non-text content has an appropriate contrast level
Not only should plain text content meet minimum contrast levels, but non-text content (like images or graphics) should have a contrast measurement of at least 3:1 as well.
For more: https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast
7. Styling text for readability
The WCAG calls this principle “visual presentation.” This includes sufficient line height (at least half of the text height) and paragraph spacing (at least 1.5 times line height), as well as not justifying text and ensuring that lines of text don’t span more than 80 characters. I see the line length rule violated more often than any of the other aspects of this principle.
If followed, this principle makes text much easier to read for ALL users, not just those with impairments. Score!
For more: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=148#visual-presentation
Aaaaand…that’s pretty much it!
Everything else accessibility-related can (and should!) be handled by the project copywriter or your developer. Most of the “burden” falls on your developer to make sites as accessible as possible, but take it from me, starting with a design that takes accessibility principles into consideration makes the process a heck of a lot easier.
Further accessibility resources
Get Technically Speaking with Megan
Leave a Comment