Day 5 – WCAG 2.0 – Adaptable Content Guideline.

Introduction

The challenge of Day 5 was

“Read the 12 guidelines of WCAG 2.0. Write a short post on one of them”.

First of all, if you are new to WCAG 2.0, I suggest you check out this WCAG 2.0 Checklist. It’s very simple, it keeps in at headings level, and divide the success criteria according to the level (A, AA, AAA). So you get a good overview of the content. I’d like to thanks Sylwia Miśkowiec who tweeted about it, and reminded me of this page.

The second web page I would go to in order to go deeper with WCAG 2.0, is their Quick Reference Guide. What I love about it is that you can filter things that interest you, like “only level A & AA” or “Only PDF related”. Even without filtering it’s a nice way to browse the guidelines. And for each guideline you get the links for more details (“understanding”) and to the techniques to fix it.

And Finally, you can read the main document itself of WCAG 2.0.

Guideline 1.3 – Adaptable

I’d like to focus on the “Adaptable” Guideline which is part of the first section of WCAG 2.0 which is called “Perceivable”, and deals with how the page is perceived. The purpose of the “Adaptable” guideline is to make sure “content can be presented in different ways without losing information or structure”.  You can tell it’s an important guideline by the fact that all 3 success criteria here are at level A, and they are:

1.3.1 – Info and Relationships

1.3.2 – Meaningful Sequence

1.3.3 – Sensory Characteristics

The heart of this guideline is 1.3.1, and it basically says that you need to think about structure as a separate thing from the presentation. The most common example is of headings. The HTML of the page should reflect the fact that you have some headings on the page. And if you have a sub heading for the main heading it will be <h2> under <h1>. What you shouldn’t do, is use <h4> under <h1> simply because you wanted a smaller font for the sub heading. So if you want the <h4> style, you can always use CSS to style your heading the way you want, just make sure the structure is correct. There’s much more structure information that can be used on page, like using landmarks to define “main”, “banner”, “navigation” sections of the page.

The second success criterion, 1.3.2 talks about the order of navigation (and reading). Again, this is important in the context of structure Vs. presentation since there were many sites where CSS was used to change the order in which the content is displayed. This would lead to a situation where a person using a screen reader might hear it read in an order which is different from the one displayed.

Finally, 1.3.3 talks about not using terms like “the round button” or “the button on the right” since the user might not be able to see them. Btw, the “button on the right” is also very bad practice in today’s world where all sites are responsive and when browsing on mobile that right bar might appear at the bottom or may not appear at all. So we should also add information so that the object will be identified by any user. For example, if I tell you “the round button that says submit” (assuming only one submit button on page), then it’ll be a proper instruction. There’s a very similar success criteria that talks about not using only the color, under “1.4 – Distinguishable”.

Summary

WCAG 2.0 is very important to know. Get familiarized with the 4 different sections (Perceivable, Operable, understandable, Robust), and with the 3 levels of conformance. I recommend reading the techniques, they are clear and useful. Adaptable web page is important so that different people be able to experience the site in the same way as possible.

Anyway, better get know what’s in WCAG 2.0 soon, because WCAG 2.1 is just around the corner, as there a 2nd draft of WCAG 2.1 was already released.