Explaining WCAG principles: Understandable & Robust

This is Part 4 of a series of blog posts about Accessibility. In part 3 we discussed about making our web content Operable, while in part 2 we talked about making it Perceivable. Don’t forget to check part 1 to know what is going on.

Luis Talamantes
UX Collective

--

A light bulb inside the head of someone

The Understandable and Robust guidelines are short ones, so I decided to include them on a single post.

They are easy to understand and implement, altho some guidelines are more of a dev oriented task. But don’t worry, I will make sure to provide all the information needed so you can make sure the guideline is being fulfilled.

Making your web content Understandable

As the name suggests, we need to make sure that our web content is understandable by people with disabilities so they can use our interfaces.

Guideline 3.1 Readable

Our web content must be put in a way that is easy to understand and not too complicated. Using simple words and phrases, but descriptive ones, are better for people who have a hard time understanding what they read. Also, it is much more comfortable for screen reader users to understand the site.

The Plain Language Action and Information Network (PLAIN) gives us best practices we can follow when adding information to our sites[1]. According to them, we must use:

  • Plain language
  • Body copy must be clear and straightforward.
  • Use strong and simple words.
  • Short paragraphs.
  • Organized information.
  • Use a conversational tone.

When screen readers read out loud the information, they have a certain predetermined accent. For example, it could be programmed to have a british accent. It becomes hard to understand when it encounters a text that is set in another language. Try imagining someone that only speaks English to try and read a paragraph in French.

For this, we use the “lang” attribute to identify the language and content on the web. Using it will help screen readers set the desirable tone and pronunciation.

Lines of code explaining the Lang attribute
An example on how the “lang” attribute is used in the code for specific languages

Guideline 3.2 Predictable

Create a predictable navigation and consistent navigation schemes

This guideline is all about helping the user know what to expect before going to a section on our site. Like many of the guidelines, this makes life easier for all groups of people, not only the ones with disabilities.

Avoid having unexpected changes in the context. Pay attention to this when the user interacts with our site. Remember: the user doesn’t like surprises. He wants to feel in control of the situation and to know what is going on and what is going to happen.

Correct communication of error messages
An effective error message next to one that is not.

Making your web content Robust

The content must be robust enough that it can be interpreted by a wide variety of users, including the ones that use assistive technologies.

This principle is targeted at developers, but we designers have the duty to make sure that the guideline is fulfilled. Lets talk about how:

Guideline 4.1 Compatible

Write valid and clean HTML code using correct semantic.

There are many tools on the web for validating the HTML code. A popular one is Google Lighthouse that runs tests on webpages to validate them in terms of Accessibility, loading speed and optimization[3].

Google’s Lighthouse report
An example of how Google’s Lighthouse generates a report on a web content

This guideline also requires that content statuses must appear on the page with a message without having to reload the page. On a social media app, new posts must appear without the need to refresh the page with a label of the new update. This is to let screen readers know of the status change.

Conclusion

I told you the Understandable and Robust principles were short ones. Altho they are more dev oriented, it is important that we know about them to make sure they are met. And, if our team is not aware of this guideline, we must understand them first before we preach the ways of Accessibility.

When learning something new, either by reading a book or completing a course, I always get this urge to share my knowledge with others. Like I said at the beginning of Part 1, I recently finished a course about Accessibility. It is a very important topic that is gaining more and more attention, so the urge to share what I learned was over the clouds.

Now you know everything there is to know about Accessibility! At least the minimum requirements. If you wish to learn more or refresh some information, feel free to revisit this series whenever you feel like or visit the WCAG web page[4].

I’m slowly but surely becoming an Accessibility nerd, so shoot me a message if you have any questions or doubts about the topic. Also if you just want to talk about the subject, I’ll be more than glad to get to talk with you!

--

--

UX Designer focusing on Accessibility🧏🏻‍♂️ | Love movies🎞 dogs 🐶 and eating cookies🍪 | “People ignore designs that ignores people.” — Frank Chimero.