When the Americans with Disabilities Act was enacted in 1990, the focus was on ensuring individuals with disabilities had equal access to everything from public accommodations to government programs and services. Since the early 1990s, technology has evolved to the point where this right to accessibility now extends to the Internet.
This means your website needs to comply with the ADA to prevent potential legal issues and as a best practice to accommodate visitors with disabilities. However, the ADA doesn’t provide guidelines for website compliance. The standard followed by many organizations is the Web Content Accessibility Guidelines (WCAG). While WCAG doesn’t have any legal standing, it’s a good reference for maximizing digital accessibility.
Here are some easy changes you can make to your current website to ensure that your website is ADA-compliant:
Use Alt Tags
Alt tags, also known as “alt attributes,” “alt text,” or “alt descriptions,” are short text descriptions that are used to provide information about images on websites. Alt tags ensure that site visitors with disabilities will be able to read or hear alternative descriptions of content that they would not be able to access without the tags. When a screen reader encounters an image with an alt tag, it reads the alt text aloud, allowing the user to understand the content and context of the image. The text should be the most concise description possible of the image’s purpose.
Pro Tip: There’s no need to include identifiers like “image of…” or “picture off” in your alt text. Screen readers will announce the presence of an image.
Bad: image of wheels
Good: closeup of cyclist standing to pedal bike
Use Captions & Create Text Transcripts for Videos & Audio
For your website’s video and audio content, captions and text transcripts provide accessibility for individuals with hearing impairments. Without text, this content would not be available to them in any format.
Pro Tip: There are various softwares available that can quickly add captions to your video(s) or transcribe your video/audio files. We recommend Kapwing for easy and quick captions and transcriptions!
Be Screen Reader Friendly
Make sure your website build is optimized for individuals with visual impairments who use text readers. For example, proper heading tags are a good tool to create a clear structure of content for site visitors.
Header tags are HTML tags used to set headings and subheadings apart from the rest of the copy on a website. They descend in order of importance from H1 to H6. Heading tags help those with screen readers read your site content as well as anyone who is quickly skimming your website.
Pro Tip: Skipping heading ranks can be confusing and should be avoided where possible. Make sure headings follow sequentially: H2s followed by H3s and so on. It is ok to jump from a lower rank to a higher rank when closing out a subsection.
Color Contrast
Use sufficient color contrast between text and background to make content readable for users with visual impairments or color vision deficiencies. Contrast ratios also apply to graphical elements, such as icons and other visual indicators. Ensure that these elements have sufficient contrast against their backgrounds. For example, white text on a yellow background is not recommended as the yellow background doesn’t provide much contrast for the white text to be clearly read. An example of good color contrast is black on white or white on black.
Pro Tip: You can check your website color contrasts with the WebAIM WCAG Contrast Checker tool.
Use Descriptive Links
For site visitors with visual impairments, understanding where a basic “click here” link will take them isn’t necessarily easy. To make these links more accessible, use descriptive text to make it clear to users where each link leads. For example, on landing pages and buttons, use clear calls to action such as “sign up today for our newsletter” or “click here to watch a demo on our YouTube channel.”
Work with an ADA-Friendly Website Design Firm
Does your organization need a new website or a refreshed design to boost user engagement and ADA compliance? Contact us today to learn more about how our Oakland-based website design firm can optimize your web presence and help you better communicate your cause.