As our world increasingly moves online, we need to ensure that folks of different visual abilities can navigate our websites.
I’ll share 3 simple changes you can make today to significantly increase the visual accessibility of your website. The best part is that they also work for your newsletters, social media posts, and more!
Skip to the end for resources to test the accessibility of your own website.
Table of Contents
Let’s Look at the Numbers
Did you know that approximately 8% of all men worldwide have some form of red-green color blindness? That’s 1 in every 12 men! This trait is much less frequent in women at 0.5%, but that’s still 1 in 200 women. (Source: colourblindawareness.org).
According to the World Health Organization, a whopping 2.2 billion people worldwide (27% of the global population) have some form of near-far visual impairment that can impact the ease of reading. And an estimated 43 million (0.5%) live with blindness.
Making sure that your website is easy to read will help out a lot of people.
3 Impactful Changes for Visual Accessibility
1. Use High-Contrasting Colors for Text & Buttons
DO:
- Use dark text on a light background, or light text on a dark background.
- Make sure your background images aren’t so busy that any text is difficult to see.
- Highlight text or place background shapes to make text easier to read.
- Underline hyperlink text to make it easier to identify as a link.
DON’T:
- Use red and green as contrasting colors.
- Rely on color alone to communication something (e.g. black for a regular price and red for a discounted price).
- Use very tiny font.
Example of a “Good Button” with high contrast.
Example of a “Bad Button” with low contrast.
Example of a “Good Button”.
When your color contrast is medium-high, use large font to make the text easier to read.
2. Set Alt Text for Images
Alt text is a field that you can set for images in just about any digital software. The alt text provides a description of the image when a) using a screen reader on a webpage, and b) when an image fails to load due to security or poor connection.
DO:
- Write descriptive alt text that explains the purpose of an image.
- Include any text in the image within the alt text (not for infographics; see below).
DON’T:
- Provide alt text for purely decorative images, such as a page border.
- Write a full description of an infographic in the alt text. Instead, write the conclusion that the infographic is meant to communicate.
3. Use Descending Heading Levels
This tip is most helpful for folks who are using a screen reader. Using heading levels to structure your page helps the screen reader (and person using it) interpret the organization of information.
How This Works:
- “Heading 1” should only be used for the page title.
- “Heading 2” should be used for each sub-section of a page.
- “Heading 3” should only be used after Heading 2, not directly after Heading 1.
- “Heading 4” should only be used after Heading 3, etc…
It can be tempting to use heading levels in different orders for stylistic reasons. Try to resist the temptation and prioritize a user-friendly website.
Visual Accessibility Resources
WebAIM Color Contrast Checker
https://webaim.org/resources/contrastchecker/
The color contrast check provided by WebAIM (Accessibility In Mind) is your go-to tool for checking the color contrast of your text and backgrounds.
I highly recommend their bookmarklet tool so you can check the colors directly within a page.
Google PageSpeed Insights
Enter your website url to see recommendations from Google. Some of the recommendations and solutions are very technical, but many of the accessibility ones you can resolve on your own.
Don’t forget to view the results for both the desktop and mobile view! Your website may be accessible for one device type but not the other.
Speaking as someone who hasn’t been able to see the big “E” at the eye doctor in 20+ years (yes, the really big one), I know firsthand how difficult it is to navigate the world with vision challenges.
Let’s work together to make our corners of the web easier for all to use.