Are you trying to make your website more accessible? Here are 7 steps to guide you to a more accessible website.
First, What Does Website Accessibility Mean?
For your website to be considered accessible, it needs to be usable by people with visual, hearing, motor, and cognitive impairments. Accessibility applies to the site’s code, structure, and appearance. It applies to your text content as well as any media and downloadable files.
The most recent version of Web Content Accessibility Guidelines (WCAG) – version 2.2 – has multiple tiers. Tier A is the most basic and is the easiest to meet. Tier AA is the one most sites choose to comply with. Tier AAA is the hardest to meet.
Why Should You Make Your Website Accessible?
First and foremost, it’s the right thing to do!
But if that’s not enough. There is an increasing number of lawsuits being filed on the grounds that websites and apps are not accessible. The Department of Justice has stated that it considers websites subject to the Americans with Disabilities Act.
In the past, Google has used its ranking algorithm to encourage website operators to make their sites mobile-friendly and secure. It would not be surprising if they eventually make website accessibility a ranking factor. Lastly, incorporating accessibility best practices can also help with SEO!
Step 1 – Test Your Current Website
Tools like Lighthouse, Wave, A11y, and others are available to test your site. Each tool evaluates your site in a slightly different way so for the most comprehensive results, use multiple tools. Use your keyboard to navigate your pages to make sure your site works for those who do not use a mouse. Consider using a screen reader, such as NVDA or JAWS, to see how your site works for users of these technologies. Consider having a full accessibility audit conducted for your site.
Step 2 – Improve Your Theme
If you are using WordPress, consider using an accessible theme that includes code-level best practices. If you can’t use an accessible theme, the WP Accessibility plugin can make some code-level improvements to your existing theme.
Step 3 – Get Rid of Accessibility Overlays
Accessibility overlay tools promote themselves as quick and easy solutions to make your website accessible. However, these tools almost always cause more problems than they solve for those who use assistive technology to access a website. They may even introduce privacy issues. The general recommendation from the accessibility community is to avoid the use of overlays.
Step 4 – Use High Color Contrast and Other Visual Cue
Sufficient color contrast is helpful for those who are color blind or who have low vision. A11y provides a helpful tool for choosing colors to achieve the right level of contrast between foreground and background colors at different text sizes. Wave will flag insufficient contrast as one of its tests.
Another best practice is to use visual cues beyond just color to designate importance or interactivity. For example, links should be underlined to set them apart visually.
Step 5 – Add Alt Text for Images
In addition to being helpful for SEO, alt text provides information about images for those who use screen readers. Alt text should describe the image and should not start with “image of” or “picture of”. While the text should provide sufficient detail, Wave will flag alt text that is longer than 100 characters. For longer descriptions, use the LONGDESC attribute.
Step 6 – Make Your Media and Documents Accessible
If you create audio and video files, include transcripts and captions (also good for SEO). If you are adding PDFs to your site, those need to be accessible as well. Make sure images have alt text and the reading order of the elements flows in a logical order.
Step 7 – Add An Accessibility Statement
After you have tested your site and implemented fixes to make your website accessible, the last step is to publish an Accessibility Statement on your site. The W3 Web Accessibility Initiative (WAI) offers an accessibility statement generator to help walk you through all of the components that it should include.