The Ultimate WCAG Compliance Guide

Is your website design costing you over 15 million potential users? If it's not WCAG compliant, then the answer is yes! Around 8.1 million Americans have a vision impairment and 7.6 million have some form of hearing impairment. WCAG compliance ensures that users with some form of hearing or visual impairment are still able to fully access the information on your website. We've compiled a guide for easy ways you can make your website meets WCAG guidelines. 

What is WCAG? 

WCAG stands for Web Content Accessibility Guidelines. WCAG covers not only visual and hearing impairments, but also cognitive, learning, language, and other disabilities. Following WCAG guidelines helps ensure that your website is user-friendly for anyone and everyone. Understanding WCAG accessibility is important not only for web designers and web developers but for anyone who is adding content to a website.

The 4 Principles of WCAG Compliance 

WCAG guidelines are organized into four principles.

• Perceivable: Information and images must be able to be perceived by anyone despite any impairments they may have. 
• Operable: Users must be able to operate and navigate your website and its content 
• Understandable: Information and navigation on your interface must be clear and easy for the user to understand
• Robust: As content and technologies change over time, your content must be robust enough that it can be interpreted by assistive technologies
  • Assistive technologies include screen readers, text-to-speech software, speech recognition software, and more.

Under each of these four principles falls a number of specific guidelines. Under each of the guidelines, there are a number of success criteria. Please note: this guide does not cover every single facet of WCAG compliance, simply examples that are easy for those who do not have advanced web design and development experience to incorporate.

Perceivable Guidelines

Text Alternatives

For non-text content, the content must be able to be available in other forms that are accessible to people with different disabilities. This can include:

• Alt text for images (as seen below)

• CAPTCHA (a test designed to prove a user is not a bot must come in a variety of forms such as an image test as well as an audio test so that those with hearing impairments and those with visual impairments are able to pass)
• Non-text controls (if non-text content is made to capture user information or is a control, it must have a clear name that describes its purpose)

Time-Based Media

For audio and video content, it must be accessible to those with a variety of impairments. Easy ways to incorporate this include:

• Captions on videos
• Sign language videos are available 
• An audio description for videos that are primarily media 

Adaptable

All content (or as much as possible) should be created in a manner that can be presented in a variety of ways while still retaining core information. This can include:

• Orientation (content is not restricted to a single view, for example losing its orientation if switched from landscape to portrait)
• Sensory characteristics (instructions for understanding content can not be limited to a specific sense, for example, "click on the red button for more information"

Distinguishable

Content should be easy to discern from other content without strain or difficulty. Ways to achieve this:

• Text spacing (having enough space between lines of text and paragraphs)
• Clear hierarchy (headings and subheadings)
• Contrast (text, images, and other non-text content must have enough contrast from the background so that it is distinguishable)

Operable Guidelines 

Keyboard Accessible

Any functionality must be able to be done with a keyboard. This includes stipulations such as:

• Not requiring specific timing for individual keystrokes
• Keyboard shortcuts must have an option to be turned off, an option to remap shortcuts, or making the shortcut for a specific component only available when that component is the point of focus

Enough Time

Users must have enough time to read and use content despite any limitations they may have. If there are time limitations set on any of your content, allow options for:

• Turning off the time limit
• Extending the time limit

Physical Reactions

Avoid including any content on your website that can trigger any physical reactions such as seizures. Avoid flashes and ensure any video content that is set to autoplay would not trigger any adverse reactions.

Clear Navigation

Provide multiple easy ways for website visitors to find the content they are looking for. 

• Anchor text on links (inserted as a hyperlink, not copy-pasted URL) that clearly states the purpose of the URL
  • Ex) "Contact Us" "Request a Free Quote" "Shop All Dresses"
• Page titles that clearly and concisely state the purpose of the page (the same applies to headings)
• Options for main menu navigation, search bar, and sitemap 

Input Modalities

This facet deals with making it easier to accomplish functions with a keyboard. One of the easiest ways to incorporate this is ensuring that path-based gestures can be done with a single pointer.

Understandable Guidelines 

This is one of the most clear-cut WCAG principles and is also one of the easiest to implement. 

Readable 

Content is not overcomplex for your target audience, avoids niche or uncommon abbreviations, and aims for making your content easy to read and follow.

Predictable 

Make your web pages function in standard, predictable ways and are not overcomplex or unusual. Navigation and functionality should also be clear and consistent throughout your entire website. 

Input Assistance

This guideline deals with helping users avoid making mistakes on your website while also allowing them to correct mistakes they may make. Ways to account for this include:

• Input errors (such as in submission forms) are clearly identified and the user is given details on what the error is and how to correct it
• Clear labeling and instruction when the user is required to input information
• Option for help
  • Live chat, FAQs, troubleshooting page/info
• Error prevention: There are 3 main forms of error prevention when it comes to users submitting information 
  • Reversible (submissions can be recalled and they can submit from the start)
  • Checking (submissions are checked for errors before they are submitted, allowing the user to correct any errors)
  • Review (users are prompted to review their submission information before submitting it)

Robust Guidelines

Robust guidelines are more complex and may require the assistance of web development services. The main success criterion includes parsing, name/role/value, and status messages. If you are not versed in markup languages, the best way to address this category without employing a web development company would be to focus on the above areas, which are more straightforward. 

Additional Benefits of Being WCAG Compliant 

The most important and inherent benefit of being WCAG compliant is making your website content more accessible to the entire population. However, it does include other user benefits as well as SEO benefits. 

Many of the WCAG guidelines (such as clear navigation, layout, etc.) also contribute to the overall user-friendliness of your website. It encourages users to stay on the page longer, interact more with your content, and avoid frustration and confusion. 

There are also many search engine optimization benefits that come with WCAG compliance. Alt text on images can help your images pop up under the "images" section in search engines. Descript anchor text on your hyperlinks helps Google crawlers better understand your content. Specific headers and bolded key points can help boost your website's search engine rankings. And the list goes on and on!

Is your Website WCAG Compliant?

Global Reach offers expert website management services to ensure your website is meeting WCAG guidelines. Global Reach will scan your website, find gaps in compliance, and fix them for you! With our website hosting services on our CMS platform, SiteViz, we ensure your website is Section 508, WCAG, and ADA compliant, unlike generic website templates on the market. 

Get a FREE WCAG Compliance Scan!