Using Web Content Accessibility Guidelines to Improve Your Website

Posted by in Accessibility, Digital Marketing, SEO and SEM Strategy, Software Development tagged with

In January 2018, new U.S. regulations took effect for making federal websites accessible to people with disabilities. In this post, we explore how you can use the Web Content Accessibility Guidelines (WCAG 2.0) to make your website more accessible for everyone.

There are an estimated one billion people around the world with some sort of disability. In the U.S. alone, that number could be as high as 20% of the population. Many disabilities can make it difficult for people to browse the web. In these cases, people often rely on assistive technologies, such as screen readers, magnification software, text readers, head pointers, and motion or eye trackers to access content.

Unfortunately, if your website or digital product doesn’t include features to support these assistive technologies, it can be difficult, or sometimes impossible, for people with disabilities to have any sort of rewarding experience with your content. This has led to an increasing number of lawsuits and subsequent rulings by the U.S. Department of Justice (DOJ) in favor of plaintiffs. On January 18, 2018, new regulations under the authority of Section 508 of the Rehabilitation Act will require websites and content of federal agencies to conform to WCAG 2.0 AA accessibility standards.

How Will the New Federal Regulations Impact my Website?

While the regulations taking effect in January are specifically for federal agencies, this ruling leaves many wondering how pending similar legislation could impact their own websites. The DOJ has stated that it will publish its proposed ruling for all “public accommodations” websites in 2018, which will no doubt have broader implications for the majority of websites.

The term public accommodation could apply to most things, depending on who is making the interpretation. Generally, however, this would refer to consumer, retail, or any business the general public should be able to use, understand, and access easily. If that’s your business, the message is clear: mandatory accessible website compliance is on the near horizon.

We have seen an increasing number of website accessibility requests from clients over the past year. Though the public accommodations ruling has not yet been given (as of this writing), to be safe, we recommend that our clients adopt the Web Content Accessibility Guidelines 2.0, levels A and AA as quickly as possible. So, what does that mean exactly? Let’s take a look.

Using Web Content Accessibility Guidelines to Improve Your Website

The World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG) provide a framework for website owners to begin the process of making their content more accessible to people with disabilities. WCAG 2.0 covers a wide range of recommendations for making online content more accessible. The guidelines come in three flavors:

  1. A: The easiest level to achieve, this improves accessibility for most sites by making it easier for browsing readers to navigate a site and translate its content, but it is still pretty basic.
  2. AA: This level makes content accessible to people with a wider range of disabilities by providing guidance on color contrast, error identification, etc. This is the level most encouraged by the W3C and the DOJ.
  3. AAA: The highest level of accessibility compliance, this makes content accessible to the widest range of people, but it can significantly alter the design of a site. Government legislation doesn’t typically require this because it’s not always possible to conform.
accessibility levels for WCAG 2.0

Web Content Accessibility Guidelines Principles

WCAG 2.0 is driven by four primary principles that are not technology-specific.

  1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
  2. Operable: User interface components and navigation must be operable with a variety of tools.
  3. Understandable: Websites must use clear, concise language and offer functionality that is easy to comprehend.
  4. Robust: Websites should work well enough across platforms, browsers, and devices to account for personal choice and user need.

While the four principles above are meant for people with disabilities, it should be noted that websites adhering to these principles also tend to make web content more usable to people in general and often easier for search engines to crawl as well. Embracing digital accessibility as part of your overall digital strategy is a more sustainable strategy as well.

Let’s explore these principles in a bit more detail. Each includes several guidelines for implementation meant to provide a foundation for getting started. We’ll cover these guidelines in greater detail in future posts, but for now here are some basics. We should note that this is by no means a comprehensive list. It’s just meant to get you started down the path to improving your site.

Perceivable Web Content

Your content needs to be presented in ways that are perceivable to a wide variety of users with their own unique circumstances and who are using an array of devices, browsers, and assistive technologies to access your content.

How do I Make my Website More Perceivable?

Here are tens ways to make your website content more perceivable to users of all abilities.

  1. Add descriptive alternative text to all images.
  2. Give users the ability to resize text without breaking page layout or structure.
  3. Allow users to easily turn audio or video off, if irrelevant to their experience.
  4. Always add captions and transcripts to audio or video content.
  5. Avoid Flash or other proprietary technologies.
  6. Display content in sequential order with a visual hierarchy that is easy to understand.
  7. Keep layouts simple and intuitive.
  8. Use text in addition to colors and shapes to provide context when possible. Colors or shapes are not the only ways people determine meaning.
  9. When flattening text into images, be sure it is for decoration only and not to convey meaning. As above, use alternative text whenever possible.
  10. Create high contrast between text and background colors.
alternative text options in WordPress
When uploading images to WordPress, be sure to include clear descriptions in the alternative text field of every image.

Operable Web Content

Users of all abilities must be able to navigate your content and user interface components in ways that make sense to them. Not everybody uses a mouse. Not everybody has a touchscreen. Be sure everyone can navigate your content with ease no matter the devices they use.

How do I Make my Website More Operable?

Here are five ways to make your content more operable across devices and platforms:

  1. Make all functionality easily available from a keyboard.
  2. Provide users with enough time to read and use content. Avoid quick moving banners and allow users to return to content or stop motion altogether.
  3. Do not design content in a way that is known to cause seizures.
  4. Provide ways to help users navigate, find content, and determine where they are. Descriptive page titles, sequential order of pages, understandable links, and ability to bypass blocks of content that are on multiple pages can help with this.
  5. Include breadcrumbs and other navigation components that help users easily understand where they are.
Example of breadcrumb navigation on The Guardian's website
The Guardian offers helpful breadcrumb navigation on its website so users always know which section they’re in.

Understandable Web Content

Your content and functionality should be easily understood by users. Embrace clarity and concise communication at all times so that content and functionality are easy to comprehend.

How do I Make my Site More Understandable?

Here are four ways to make your existing website more understandable:

  1. Improve the readability of text-based content. Avoid overuse of abbreviations, jargon, and a content reading level higher than 9th grade.
  2. Make site pages appear and operate in predictable ways. Make sure navigation and component functionality are consistent across your site and be sure content doesn’t change unless a user does something specific to achieve an expected result.
  3. Help users avoid and correct mistakes by offering input assistance. Clear instructions and suggestions for rectifying common error types can go a long way in helping users of all abilities quickly get what they need.
  4. Include form validation that clearly explains what users should enter into fields.
Etsy form validation messages
Fellow B Corp Etsy offers helpful hints when users don’t properly fill in form fields.

Robust Web Content

Maximize your website or digital product’s compatibility with current and future user agents, including assistive technologies, to ensure you meet criteria for the Robust guideline.

How do I Make my Site More Robust?

Following web development standards will help you maximize your site’s compatibility with assistive technologies. A standards-based website with clean code will offer a more robust experience across a wider array of devices and platforms.

Use the W3C’s markup validation service to ensure your site complies to current web standards and be sure to clean up any incomplete tags or duplicate elements.

W3C Markup Validation Service
Not sure if your site follows web standards? Try the World Wide Web Consortium’s Markup Validation Service. It’s free!

So How Do I Get Started?

Making your website’s content accessible and useful to as many people as possible, including people with disabilities, is a morally responsible—and soon to be legal—thing to do. It’s not possible to determine how many people with disabilities use your site, so it’s better to err on the side of caution and make it accessible to everyone. By offering people better experiences, they are far more likely to become repeat visitors and passionate advocates for your brand. Plus, following the above guidelines will ensure your content can be more easily crawled by search engines, which helps people find your content. Most importantly, why alienate as many as one billion people in the world when you can be sure your content is as accessible as it can be?

Want to get started? Using the guidelines above, take these steps:

  • Accessibility Audit: While no replacement for the manual audit of an entire site, online accessibility tools can quickly give you a baseline from which to gauge time and workload. Try AChecker or WebAIM’s Wave tool for starters.
  • Create a plan: Outline priorities and timelines for each of the above guidelines. It is inevitable that some things on your checklist will be easier to implement than others. Prioritize.
  • Implement changes: Make improvements in small, manageable chunks based on your available resources.
  • Train your team: Get company stakeholders on board with keeping your website compliant.
  • Embrace transparency: Make sure everyone knows this is a priority for you and your organization. If you’re in the process of transitioning your website, post something saying as much. People will appreciate knowing that.

While this is a simplified description of what is an ongoing and time-consuming process, it covers the basics and can help your organization and its stakeholders build consensus on priorities.

Need some help? Mightybytes offers website accessibility services to help organizations ensure their content is accessible, inclusive, and adheres to WCAG 2.0 at whatever level makes most sense. If you need help making your site compliant, please feel free to contact us.

Get Our Web Accessibility Pocket Guide

This free download includes an introduction to web accessibility and a handy checklist of ways to improve it on your site.

Download the Pocket Guide
Tim Frick founded Mightybytes in 1998 to help mission-driven organizations solve problems, amplify their impact, and meet business and marketing goals. He is the author of four books, including Designing for Sustainability: A Guide to Building Greener Digital Products and Services from O'Reilly Media. Follow Tim on Twitter or connect with him on LinkedIn.