10 tips for accessible website design, with a bonus benefit: better SEO

Buildings with wheelchair ramps, wider hallways and signage with raised dots for touch reading are, by design, more accessible to people with disabilities. But what about the digital world? What steps can businesses take to make their online presence more accessible and inclusive to individuals with disabilities?

Guidelines for websites promoted by the Americans with Disabilities Act (ADA)​ are like the wheelchair ramps of the internet. These guidelines ​remove barriers that can prevent interaction with or access to w​ebsites​ by people with ​disabilities​. The​ Web Accessibility Initiative (WAI)​ of the World Wide Web Consortium (W3C)​ created the W​eb Content Accessibility Guidelines (WCAG)​ to help businesses and developers create websites that are accessible to everyone.

Blue Blaze Associates has developed a checklist for accessibility best practices that our team carefully follows every time we build a new website. The following 10 tips from our checklist also align with SEO best practices — definitely a win-win for designing your website.

1. Use alt text for images.

People with visual impairments may rely on screen reader software to help navigate the internet. Adding descriptive alternative (alt) text to an image allows vision-impaired visitors to understand images displayed on the web. This content behind the scenes is also useful for the search engines and algorithms that index and rank websites. Blue Blaze recommends using alt text for all images.

2. Ensure adequate color contrast.

Low color contrast can be a problem for people with color blindness, or those with low vision who cannot see the difference between certain color combinations. The WCAG requires a contrast ratio of 4.5 to 1​. Many tools are available to check your website color contrast — for example, a Google Chrome extension called WAVE.​

3. Provide video and audio transcripts.

To ensure all visitors can understand both visual and audio portions of website content, provide subtitles for video and transcripts for audio-only content. When adding subtitles to video, be sure to verify that the text appears at the appropriate time. One tool available for creating transcriptions of audio recordings is Otter.ai​.

4. Think keyboard accessibility.

Many users with motor disabilities and vision impairment rely on keyboards or other hardware that mimics the functionality of a keyboard to navigate websites. Keyboard accessibility allows users to access all content and functionality, including menu navigation, links, and webforms. The bottom line: Ensure that all content can be accessed with the keyboard alone, and not be dependent on using a mouse, trackpad or stylus.

5. Code text to support resizing and zooming.

Users should be able to enlarge text by 200% without “breaking” the page by causing text or graphics to overlap or become truncated. In addition, the text should display properly across all different types of devices, including desktop, tablet and mobile.

6. Avoid images of text.

People with limited vision often increase the text size to read website content without using a screen reader. Since a resized image can become pixelated, making it difficult to read, WCAG recommends avoiding image text. If you must use an image of text, such as your logo, make sure to add the alt text description that explains the words and the graphic.

7. Hyperlink descriptive words.

The use of accurate link descriptions ensures that users can navigate your website smoothly with assistive technology. For example, instead of using a generic and vague phrase like “​CLICK HERE,​” apply your hyperlink to a more descriptive phrase such as ​”Visit the Blue Blaze Associates home page​.”

8. Ensure logical webform design.

A webform, also called an HTML form, allows websites to capture information from users to replace paper documents or forms. Webform navigation should be logically arranged so users can easily navigate through the forms with a keyboard or assistive technology. All of the form fields, checkboxes, or dropdown menu should be clearly labeled.

9. Offer timeout extensions.

Many webforms contain a time-out feature for security purposes. Unfortunately, this security feature can become challenging for users who navigate websites with a keyboard or screen reader. When time expires, the user is forced to start the form completion all over again. Design webforms so that when the time limit approaches, a warning dialog box appears that allows the user to extend the time limit.

10. Check the format of PDFs.

When using Portable Document Format (PDF) files in your page content, check for the following:

• Is the text searchable? Note: Some PDFs created by scanning may actually be an image and not searchable text.
• Do all images have alt text tags? Alt text is hidden text that screen readers use to describe an image to a visually impaired person. (See more in #1 above.)
• Does the layout follow a logical reading order (left to right and down, for example, in English)?
• Have background images or watermarks been removed?
• Are tables complete and not split across pages?
• Is the file name 30 characters or less with no spaces or special characters?

For more information, here is a​ guide to creating and verifying accessible PDFs.