As more and more users access gain access to web technologies, it becomes increasingly important to make our content available to people with disabilities.
For example, my father-in-law has 85% vision loss due to macular degeneration, a fairly common condition for people over 60.
He checks stocks, reads the news, and interacts on social media by using screen readers and enlargers.
These technologies allow him to see and comment on pictures of his grandson, manage his finances, and plan international trips with little assistance.
How cool is that?
Web accessibility guidelines best practices
There’s an organization that’s sort of like the godparents of the Internet called the World Wide Web Consortium, or W3C. They’re widely considered to be the standard for all things web-related, be it responsive website design, web accessibility, code validation, or code education.
A few years back, they put together a checklist of guidelines for web accessibility called the Web Consortium Accessibility Guidelines, or WCAG. It’s still evolving (we’re on WCAG 2.1), but here’s a shortlist of some of the important stuff:
- Provide text alternatives to content like images for screen readers to pick up on. You can also embed alt and title tags in your image code, so that text readers can read what you’ve put there for your visitor. For example, an image of a person smiling above a contact form might have the alt tag “Questions? Fill out the contact form below.” This gives your visitor a verbal queue on where the form they want is, in relation to the image element that they’re looking at.
- Use high contrast text and images so that people with sight disabilities have a better chance of reading your content. You can use this contrast checker to see where you’re at. 4.5:1 + is considered ideal. https://webaim.org/resources/contrastchecker/
- Make sure your website can be navigated using only a keyboard or only a mouse. For example, some people may have difficulty in using a mouse due to involuntary muscle spasms. Using the arrow keys, the tab key and the enter button to navigate through elements and fill out forms can allow those folks to use your site with relative ease.
- Minimize chance of seizures and physical reactions by reducing or eliminating any bright flashes or blinking objects on your website. Red and green flashes in particular are known to cause seizures in some people.
- Declare the language of the page in your HTML, or if you use multiple languages on each page, notate the language change section by section in your code. This helps search engines like Google to identify and index content by language more efficiently, which increases your chance of coming up for that language in search. Win win!
- Use responsive website design practices to make your font sizes, image crops, and buttons easy to read and quick to load on as many device types as possible.
- Be consistent and predictable with your navigation. Use consistent header navigation and breadcrumbs to show people where they are in relation to the rest of the site. Use footer navigation and “Back to top” functionality to assist people who’ve scrolled a long way from your primary navigation in the header.
The full web accessibility guidelines checklist
There are three levels of web accessibility compliance: A, AA, and AAA.
The full list of requirements for WCAG 2.1 is a bit intimidating, but you can see it here:
Need help upgrading your website to be WCAG compliant?
It’s what we do! We’ve developed a system to make sure your site meets WCAG guidelines and will perform beautifully for your audience, regardless of their disabilities. Just fill out the form below to schedule a consultation.