When planning a website redesign or visual changes, it is essential to ensure those changes make your website accessible to everyone. By hewing to the WCAG (Website Content Accessibility Guidelines), you can ensure your website is accessible to all users. Here are seven ways you can improve a website's ADA compliance visually.
- Watch Your Color Contrast
One of the most basic aspects of website ADA compliance is ensuring that the text/graphics and background color combinations used on your website have a high level of contrast - visual difference between the two. This is important for users with visual impairments; it makes it easier for them to read the content on your site. The Web Content Accessibility Guidelines Level AAA recommends a contrast ratio of at least 3:1 for graphics and user interface elements, 7:1 for normal text and 4.5:1 for large or bold text. Use online contrast checkers such as this one from WebAIM to test the contrast of your color combinations and adjust them accordingly.
- Alt Text for Images. Let's repeat that. Alt. Text. For. Images.
Without alt text, images are imperceptible to users who are blind or have low vision. Adding descriptive alternative text (alt text) to all images on your website (except solely decorative elements) enables these users to understand what the images are conveying, even if they can't see them. Alt text should be clear and concise, conveying descriptive information about the image. As mentioned above, decorative images, (images used purely for aesthetic purposes), do not require alt text.
- Use Legible Fonts
The font you choose for your website affects its accessibility. Sans-serif fonts, such as Arial or Helvetica, are generally easier to read than serif fonts like Times New Roman or Georgia. Fonts should be large enough to read comfortably, especially for users with visual impairments. WCAG recommends a minimum font size of 12 points for text, although larger fonts may be necessary for users with severe vision impairments. Ensuring that users can zoom in can help obviate these issues.
- Don't Forget About Keyboard Accessibility
All functionality on your website should be accessible using a keyboard alone for users who are unable to use a mouse or other pointing device. This includes navigation, form fields, and any other interactive content. Users need to be able to access all elements of the website using only the tab key, and there should be clear visual indicators of the currently tab-focused element.
- Use Headings Correctly
Using heading tags to organize your website's content makes it easier for users with screen readers to navigate the content. Headings provide a hierarchy to your content, and users can use them to skip between sections of the page. Use heading tags correctly (they aren't meant to provide different text sizes to mix and match), with only one H1 tag per page and subheadings ordered sequentially.
- Avoid Flashing/Blinking Content
Flashing or blinking content is a problem for users with certain neurological conditions, such as epilepsy or migraines. This one is pretty simple, just don't use flashing or blinking content on your website. If you need an animation, make sure that it's not too fast or bright, and that users can stop it easily.
- Transcripts & Captions for Videos
Transcripts provide a written version of the video's audio content as a document, while captions provide a text version of the audio that appears on the screen (the familiar "closed captioning"). This is necessary for users who are deaf or hard of hearing to allow them to understand the video fully.
This isn't everything that goes into making a website ADA compliant, but if you apply these seven points, you can be confident that your website is more usable and accessible to differently-abled users.