Is Your Site Built with Accessibility in Mind?

Digital accessibility is officially defined as

the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities.
– Wikipedia

In other words, the internet is for EVERYONE, including those limited with disabilities that hinder eyesight, hearing, the ability to use a mouse, or the ability to differentiate certain colors. Accessibility standards guide us in creating useful experiences for all users.

The World Wide Web Consortium (W3C), an international voluntary community that develops open standards for the web, has set guidelines for web accessibility within WCAG 2.1 – which is the standard for web accessibility best practices. Within these guidelines, they establish three levels of accessibility compliance – A (lowest), AA, and AAA (highest).

Why is accounting for accessibility so important?

Following the W3C guidelines as closely as possible is not only a best practice, it is a legal obligation in some industries (mainly federal agencies) and an ethical practice in all industries. Creating an experience that all people can enjoy and consume is something that designers and developers should always have top of mind.

At Leverage, we consider accessibility in the design and development of every website or app that we create. Though this has always been a best practice for our team, we’ve made more of a concerted effort to focus on this within the last year or so – running tests on each of our sites to determine an overall accessibility score and identifying areas of improvement. These tests are done in addition to the usual browser, speed, and device testing we do.

Accessibility Checklist

Here is a checklist of items to consider as you design and develop for the web, or to ensure your creative agency accounts for. Some are fairly basic, while others are more in-depth:

▢ Provide text alternatives for non-text content
Alternative (Alt) text is a written replacement for an image, which means the text should describe the image and give the same information that the image would if seen.

▢ Provide an alternative to video-only or audio-only content
Include text transcripts that convey the same information as the media.

▢ Provide captions for videos with audio
This is one that can prove fairly difficult. Adding captions to synchronize with the video isn’t always easy, but there are services out there that will do closed captioning for you.

▢ Present content in a meaningful order
This can be done through headings, bulleted lists, and styles. Use hierarchy of type to establish headings that break up text and create an order of importance to improve readability. Use valid HTML.

▢ Don’t rely on color alone to present information
Use text, icons, patterns, or imagery in addition to color to distinguish pieces of content. This ensures accessibility for users that are color blind.

▢ Don’t play audio automatically
Allow your users to determine when and if they want to hear audio by giving them the option to play and pause it.

▢ Ensure every link has a clear purpose
Use clear text in links and buttons so it is apparent what will happen when a user clicks it. Where will it take them?

▢ Ensure sufficient contrast between text and background
Make sure the contrast ratio between your text and background is at least 4.5:1 as established by the W3C. There are a handful of tools that exist out there that make checking color contrast easy and will also tell you what size your type needs to be (see Accessibility Tools below).

▢ Offer several ways to find and access pages
It’s important to give users more than one way to locate a page. This could be through the main navigation, text links or callouts within the body of a page, or even footer links. If a users misses a link in one spot they are sure to find it in another.

▢ Use clear headings and labels
Clear headings make it easier for users to scan and find the content they are interested in as well as break up large bodies of text so it doesn’t appear overwhelming.

▢ Use menus, icons, and buttons consistently
Keep navigation menus in the same location on all pages and always present menu options in the same order. If a menu moves from one position to another or looks differently from one page to the next, it makes it difficult for a user to find what they are looking for.

Similarly, icons and buttons should remain consistent. If an icon stands for something, for example a magnifying glass symbolizing ‘search’, it should stand for that throughout the entire site – the meaning of the icon should never change. If a button is a particular color or shape – all buttons throughout the site should remain this same color and shape so they are identifiable as buttons.

▢ Ensure keyboard focus is visible and clear
If visitors use a keyboard to navigate your site, they should be able to see which element they are on at any time. This can be done by stylizing a visible border or outline around the element in use.

While this is certainly not a comprehensive list, it will hopefully give you a good start towards ensuring your website is accessible for all. Also, take a peek at some of the tools and resources outlined below that will definitely be handy to hang on to.

Useful Accessibility Tools/Resources

• Lighthouse – For Chrome users, Lighthouse can provide numerous test results (performance, accessibility, and best practice recommendations) all in one report.
• Color Review – Check color contrast of text in relation to it’s size.
• Accessible Brand Colors – A tool that evaluates the ADA compliance of your brand’s color palette.
• Colorable – Tool to check color contrast of text that has sliders to adjust hue, saturation, and brightness in real time.
• Colorsafe – Check color contrast of text while also considering font family and weight.
• Color Oracle – A free color blindness simulator.
• WCAG 2.0 Checklist – Dives further into accessibility guidelines according to the three WCAG levels (A, AA, AAA).
• W3C Guidelines – Official Web Content Accessibility Guidelines
• AXE Google Chrome Extension – Test a site for accessibility violations using the Chrome inspector.

Sources:
https://en.wikipedia.org/wiki/Web_accessibility
WUHCAG.com