Praxent

How to Design an Accessible Website

Tim Hamilton

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.

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.

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:

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.

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.

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