Web Content Accessibility Guidelines (WCAG): A Brief Run Down

November 18, 2021

When considered at the start of a project the Web Content Accessibility Guidelines fit very well into modern frameworks. The trick is to know what WCAG is asking for and build your systems around that. You'll come to realize the guidelines provide more help than hinderance.

We all want everyone to be able to use, and find enjoyment from using, our web applications. It’s great when we build something that is intuitive and easy for someone to use. The Web Content Accessibility Guidelines (WCAG) allow us to do just that for a wide audience.

Below are the 4 basic principals of WCAG and the major points for each.

Perceivable

In terms of the web visual guides are the norm, but not everyone is blessed with great eyesight. Some folks have poor vision, or no vision, and need to know how to use your website.

1. Provide text alternatives for non-text content.

   Make use of that alt tag, or provide a link to a page that provides a text based description of that great looking table you created in Photoshop.

2. Provide captions and other alternatives for multimedia.

   Uploading a “how to” video to help users around complex concepts? Great! Be sure to include a text alternative so that users can have it read to them by their browser’s built-in reader, or screen reading software. Think of it as an audio book that someone can listen to as they perform other tasks.

3. Create content that can be presented in different ways, including by assistive technologies, without losing meaning.

   Your description of how to use the widget is awesome - a great piece of writing! But did you consider structuring the content into headings and use strong or italics where you feel emphasis should be placed? What about your users? Do they all read from left to right, or is your audience culturally diverse, where some prefer to read from right to left, or top to bottom?

   It’s the little things you can add that help turn that frown upside down for people!

4. Make it easier for users to see and hear content.

   Did you know that as people age their eyesight deteriorates? Really, it’s a thing! Providing text that can be resized, a good contrast between foreground text and background colours, and text (not images of text) that a screen reader is able to read can really help people out.

Operable

For your application to be awesome it has to be a joy to use. WCAG simply helps your application expand this joy to a wider audience.

1. Make all functionality available from a keyboard.

   As people fiddle with your application, they’ll get good at it - really good at it. So good that they’ll dump the mouse and go with keyboard tabbing (it’s sooo much faster). Be sure they can by ensuring there are no keyboard traps (ie, where you can’t tab out of) and they can easily see what’s in focus.

2. Give users enough time to read and use content.

   Hey, slow down there “Quick Draw McGraw!” not everyone is as quick to see what’s going on! When you present users with a message (such as a success or error message) be sure they have enough time to read it. Remember, people are busy and there could be distractions around them; if they turn back to you app it may be too late for them to see what happened.

   A great option is to give them the power to close the message, or flip to the next page of content.

3. Do not use content that causes seizures or physical reactions.

   No flashy content! I repeat, no flashy content! Everyone is different and designs are subjective. What one person thinks is the best design ever, would turn someone else's stomach. Subtle designs are usually best all round.

4. Help users navigate and find content.

   It’s not just about where someone is on your application; it’s also about where a link will take them. Be descriptive so that people know where they are (use breadcrumbs for example) and where they are going (“Delete John Doe’s Profile” is better than just “Delete” - remember that title tag!). Also, provide shortcut links that allow users to jump past certain parts of your site to where they’d like to go.

5. Make it easier to use inputs other than keyboard.

   A keyboard, a mouse, a stylus, your finger, your voice - the ways you can provide input to an application are growing - don’t stunt your applications growth by thinking of only a few input devices. Responsive link text size, button size and providing enough time for someone to click with help ensure that those who are all thumbs, or are using the wrong side of the stylus, have a chance to correctly navigate your app.

Understandable

You’ve built an amazing application. It doesn’t just execute it’s tasks, it does so seamlessly and effortlessly. But, do your users understand how to use it?

1. Make text readable and understandable.

   Are you using acronyms without defining them? Do your instructions assume the reader has a certain level of competency, but you failed to mention what that level is? Are you writing jargon only certain people know, but maybe not all your users know? Keep your text as short, simple and as clear as possible - your users will thank you.

2. Make content appear and operate in predictable ways.

   Here’s an important item to remember: by default screen readers read content from left to right, top to bottom. If your “SAVE” button is at the top right of the page (just after your navigation links) and the instructions and actual form are below it, you’ve already confused someone using assistive technologies such as a screen reader (“Save? Save what? I haven’t entered anything yet.”).

3. Help users avoid and correct mistakes.

   Be sure to provide examples on how to fill out a form. For example, specify the format of a date field - better yet, use a date picker instead of a plain old text field! See? WCAG isn’t a bore. :)

   Also, don’t leave users hanging about what didn’t work - always provide them with an explanation of what caused the error and how they can correct it.

Robust

Quite simply, don’t code for one browser (some apps only work in Internet Explorer for example) and don’t limit yourself to a specific screen size. Ensuring your application is responsive helps ensure it works on devices of different sizes.

1. Maximize compatibility with current and future user tools.

   We may have an general idea of where we are going in terms of technology, but no one knows for sure. Your best bet is to code your application so that it works across browsers, follows recommended standards, and works well when resized.

In Summary

I hope that the content above has helped you better understand the Web Content Accessibility Guidelines, or at least, made any frown you might have turn slightly upside down.

WCAG goes a lot deeper than what I’ve described above helping you create accessible web sites and web applications (consider what I’ve provided a simple overview). It’s implementation, when planned at the start, can enhance a person’s experience with your application, making their day just a little bit brighter.