We used to only think about physical buildings when we thought about accessibility, but now it applies to digital and websites. While specific laws have not yet been put in place, the time to make sure your website and other digital assets are compliant is now.
Digital accessibility refers to the practice of building digital content, applications, and websites that can be used by anybody, including individuals who have visual, motor, auditory, speech, or cognitive disabilities. The ADA (The American Disabilities Act) is a law that prohibits discrimination against individuals with disabilities in all areas of public life. There has been much more about ADA in the media over the past few years due to many lawsuits, with 814 website accessibility lawsuits filed in federal and state courts in 2017 alone, so companies are becoming more aware of what’s needed to make their website accessible and why it’s important.
Compliance Levels
The ADA is encouraging self-regulation of accessibility standards by following the Web Content Accessibility Guidelines (WCAG) 2.1. With attention heightening around the topic, it’s best to be proactive in anticipation of future laws and to ensure accessibility of your website for any user.
WCAG 2.1 identifies three levels of compliance. They are:
- A – rules with which you must comply
- AA – rules with which you should comply
- AAA – rules with which you may comply
The biggest difference between all the levels is color contrast; with each level, there’s a higher contrast minimum for text. The WCAG recognizes it’s virtually impossible to build a website to be 100% accessible and does not recommend that level AAA conformance be required as general policy. However, there are many things you can do to get it close. Here are some best practices to keep in mind:
1. Only use color for enhancement
Color is an enhancement. It should never be the sole way you convey any type of meaning or information, as there are people with visual impairments who won’t be able to distinguish between the colors. For example, maybe a bar graph doesn’t just have bars of different colors but also patterns to distinguish between data sets. All content must have sufficient color contrast, and there are many tools available to help you check that, including ones that live on the WCAG and WebAIM websites. You can enter the hex codes for the colors, and it will verify whether or not it is accessible. Normal text (16px) requires a higher contrast ratio, while larger text or text that is bolded (18px bold or 24px) requires less.
2. Ensure forms have labels and inline messaging
Some people access websites through a screen reader, which will read the entire website to you. Therefore, any instructions for the user should be clear and concise. When it comes to forms, you should pull helper text out above the field as a label so that screen readers can read it, as they can’t pick up the placeholder text when it’s only within the form field. You should also consider how you are developing your form validation and error messaging. Forms are a vital way that users connect with your company, so you want to make sure they are easy to use and understand. Inline error messages are beneficial so that a user knows when they have filled something out incorrectly or missed a field, and how to fix it. The message displays within the form (instead of at the very top or bottom of the page) and clearly notes the error. State changes are important here too, such as highlighting a required field box that the user skipped or where they entered information incorrectly.
3. Pair images and video with text
Be sure to include text with any images and videos. All images should have succinct, meaningful alt text, which is used in the HTML code to describe the image. You can enter this in the back end of your website for each image, through your CMS. Visually impaired users will be read the alt text by a screen reader to better understand the image, and it’s also a best practice for SEO. Similarly, ensure that audio and video content has captioning or transcription to make it accessible, and this text is beneficial for SEO as well. You should also provide a way to pause or stop any video or animation, as some users may be susceptible to seizures, etc. Lastly, make sure to always use true text; avoid having any text as an image. This can’t be read or accessed by devices like a screen reader. It’s also purposeless for SEO because search engines can’t read the text, and additionally, this format is not responsive.
4. Use correct markup on your content
Once you understand how devices such as a screen reader work, you can keep that front of mind as you design layouts and determine the visual order of each page by considering how you want the user to flow through it. Use headings appropriately, don’t skip them, and only use one <h1> per page. These are important notes for your developer, as all of these things provide correct markup so that when devices access the site, it’s not confusing or out of order.
5. Support keyboard navigation
Any user should be able to navigate your entire site by using the tab key, as some may not be able to use a mouse. This means that each navigational item needs a focus indicator, which highlights each element so you can tell where you are on the page as you tab through it. Think about how you want this to look when you design the site. These are different than hover states and click states, although it may be helpful to design them all at the same time.
6. Create states that communicate a change
On that note, create states that communicate their purpose and action. Hover states are important to communicate to the user that you can click on an element, and click states confirm that your action (a click) was taken. Keep color contrast in mind as you design these states, as it’s important that the change is noticeable. Underlining links is another practice that may seem old-fashioned, but keeping design elements to a familiar structure is helpful when it comes to ADA. So with elements such as links or navigational items, avoid thinking outside the box with your design, as that can confuse users.
7. Use informative calls to action
Be descriptive with any buttons or hyperlinks so it is clear what the next step is upon clicking. Use more intentionality with descriptions instead of leaving them open-ended. For example, you may want to label a button with “Call for a quote” instead of simply “Click here.” This way, when a screen reader reads the button, the user knows exactly what they are clicking on.
Accessibility matters
With 42 million people just in the US alone having a disability, designing your website to be accessible is important. There’s also a strong business case for accessibility. Studies show that accessible websites have better search results, reach a bigger audience, are SEO friendly, have faster download times, encourage good coding practices, and always have better usability. There’s still a lot of gray area when it comes to accessibility guidelines for the web, but now is the best time to get in front of the issue and audit your website to work towards ADA compliance—or better yet, to keep ADA front of mind while you are designing and developing your website and digital content, instead of making fixes after the fact.