Home » Understanding Web Content Accessibility Guidelines
Compliance Regulations

Understanding Web Content Accessibility Guidelines

Web Content Accessibility Guidelines
Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are a set of guidelines developed by the W3C that help you make your websites and web applications more accessible to people with disabilities, including blindness and visual impairment, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. This article explains what web content accessibility guidelines are, how they were developed and offers suggestions on how to make your websites or web applications comply with them in order to avoid having legal action taken against you under the provisions of the Americans with Disabilities Act (ADA).

What are Web Content Accessibility Guidelines?

WCAG, or Web Content Accessibility Guidelines, is a set of guidelines published by the World Wide Web Consortium (W3C) that determine how to make web content (including websites) accessible for all users. Understanding how to implement these guidelines allows companies to better serve their customers by developing usable and accessible websites. For example, accessibility would include making sure that content can be navigated using only keyboard commands, or making sure that all website content can be read by someone who is blind. WCAG also ensures that online products can be used by people with a variety of other physical and mental impairments. By creating an accessibly designed site, you are ensuring your customers have equal access to information provided on your website.

Web Content Accessibility Guidelines (WCAG) 2 Overview
Web Content Accessibility Guidelines (WCAG) 2 Overview

Why are Web Content Accessibility Guidelines Important?

WCAG guidelines are an international standard for making websites, apps, and other electronic content accessible to people with disabilities. It includes specific guidelines for different types of disabilities including visual, auditory, and motor impairments, learning disabilities, speech/language disorders, and intellectual/developmental disabilities. For example, if a person can’t see well or at all then colors that blend in with their surroundings won’t help them navigate a website or application. If they have trouble grasping their hands they need larger buttons on a site so they can interact with it better.

Ways to Improve Website Accessibility

Below are some practical tips on how you can implement these guidelines into your website development process. It may seem like a lot of work at first, but most of these points are easy fixes and make accessibility issues a top priority. Here they are in no particular order:

Create an accessible site map. This should be done up front with an architect or developer if at all possible because it will inform all other aspects of design from navigation to file structure.

Plan for color-blindness; don’t rely on color alone to convey information. Most people won’t realize that there’s a problem unless someone points it out so consider what would happen if someone was unable to distinguish between two colors – you wouldn’t want users missing out on content or features just because they have different colored eyes! You might also look into using fonts such as OpenDyslexic which has been designed to help dyslexics. You could either add it as an additional choice for visitors or you could replace every font on your site with OpenDyslexic giving users a choice on whether to read with ease or not depending on preference.

• Make sure links aren’t hidden by default. If I visited a news site I would expect my cursor to change to indicate when I hover over text links… never assume anything! In addition always remember keyboard shortcuts and think about making pages more fluid through intuitive controls and patterns like scroll wheels instead of buttons, selecting items with radio buttons instead of drop down menus etc.

• Make sure functionality works across browsers. Assume none of your users use Internet Explorer after a certain version or that everyone uses FireFox even though Chrome is king. Because computers are becoming so powerful, there really isn’t any excuse anymore.

• Offer captions along with sound files. Sounds may aid in storytelling but one must always provide transcriptions for non readers/hearing impaired individuals along with audio description options to compliment multimedia pieces and prevent any unnecessary confusion.

• Avoid reliance on complex animations wherever possible. Animations can be great for encouraging user interaction, adding visual appeal and showing off advanced coding skills but if taken too far they break immersion and create accessibility challenges.

• Keep lines of text to a minimum. People with cognitive disabilities often find it difficult to hold information in their minds for extended periods of time so try to keep complex processes as simple as possible. Ditch paragraphs whenever you can replacing them with bulleted lists or numbered steps wherever applicable.

• Use descriptive, clear language. We can’t help but cringe whenever we see an image or graphic with a title like “Click here” or “Sign Up for our Newsletter”. How do you know that? How do you know where to click? Don’t force your users to hunt for information. It makes things unnecessarily complicated and that defeats their purpose.

• Break up dense blocks of information. Like we said earlier, it’s hard for many to focus on information for long periods of time so if you’re working with data that can be considered dry break it up into bite sized chunks with lots of whitespace.

• Make sure forms are semantic and easy to fill out. Forms are important tools for business but they shouldn’t require users to spend hours figuring out how to fill them out. Think of how you would fill it out, is that a reasonable expectation for your users? Remember to test it on as many platforms and devices as possible and always include a form validation check… I hate running into a wall at the end of an otherwise smooth process!

• Make sure there’s some type of alt text with your images. Not only does alt text assist screen readers but it can actually boost SEO as well!

Support your video with closed captioning or subtitles. You can’t always tell if a person is having trouble hearing so it’s best to put them on equal footing.

About the author

mm

Web Accessibility Overlays Team

Our team has more than a decade of experience in website development. We focus our personal passion for accessibility by creating relevant and useful content which may help individuals and organizations in making their sites user-friendly and more accessible.

2 Comments

Click here to post a comment

  • If you’re new to the concept of accessibility then reading the entire WCAG can be very overwhelming. I suggest taking it slowly until you complete all the guidelines.

  • Agree with the images having non-relevant texts like “click here”. It’s not really helpful and can be very annoying.

Font Resize
Contrast