Overview
Regardless of how small your company is, what you do, or who you serve, it's important that you be accessible to all people, including those with disabilities. This basic principle applies just as much to digital spaces as it does to physical ones. Failure to meet basic accessibility guidelines is morally wrong for a variety of reasons, and can also result in a lawsuit for not meeting requirements set by the ADA (Americans with Disabilities Act). This article will discuss some basic guidelines for making sure your site is ADA compliant. This article will skip over certain guidelines that are obvious, so readers curious about more specifics should look at the WCAG section below.
WCAG
It's common practice in web design to use WCAG (Web Content Accessibility Guidelines) for general guidance on making things ADA compliant. You can find the most recent version of WCAG, WCAG 2.1 here. As WCAG is a highly complicated document, we'll be summing parts of it up in this article. The WCAG's quick reference guide can be found here, if you're looking for specific technical solutions.
The WCAG sorts websites into three grades: A, AA, and AAA. "A" websites are generally accessible, and are ADA compliant. AA and AAA sites are even more accessible; think of an "A" as a passing grade, and an "AA" or "AAA" as a B and an A+. The majority of the guidelines we'll cover here will be focused on meeting an "A" or "AA" level.
Please note that the WCAG often refers to making sure things are "Programmatically Available", meaning that technology used to assist users in accessing your site can view the information you wish to be available. One example of this might be having an ordered list on your website. If the information on the list derives importance from the order it is listed in, then that order needs to be programmatically available, so blind or low vision users using a screen reader, or users of technology that may affect the formatting of your site can be aware of the order. Generally speaking, if you're using common website design tools like HTML or CSS, both of which are accessibility supported, then this may already be done for you.
ADA Compliance
The letter of the law for the ADA as it pertains to websites is less about specific things like font size, color schemes, etc. and more about general principles. The four principles we'll be using to judge ADA compliance are as follows:
- Perceivable - Information and website elements should be perceivable to all users, and must not be invisible to all their senses.
- Operable - Users must be able to operate your site. Your site shouldn't require interactions users can't perform in order to work.
- Robust - Your site should be usable by a variety of technologies. This applies both to older devices, and to technology that helps users with disabilities access the internet, like screen readers.
- Understandable - Your site, both the information and UI, should be generally understandable.
These are all common sense principles to follow (especially for retail sites). Regardless, we'll go over some things you can do to follow each of these principles.
Perceivable
Non-Text Content
One of the primary ways you can make your website more perceivable (especially to those who are blind or have low vision) is to provide text alternatives for any non-text content. Images, videos, or auditory content should all have a text alternative and/or be accessible by a screen reader or other assistive technology. We can accomplish this by providing a short description of the non-text content. Make sure when including a description for a video, image, or audio element that the description provides roughly the same information as the thing being described. For video and audio content specifically, it may be easier to provide captions rather than a description.
Colors and Contrast
For the sake of blind, colorblind, low vision, or other users with a similar condition, you should not use color as the only visual means of conveying information. For similar reasons, your site should be sure to use a ratio of 4.5:1 for text and images of text. This is to make sure that users can distinguish the text on your site from the background.
Text
There are two main principles for text in this context. First, when possible, text should be used to convey information instead of images of text. The exception to this is if the image of the text can be visually customized by users, or if the visual presentation is essential for the information being related by the text. Second, users should be able to increase the text size by up to 200% without losing access to any information conveyed by the text. Lastly, UI elements that include text or images of text should contain the visually presented text in the name.
Operable
Keyboard Accessible
All functionalities of your website should be operable with an unmodified keyboard and mouse. No function should require specific timings for individual keystrokes. Additionally, you should avoid "keyboard traps"; there should be no element of your site where you can change keyboard focus using the keyboard to focus on that element, but not change focus away with a keyboard.
Lastly, if your site uses any keyboard shortcuts made up of only letter, punctuation, number, or symbol characters, then there must be either a mechanism to turn the shortcut off, a mechanism to remap the shortcut, or the shortcut should only be active when keyboard focus is on a specific component.
Timing and Pauses
If you have any time limits on your site, that time limit must either be essential to the activity it pertains to, or be alterable. Exceptions to this include time limits longer than 20 hours, or time limits that are part of a real time event, like an auction or race.
Additionally, any information that moves, blinks, or scrolls across your website, the user must have an accessible mechanism to pause, stop, or hide, that movement/information.
Flashes & Seizures
This is yet another basic element of web design your site may already be following. Your site should not contain any element that flashes more than three times per second.
Navigation
In general your website should readily provide users with ways to navigate your site, find the content they want, and quickly determine which page they're on. Your webpages should have titles that describe the topic or purpose, and users should be able to determine the purpose of links within webpages from the link text and the programmatically determined link context.
Understandable
Predictability
Your website should generally behave how users would expect your website to behave. A primary example of this would be making sure that when a UI element receives focus, it should not initiate a significant change on the page without first informing the user.
Input Assistance
Another staple element of web design, when your site detects an error (an incorrect password, or an impossible email address) it should inform the user where the error has occurred. If you've ever entered a password incorrectly on a website, the website generally tells you that your password is incorrect; this is the same principle. Additionally, any area where user input is required should contain instructions pertaining to that input. Password fields should be marked as password fields, for example.
Robust
The general guidelines for creating a robust website all follow the principles of proper website coding. Elements should have start and end tags, be nested properly, IDs should be unique, etc. This is because many assistive tools for accessing websites rely on the website's code, things people not using those technologies would typically never see.
End Notes
All of the above is a rough summary of relevant WCAG guidelines for an "A" rank website. If you're interested in making your website "AAA", or if you want to learn more about the WCAG guidelines, please look here for more information.