How to Design an Accessible Website

Professional Web designers and people who run small sites promoting a business or hobby have the same basic goal: They want to get as many people as possible to visit their website. One key element in attracting and retaining visitors is designing an accessible site. An accessible website is one that’s usable by all visitors, some of whom will have impairments or disabilities. Luckily, there are many resources available to help hobbyists and professional Web designers craft fully accessible sites that will be usable by a wide variety of people.

Why Website Accessibility Should Be a Priority

Good website accessibility allows for a website to be used by visitors with vision issues, hearing issues, cognitive disabilities, and mobility issues. The Americans With Disabilities Act (ADA) requires businesses to be accessible to people with disabilities. An accessible website is also a way to actively show how a company’s values are lived and integrated into its business practices. On a practical note, it also can increase website visits and time spent on site. Making a website accessible is based on hundreds of small choices. For example, all images should have alt text. Making an accessible website won’t necessarily be an expensive investment of either money or time.

• Why Web Accessibility Must Be a Priority to Every Business, No Matter its Resources, Industry or Size: By not using accessibility best practices on their websites, businesses are making the decision to exclude about 25% of Americans from their potential customer base.

How to Check Your Site’s Accessibility

The first step in designing an accessible website is to fully understand the status of your current website. Luckily, there are many easy ways a webmaster can check how accessible their current site is to a variety of users.

Use an Online Accessibility-Checker

There are online accessibility-checkers that can provide information about where a website can do better. One such tool is the WAVE Web Accessibility Evaluation Tool, which evaluates a website against the Web Content Accessibility Guidelines. It’s very easy to use. Just paste in the URL and WAVE will evaluate the page and then create a report listing errors and issues.

• Understanding the Web Content Accessibility Guidelines: According to the Web Content Accessibility Guidelines, Web content must be perceivable, operable, understandable, and robust.

Install a Browser Extension for Accessibility

Another popular option is to download a browser plugin that automatically checks websites for accessibility issues. One popular option is the ARIA (Accessible Rich Internet Applications) plugin for Google Chrome. It’s free and makes websites with accessibility issues easier for people with disabilities to use. For example, it makes websites work better with screen readers, which people with vision issues use while browsing the Internet. Webmasters can use it as a way of identifying areas where they could improve accessibility on their site.

Manually Check for Common Accessibility Issues

There are many checklists available for checking how accessible a website is. Using one of the checklists, a webmaster can evaluate their site. Most checklists include looking for these issues:

• Do all images have alternative text?
• Are there multiple ways to navigate the website?
• Do all video or audio files have captions and transcripts?
• Are color contrasts easy to see?

Hire a Web Accessibility Expert to Audit Your Site

There are companies that specialize in evaluating websites and providing a concrete plan for making a website fully accessible. Businesses and organizations that specifically work with disabled populations or those that have accessibility as one of their core values should consider taking this route.

• Why Is a Web Accessibility Audit Important? A well-done website accessibility audit will be undertaken in a structured way to find all areas of potential improvement in a website.

How to Design an Accessible Website

A website designed to be accessible actually functions better for all users, even those without disabilities. These guidelines can help Web designers create a website that’s fully functioning for all visitors.

1. Ensure That Your Site Allows Keyboard Navigation

Keyboard navigation is a key component of having an accessible site. Users should be able to fully navigate the website without having to use a mouse. Lots of assistive technologies are designed to use keyboard-only navigation. Webmasters can test this by attempting to navigate their website using the tab key.

• UX Optimizations for Keyboard-Only and Assistive Technology Users: Skip links help make keyboard-only navigation easier and more seamless for users.

2. Use High-Contrast Colors

Many people find it difficult to read text when the color contrast between the text and the background is low. This is especially true for visitors with vision issues. Therefore, the best practice is to use high-contrast colors, like black text on a white background or yellow text on a black background. Text should always stand out. Tools like Contrast Checker can help find any contrast issues that might cause user experience issues.

3. Provide Alt Text for Images

Alternative text, or alt text, describes each image used on a website, and including it is a best practice for Web design for many reasons. Users with vision issues are able to still get information about an image if it has alt text. The alt text will be picked up by text-to-speech software. Alt text tags also help to optimize the site for search engines.

4. Use Heading Hierarchies to Structure and Organize Content

Long blocks of content are difficult for all website visitors to read and comprehend. That’s why it’s a design best practice to break up content into more manageable sections. The best way to do this is with headings and subheadings. Not only do they make the website more visually appealing, but they also make it easier for visitors who are using screen readers. Each page should have an H1, or title. Following the H1 are H2s, H3s, and even H4s. They should be used in order: A page should have an H1 heading, some H2 headings, and subheadings of those headings should be formatted as H3 headings. Subheadings under an H3 heading should be H4 headings, and so on.

5. Add Captions and Transcripts to Videos

Videos need to be captioned and transcribed so that visitors to the site with hearing impairments don’t miss out on important content. Transcripts and closed captioning can also allow users using screen readers to receive the content. There are several Web tools available to make captioning and subtitling videos easy and seamless.

6. Design Forms Carefully

Forms are often tricky for website visitors. It’s important that they are designed to be user-friendly. For example, each field should be clearly labeled. Brief but informative directions should be included. Placeholder information can help users understand exactly what information goes where in the forms.

More Resources for Accessible Websites

• Why Accessibility Is Important: Websites that incorporate accessible design are easier to use for people with and without disabilities.
• Accessibility Basics: One principle of accessible design is not solely relying on color as a navigation tool.
• Must-Have ADA Compliance Checklist: Labeling links in a logical way makes for a site that functions better for all users.
• Basic Website Accessibility Checklist: Sans-serif fonts are recommended as being easier to read.
• Basic Checklist: Online Content Accessibility: Color is a key part of accessibility. The color chosen for text should be in sharp contrast to the color used for the background of the site.
• DIY Accessibility Checklists: These checklists can help Web developers ensure that their sites are fully accessible.
• Introduction to Web Accessibility: This guide covers everything any designer needs to know about making fully accessible websites.
• Nine Ways You Can Make Your Website More Accessible: Around one-quarter of American adults live with some sort of disability.