Web Accessibility Checklist

Web Accessibility Checklist

Last Edited July 31, 2018 by Garenne Bigby in Accessibility Testing

When designing a new website or updating it to adhere to the most up-to-date accessibility laws and regulations, there are many guidelines to follow. Making sure a website is accessible to all users, especially those with disabilities is important for a variety of reasons. Not only is it the law, but it can also be beneficial to a company. It allows them to have more visitors, make more sales, and obtain many customers for the long-term. Websites that are inaccessible to those with disabilities may not only hurt sales or the number of visitors but can, more importantly, be frustrating to its users.

Below is a web accessibility checklist that can be used for web designers to be sure the items and features on a website are in line with the rules and regulations regarding web accessibility. Following these guidelines will make your website more accessible to all users. While this checklist has many items on it, it may not be comprehensive to all features that may need to be accessible on a website. Unless you have a disability yourself, you might not realize how important some of these items on the checklist are.

Web Accessibility Checklist


Text

Web sites typically have a lot of text on them. There are a few different considerations to make when creating an accessible website.

First, make sure that the text used can be enlarged if needed. Those with an inability to see correctly may need to make the text larger. Ensure this can happen without it affecting the rest of the content on the page.

Text should also be easy to see according to the contrast and colors you are using on the page. For example, white against black might be a good contrast to use for the background and text. It is recommended to use black text on a white background, which is the easiest contrast to see for all users. This type of contrast will allow those with low visibility to be able to read the content effectively.

When it comes to text styles, be sure to use bold, italics, or underlined text when necessary. This can help with showing users the difference between words. While color contrast is a great idea, it also may be best to use different styles, which will help those with colorblindness to be able to see the difference between text. Also, refrain from using color as a directive, such as “click the blue circle to go to the next page”. This may affect the ability of those that are color blind or have difficulty seeing to follow that direction.


Videos and Audio

Multimedia can range from pictures to videos to audio clips. Many websites will have at least one of these types of multimedia somewhere on their site. While this can be a great way to give information to users, it can also be frustrating for those with disabilities if the content does not follow guidelines of accessibility.

Choosing video and audio clips that fit in with the content on the page is the first step to making sure they are accessible. Be sure to put them on there only if it enhances the information given on the webpage. Putting irrelevant multimedia clips on a page can do more harm than good.  

When it comes to video and audio on your website, be sure to put subtitles for any of these types of multimedia you have. Another way to ensure accessibility is to offer transcripts of both videos and audio. This is in case your user has difficulty hearing, then they can still get the content without the sound. In addition, if there is someone who has difficulty seeing or reading, they can have the text read to them. Making the content of video and audio clips accessible is very important if you are going to be including this multimedia on your site. Websites can convey very important information. They also make the website more exciting, but if a person cannot access the information, then they are useless.

Another important feature to consider when it comes to video and audio is ensuring that the video or audio clip can be stopped by a user once the page loads. Not everyone may want to hear or see the information presented in this way. When there are sounds that are playing in the background, this can be distracting while a person is reading or trying to access the content.  

Lastly, be careful that the videos you choose are appropriate for the audience. This doesn’t just mean to be mindful of the content but also be mindful of the effects of the video. For example, if you have videos with loud noises, bright lights, or anything out of the ordinary, you may want to warn your users. Those with epilepsy or other conditions may be sensitive to the light and sound.


Color and Contrast

There are three types of color blindness—Deuteranopia, Protanopia, and Tritanopia. With these vision deficiencies, people may be sensitive to red, green, blue, or yellow light, or cannot distinguish between some colors. Making your site accessible to users with visual impairments means tweaking your website so that they too can understand what's on your page. Using screen readers or tools like colorfilter.wickline.org or the Colorblind Web Page Filter will help get you there. Also, ensure that your site's background and foreground colors have sufficient contrast for both standard vision and color deficient user.


Images

Images are another type of multimedia and are likely going to be in multiple places on a website. Pictures can be very helpful on a website. They can also be used for decorations and borders. Images can be a great way to show off the logo of a company or to give examples of products, services, or whatever else the purpose of your website is. Since they are usually abundant and a large part of website content, it is important that you follow these important guidelines.

First off, make sure the images (and all multimedia you choose) have a purpose. Their purpose should be to convey important information. Sometimes images are better than text because they are more engaging and interesting to the user, but don’t just put a picture of your cat because it is cute. Make sure you also use images only when appropriate to the user’s task. Too many or too little images can be detrimental to a website’s effectiveness. Having too many pictures might take a long time to load, which can frustrate users. Having too few pictures may not be engaging enough or may bore the user. Be sure the images you choose have a purpose and that they fit in with the rest of the content on the page.

Another consideration with images is to make sure they have alternate text to go along with them. This is especially important with any images that are used to convey information. Those images that are only to dress up your site may not need alternate text. You can use your mouse to hover over the image and there will usually be a tiny box that pops up telling what the image is. This is also a way you can check on your alternate text to be sure you are including it in your web design.

Be careful of the color used and content within the picture. If a person has a visual disability, pictures with low contrast or extremely bright colors may be difficult to see. With images, it is also a good idea to think about your audience, who will be visiting your site and whether the images used are appropriate when it comes to age.


Language

There are many different abilities when it comes to understanding language and reading. There are not only people out there who might speak a different language and may not be fluent in English, but there are also many people who may have difficulties with reading and understanding. When it comes to language, people may have disabilities that prevent them from being able to accurately read words or difficulties with understanding what the words are conveying. Here are a few tips when it comes to the language of your website.

Be sure the vocabulary you are using is not too high for the average person that might visit your website. Try not to make your vocabulary too fancy, and stick to more common words that all people will understand. If a person begins reading your website and gets overwhelmed with the language being used, then they will likely move on and go somewhere else to find what they are looking for.

If you do need to use some words that might be considered advanced vocabulary, be sure to include links or the information necessary to explain to them what it means and how it is relevant to the information on your website. This could include linking it to pictures, definitions, or examples of what you mean.

It doesn’t hurt to have your website translated into other languages. Of course, this depends on where you are located and how far you would like your company to reach. While knowing a different language is not considered a disability, it can be helpful to allow everyone to access the information on your site. Use common language that the majority of people can understand.


Forms

Many websites require users to fill out forms. This could be for the purpose of making a purchase, signing up for newsletters or more information or posting comments and messages on the website’s public forum. While forms are a great tool to include on a website, they also have guidelines when it comes to accessibility. If forms are not properly accessible, this can certainly cause a lot of frustration. Users could be unable to buy a product or get the necessary information needed to understand the website. Here is what you should do when it comes to creating forms.

Now, forms include filling out textual information in a box, using drop-down menus, buttons and checkboxes. One very important thing to consider is to make sure each of the text boxes is labeled with what it is. This can be imperative for those using text to speech technology to fill out a form. This could be for those that have difficulty seeing or reading. Users may also visit websites by using different kinds of assistive technology. Having labels on your form’s boxes will make it accessible to all.

Also when it comes to forms, you should organize the boxes in a manner which makes sense. For example, most often a form begins with name, street address, city, state, zip code, phone number, and so on. Having forms in order can help the forms be more predictable for all users.

You also want to make sure that forms can be filled out by using the keyboard to toggle from one box to the other. This can be helpful for those using assistive technology, and those that are unable to use the mouse to navigate through the site.


JavaScript

When it comes to this feature of your website, always use unobtrusive JavaScript—not in line scripting. This will ensure that users are not shut out of your site even if the JavaScript is not working properly. It's also best to present your users with an added layer of usability with alternatives for environments where JavaScript is not available or for those who don't have JavaScript enabled.


Headings

The more organized a website, the better. This is why choosing headlines careful makes your website fully accessible. It can also be a good visual for showing the importance of information. Headings should be simple, yet descriptive, so a reader knows what to expect. It will also be helpful when it comes to screen readers.

Another consideration is to use a linked table of contents when there is a lot of information on one page. This means that a reader can click on the link and be taken directly to the content they are looking for further down on the page. It avoids having them scroll, which can be visually displeasing and frustrating. This will help those that have difficulty seeing find the content they are looking for more efficiently.


Links

Websites usually have links on them to different places within the website or different sites completely. When it comes to accessibility guidelines, links should take a person to a relevant website. Just as the multimedia on a site should have a purpose, so should links. Links can go to other documents that a user would need to get information as well.

Be sure links are labeled correctly and give a purpose of why a user should go there. Perhaps you are looking to give them more information or would like them to check out a product or read a review. Whatever the reason, it should be giving the user more information or bringing them to a relevant page. Don’t use the address of the website, but give it a proper name. For example, instead of suggesting the user goes to https://dynomapper.com, link it to relevant text. “You can visit DynoMapper for more information,” would be a more appropriate way to display the link.

This way, if a user is getting assistance from a screen reader, they know the link is important and legitimate. They can make an informed decision whether or not they want to go to the link. It is also helpful to all users when opening a document because they will be able to better estimate how long the document will take to open and if they have a compatible program.


Navigation

Without proper navigation, it can be difficult to get the proper and necessary information from a website. When visiting a website, users tend to have to click a lot to get where they need to go. Making sure navigation works is not just important for those with disabilities, but is helpful to all users. If you have ever been to a website that is difficult to navigate or you can’t find what you went there for, then you know how frustrating it is.

To make sure your website is easy to navigate, be sure each part of your website can be accessed without using the mouse. Websites that can also be accessed with the keyboard make it easier for a variety of users to get around easily. Those that use assistive technology may not have access to a mouse.  


Lists and Tables

Lists and tables may help to enhance the content on your website. They might be useful for conveying important information such as data and other content. When possible, use bulleted lists. This can help make the content easier to read and understand. It can be beneficial when users are being assisted by technology that reads to them.

Tables on the website should be simple and should include labels for the rows and columns. Again, when someone is using assistive technology, this can ensure they are getting the information easily, so as not to get confused.


Why Accessibility Is Important

Creating a website that is accessible to all can have many benefits. For people with disabilities, it is important (and the law) that they have the same access as those without disabilities. These guidelines are easy to follow and will only make the website you are creating better. No matter what type of disability a person has, they legally need to have access to the same kind of technology that a person without disabilities has.

Making your website accessible also makes it a more user-friendly site for all visitors. This can help improve your SEO, profits, and will make your users happy when they are on the site. Following these guidelines is an important step in ensuring all people have access to your content.

Garenne Bigby
Author: Garenne BigbyWebsite: http://garennebigby.com
Founder @dynomapper
Garenne Bigby is freelance Chicago developer and founder of DYNO Mapper with over 10 years experience in both agency and freelance roles in design, development, user experience, SEO, and information architecture.

Back

Related Articles

Create Visual Sitemaps

Create, edit, customize, and share visual sitemaps integrated with Google Analytics for easy discovery, planning, and collaboration.

Popular Tags

Search Engine Optimization SEO Create Sitemaps Accessibility Testing Sitemaps UX User Experience Sitemap Generator Content Audit Website Content Audit
Create Interactive Visual Sitemaps

Discovery has never been easier.

Sign up today!