This content originally appeared on WebAIM Blog and was authored by John Northup
Remediating a website’s accessibility barriers can be a daunting effort. As WebAIM’s evaluation lead, I’ve worked with scores of companies, nonprofits, universities, and school districts to help them close existing accessibility gaps and avoid creating new ones.
Naturally, one of the first questions a site owner asks is what they need to do. The answer invariably involves WCAG Level A and AA. But what about Level AAA? Since accessibility complaints–and laws, in the few places that have them–typically only mention Level A and AA, the AAA success criteria are seldom even considered. Even the WebAIM website isn’t completely AAA conformant, but there’s a lot of good accessibility and usability buried within AAA. Here are my own top four AAA success criteria that deserve consideration:
1.3.6 Identify Purpose
This success criterion, introduced with WCAG 2.1, requires HTML region tags or ARIA landmark roles. This is at the top of my top four list because it yields essential utility for screen reader users, it’s easy to implement and lightweight in the code–a significant payoff for a small investment.
Most pages have a visual structure with a block of content at the top (typically logo, navigation, search, etc.), a main content area, a footer, and sometimes sidebars with related information. Regions like <header>, <nav>, <main>, <footer>, and <aside> programmatically define the essential semantic structure of a page. Screen reader users can easily navigate among these major page areas. Most recently, <search> has been added to the family, although not all browsers convey its semantics to screen readers yet.
If you’re a site owner, you’re probably using regions already, at least to some degree, so you may already be meeting this success criterion without even realizing it. If not, it may just take a little fine-tuning to get there–for example, ensuring that all content is contained within a region, with nothing falling through the cracks.
1.4.8 Visual Presentation
I love this one because it promotes clean, airy visual representation of paragraph text. There can be such a temptation to cram as much information “above the fold“ as possible that we can wind up alienating sighted users with crowded content that feels visually uncomfortable. And while the uppermost content does tend to get the most attention, users will scroll down if they feel that they are getting closer to what they want, or more of what they want.
This success criterion requires users to be able to view paragraph text on lines that:
- are no more than 80 characters wide.
- are not fully justified (no, we do not need to make websites look like newspapers).
- have line spacing of at least half the text height and paragraph spacing 1.5 times line spacing.
- do not require horizontal scrolling if the user doubles the font size.
- have defined or inherited foreground and background colors.
Now, you may well ask, how can we guarantee, in CSS, that a column will never exceed 80 characters unless we are using a monospaced font, which, of course we are not? The answer lies in the WCAG sufficient techniques, particularly Technique C20: “Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized” (emphasis added). In other words, 80 is not a hard number, and we don’t even necessarily have to limit the width to 80 characters as long as the page’s layout doesn’t break when the user narrows their browser to create a view that averages 80 characters wide.
Also, since the horizontal scroll prohibition is also covered in Reflow – at Level AA – that’s another easy item to check off the list. As for the bit about colors, if you are defining a foreground and background color in CSS, and you almost certainly are, then that part is taken care of.
2.4.9 Link Purpose (Link Only)
In our evaluations, we often see call-to-action links that say things like “read more“, “shop now“, or other generic phrases repeated across a page. As a visual user, there is some additional effort required to associate those ambiguous links with the nearby text that describes them. If I were just hearing those links in a screen reader while navigating from one link to the next, I would hear, for example, “read more link”, “read more link”, “read more link,” and so on. The link text itself doesn’t tell me what I would be reading more about.
At Level AA, Link Purpose (In Context) is satisfied if the user can figure out the link’s purpose by hunting around the vicinity of the link. But we always flag ambiguous links like this in our A/AA evaluations as a potential issue because of the extra burden it puts on screen reader users to explore the context of each and every one of these links.
At level AAA, Link Purpose (Link Only) requires link text to be specific. Sometimes, rewriting text to meet this rule is easy and actually results in more efficient text: Consider the difference between “Free shipping on orders of $100 or more. Learn more.” and “Free shipping on orders of $100 or more.” Sometimes it means removing a call to action link and instead linking a preceding heading – which does get pushback sometimes from designers who feel that a discrete call to action results in more engagement. In that case, we can recommend keeping the call to action links but making their text more specific.
Even though meeting the success criterion requires a bit more of the designers and content creators, we feel the effort is warranted, based on the impact to screen reader users.
2.4.10 Section Headings
In our many screen reader user surveys, respondents have consistently told us how important headings are to their navigation experience–and it just stands to reason. As a visual user, do I read each and every word on each and every web page I come to? No, of course not. My eye scans the page for those big, bold segments of text that describe content that follows them. Screen reader users are no different, though their scanning is not done visually. Over two-thirds of screen reader users surveyed tell us that headings are their primary way to explore a page. Yet, although success criteria at Level A and AA dance around the topic of headings, nothing specifically requires headings to be used until Section Headings at Level AAA.
Section Headings rounds out my top four list because headings are so widely embraced by designers and users alike. My team hardly ever encounters a webpage that has no headings at all. We do, however, encounter instances of skipped heading levels, or pages that either have no <h1> heading or multiple <h1> headings (ideally, every page should have exactly one), but these are not failures, per se.
In Conclusion
Although it’s easy to dismiss everything in Level AAA as “the icing on the cake,“ there’s a lot there that has a measurable benefit on users, without placing an undue burden on designers and developers. I encourage you in your projects to consider the full breath of WCAG instead of just the level A and AA success criteria. Even though total AAA conformance may be a stretch, much of it is within your reach.
This content originally appeared on WebAIM Blog and was authored by John Northup
John Northup | Sciencx (2023-09-29T14:21:14+00:00) Four Reasons to Give WCAG AAA a Second Look. Retrieved from https://www.scien.cx/2023/09/29/four-reasons-to-give-wcag-aaa-a-second-look/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.