WCAG 2.1 in 7 Perspectives

For those who don’t work in the trenches of digital accessibility, the guidelines can seem confusing or overwhelming. The fact is, it’s not necessary to know the details associated with the 73 individual Web Content Accessibility Guidelines (WCAG) 2.1 success criterion in order to make design decisions and ultimately contribute to a website planning session. 

Options for Learning About WCAG 2.1

Before we share the seven perspectives, we want to acknowledge that the World Wide Consortium has organized the WCAG criterion into four principles. 

The four WCAG principles are:

• Perceivable - “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”
• Operable - “User interface components and navigation must be operable.”
• Understandable - “Information and the operation of user interface must be understandable.”
• Robust - “Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.”

This article shows another way to shuffle the criterion deck with the following perspectives:

1. Physically Interacting with a Web Page

When you visit a web page, you scroll or swipe to move the page through the browser window. When you find a link you want to follow, you click or tap. If you couldn’t do either, what would you do? Perhaps you would:

• Use keyboard keys,
• Use mouth sticks, or
• Use voice recognition.

In order to make these other options possible, you need to give users the ability to ”touch” the page and for their assistive technology to understand your code. For example, you need to:

• Enable a visitor to skip to the most important aspects of the page right from the start;
• Plan the path that the tab key on the keyboard will follow;
• Ensure a visitor knows where the tab has landed;
• Provide alternatives to common mobile finger gestures such as zoom; and
• Allow site visitors to choose their own input mechanisms.

One way to imagine these concepts is to picture yourself in a maze. You can only “see” what is in front of you. Where do you go? Once you learn the path to the center of the maze, you can visit it anytime. However, what would happen if someone changed the layout of the maze from day to day? You would have to start over, learn the path to the center again and again.

Consistent page layouts provide consistent in-page navigation. Sometimes layout creativity from page to page can cause issues, versus offering visitors a new experience.

Take our class on Drupal Layout & Theming.

2. Understanding the Context of a Web Page

With eyes that see, you can discern information from a web page without consciously thinking about it. You take in the layout (e.g, portrait or landscape) of the page and quickly identify the:

• Header and information about the site owner;
• Title of the page and if it is a topic landing page or one of your many articles;
• Menus that provide insight into the information architecture of the site; 
• Search functionality, as well as other ways to find the content you need;
• Sidebars that contain various items such as lists with purposeful links; and 
• The main content and its article, event, etc.

When you scroll down the page, you might find that the content is organized into subtopics, allowing you to quickly discern whether the blog post will be of interest.

Then, as you dive deeper into the site, past the homepage, to a landing page, to a bit of content, there might be hints to remind you where you are. With a well-planned site, you will see consistent layouts, allowing you to anticipate which section of the page contains objects with which you want to engage.

WCAG 2.1 provides guidelines and criteria designed to deliver a similar experience for those who can’t rely on eyesight to navigate a page.

3. Seeing the Text on a Web Page

There are two common visual challenges to which many of us can relate: the need for corrective lenses and color blindness. Even with corrective lenses there might be times when they aren’t enough.  Or, even if you aren’t color blind, there might be times when you cannot read some text sitting on top of an image or color background. 

There are WCAG 2.1 criteria focused on helping you to enable visitors to make adjustments to your text so that they can see it. As for color (images or styled), the objective is to ensure enough contrast. 

A contrast example that is easily overlooked is that of links. A blue link works well on a white background, however, that color might not work when it appears on top of a block of color. So, some planning will have to take place regarding the styling of links across the multiple sections of your page or else, some of your links might visually disappear.

4. Understanding the Text on a Web Page

There are two perspectives to the idea of understandable text: the meaning of words and interpreting meaning from the way it is displayed. 

Interpreting the Meaning of Words

We don’t need WCAG 2.1 to motivate us to write well. However, on occasion, even the best writers forget some of the basics such as: 

• Using unusual words (e.g., regional terms better understood by the locals);
• Abbreviating without providing insight as to the meaning of the abbreviation;
• Forgetting the reading level of your audience (e.g., writing to subject matter expert versus someone less informed).

Then, there are writing aspects that are easy to overlook such as the use of heteronyms. The one that often gives me pause is lead. 

• Lead, pronounced LEED, means to guide. 
• Lead, pronounced LED, means a metallic element.

It’s also important to, declare the language of your content. Even if you drop a foreign language into the middle of your content, you need to let the reader know.

Interpreting Meaning from the Display 

What if you couldn’t see visual cues concerning relationships among headers and sub-sections? How would you know there were parent/child relationships?

That’s where header elements versus <strong>, come into play.

Visual and/or auditory cues are just one way to convey meaning. Often times, the order in which content is presented carries meaning. Imagine you have two blocks of content: step one and step two. They appear next to each other in order. 

Here’s the test. Strip away the styling so that they do not appear next to each other. Are they still in the right order? Make sure they are.

5. Interpreting Media via the Web

Images and video are probably the first types of media to come to mind when media is mentioned. There are also shapes (e.g, CSS-based checkmark), animations, and audio files.

Bottomline when it comes to non-text items: anything that is not text needs to be explained or declared as decorative. 

Images

An image might be worth a thousand words, but you can no longer rely on images to convey meaning. If you are using the image to convey 500 out of the 1,000 words, include the 500 words on the page. You have two strategies: a separate “long description” block of text or simply include the information in your narrative.

Video

As for video, you need closed captions at a minimum, be it pre-recorded or live broadcast. Since you have the text, include it in a transcript. Check the bottom of this resource page to see the "Accessibility Video Series" by the University of Wisconsin-Madison.

Audio

If you upload a podcast to your site, you need to include a transcript. In both video and audio transcripts, you need to include speaker identification if there is more than one, as well as any sounds that convey meaning.

6. Controlling Media on a Web Page

In addition to video and audio player controls, you need accessible controls for items that blink, scroll, or move. There are several “if this, then that” conditions governing where, when, and how controls need to be implemented. 

If you have plans for anything with sound or movement on your page, you need to spend some time to ensure your page is accessible.

7. Using Forms on Web Pages

When you visit a page, it’s likely that the first form you see is a search field. Add a contact form and/or a newsletter signup form, and there is a chance that multiple accessibility issues are lurking.

There are three considerations when adding forms to your site:

• Labels
• Instructions
• Error management

When a label can be ambiguous, instructions can clarify. However, mistakes happen, so your forms need to help users correct their data entry. There are more behind-the-scenes coding requirements that make these perspectives accessible, but these considerations will get you started.

Conclusion

Making a website accessible isn’t just about code. It calls for a high degree of awareness each time content is added. Maintenance and auditing processes are essential to ensuring accessibility. Need further explanations or insights into accessibility? Contact us today.