Access & A11y(s)

2. Digital Accessibility Success Criteria 101

Episode Summary

Let's explore the basics of meeting success criteria when creating a digitally accessible website (or other media)!

Episode Notes

Timestamps:

Resources:

Web Accessibility Initiative. "Web Content Accessibility Guidelines." June 5, 2018. website. https://www.w3.org/TR/WCAG21/. Accessed February 9, 2023.

Music:

Twists & Turns | The Paul Dunlea Group

Episode Transcription

This is the All Access podcast Access & A11ies. My name is Rowan; I’m the co-President and Director of Communications for All Access.

The goal of Access & A11ies is to attempt to break down any digital accessibility topic under the sun to answer any and all of your questions around making digital tools more accessible. Thanks for tuning in, and if you prefer to read along, make sure to find this episode’s transcript in the notes — along with any resources I mention.

All Access is an initiative focused on supporting organizations and business leaders in making their online presence and digital information accessible to everyone, regardless of ability or disability, device they’re using, or their location, be it sitting at home or on the bus. We make inclusive digital spaces through making new or retrofitting existing websites to meet WCAG’s standards for accessibility, training & consulting, and full or partial site assessments.

Now, let’s get started with today’s topic: Digital Accessibility Success Criteria 101.

Last episode we talked about the definition of Digital Accessibility, and somewhere in there I mentioned pour, POUR, which are four key words to keep in mind when aiming for digitally accessible content.

As a short recap, POUR stands for making your content perceivable, operable, understandable and robust. Making sure, for example, that the same content can be interacted with in several different ways in a comprehensible, intuitive fashion.

Today, I want to talk more about success criteria. Because POUR is a great umbrella to stand under, but when we dig a bit deeper, what is it really describing? What are the targets we’re aiming to achieve?

The W3C has whats called the Web Content Accessibility Guidelines, which I mentioned earlier, or the WCAG. In it’s current iteration which is version 2.1, the WCAG has three levels of compliance A, AA and AAA. Meeting the AA level success criteria is intended for most situations, and will be enough to allow most people to meaningfully access information. It’s also the usual standard for a website to be considered ‘accessibility compliant’.

And of course the success criteria are divided into those four main categories: perceivable, operable, understandable, and robust, and each category includes a set of guidelines that must be met in order to be considered compliant.

Focusing on the AA standard, what does it mean to be Level AA compliant?

In total, the WCAG 2.1 has 61 success criteria, and of those, 38 success criteria are AA level. The A level has 12 success criteria and AAA has 11 success criteria. And as you might have guessed, AA success criteria are intended to be more strict than level A but less strict than level AAA.

So! What does this mean for the website designer or developer? Well, each success criterion is a specific requirement that must be met and they're designed to address different aspects of accessibility. For example, some criteria focus on making sure that web content is perceivable to users who are blind or partially sighted, while others focus on ensuring that web content can be used by users with mobility-related disabilities. Those are just two examples but you might get the idea.

These criteria cover everything from the overarching design of the website to the text, images, and other media that appear on the page. They outline in detail how to make a website more accessible for everyone.

So let’s dig into what that means when it comes to the techniques needed to meet the success criteria.

First, let's talk about text alternatives on websites.

When we talk about non-text content, we're referring to things like images, videos, and audio files that can't be read by screen readers or other assistive technology. And, when you have non-text content on your website, it's essential to provide a text alternative for those who use screen readers — or even for people who prefer to hide images.

For images, you can use the alt attribute to provide a text alternative. The alt attribute is a piece of code that you add to the image tag, and it gives a brief description of the image. This way, when a screen reader comes across the image, it can read the alt text to the user, so they can understand what the image is about.

Providing text alternatives is crucial for making your website accessible for users who are blind or low vision. It allows people to perceive and understand the content of images, videos, and audio files. And, it's a simple step you can take to make your website more inclusive.

Now, there are good techniques for alt text but I’ll get into that in a later episode.

Next, we'll talk about keyboard accessibility. Keyboard accessibility is an important aspect of web accessibility. It means that all the functionality of your website can be accessed and operated using only a keyboard, without requiring a mouse or other pointing device. This is important because some users may not be able to use a mouse or other pointing device due to limited mobility, or they may simply prefer to use a keyboard.

When it comes to implementing keyboard accessibility, there are a few things to keep in mind. First, you want to make sure that all the interactive elements on your website, like buttons, links, and form fields, can be accessed and operated using the keyboard. This means that users should be able to navigate through the website using the tab key and activate buttons and links using the enter key.

Additionally, it's important to provide a clear visual indication of the focused element, like a highlighted button when it receives focus. This way, users can easily see where they are on the website and know which element they're interacting with. This is particularly important for users who are visually impaired and rely on screen readers to navigate the website.

Another important aspect of keyboard accessibility is to ensure that your site does not trap users in a modal dialog or other non-webpage element. This means that the users should be able to return to the main webpage by using the keyboard, and not only by clicking on a close button with a mouse, which would make it impossible to use the website for keyboard-only users.

So, keyboard accessibility is crucial for making your website accessible for users who have limited mobility or who prefer to use a keyboard. It ensures that all the functionality of your website can be accessed and operated using a keyboard, and provides a clear visual indication of the focused element, which makes it easier for users to navigate and interact with your website.

Next I want to talk about “distinguishability”. This is all about making sure that text is easy to visually perceive and understand. It's all about ensuring that there is a sufficient contrast ratio between the text and its background colour. The higher the contrast ratio, the easier it is for users to read the text.

It's also important to note that using colour as the only means of conveying information can create accessibility issues for users with low vision or colour blindness. For example, if you have red text to indicate that something is important, many users benefit from accompanying that red text with a corresponding symbol.

It's also important to ensure that your website uses enough colour contrast, not only in text, but also in other elements like icons, buttons, and interactive items, as well as in graphical elements like charts and graphs. This is outlined in success criterion 1.4.11 Non-text Contrast.

So, distinguishability is an important aspect of accessibility that ensures content is easy to perceive and understand, especially for users with visual disabilities. It's all about ensuring a sufficient contrast ratio between content and its background colour, and avoiding using colour as the only means of conveying information.

Specific criteria: Distinguishability

Some other specific are 1.4.6 Contrast (Enhanced) is another success criteria that requires that the visual presentation of the text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA) Large Text, Incidental, Logotypes, and text that are part of a picture that contains significant other visual content.

Then, 1.4.8 Visual Presentation, which requires that the visual presentation of the text is distinguishable from the background, in order to avoid using colour as the only means of conveying information.

4.4 Navigation, Input assistance and more | 07:00

Navigability is all about making sure that users can easily find what they're looking for and determine where they are on the website. It's important to use clear and consistent navigation throughout the website, like a navigation bar or a site map, so that users can find what they're looking for quickly and easily. Additionally, it's a good practice to provide a "Skip to main content" link for users to bypass repetitive navigation, so that users who use keyboard or screen readers can easily access the main content of the website.

Input assistance is all about providing clear and visible labels for form controls and input fields, clear instructions for completing forms and input fields, and real-time validation feedback to users when they input data. This ensures that users can correctly fill out forms, understand the required information, and know if there's an error in the input before submitting.

These success criteria are important for users with cognitive, motor, or visual impairments, as well as for users who have difficulty understanding complex forms or instructions.

So, that was a lot of talking! This episode has been about the basics of success criteria and website accessibility. There's a lot more to learn and understand in order to create an inclusive website that is truly accessible.

I’ve actually included a blog version of this podcast with a lot more detail if you want to check that out on our website at allaccess.dev.

Keep in mind that accessibility is a continuous process and that accessibility guidelines and best practices are constantly evolving. It's equally important to stay up-to-date with the latest developments in accessibility and to continually test and evaluate your website to ensure that it remains accessible for all users. Just a note, at the time of this podcast we’re working off of WCAG’s 2.1 version, but in a few months there may be updates to this content with the release of 2.2.

While the content in this podcast is a great starting point, it's just scratching the surface of accessibility so I encourage you to do some sleuthing around the World Wide Web Consortium. Their Web Content Accessibility Guidelines are available online for free and can be found on the W3C website; and I’ll include that link in the notes description.

I always say, something that is accessible for one person is inaccessible for another. Which makes this work all the more interesting and really just means we have to provide multiple ways of interacting with the same content.

There’s no automated accessibility solution that’s one-size-fits-all, or magic wand to make a website useable for everyone. So it’s all the more important to create systems and processes for working these steps into each project from the planning process.

Once again, this has been all•Access’ podcast Access & A11ies episode two: Digital Accessibility Success Criteria. I’m your host, Rowan King, and if there are any topics you want to hear more about in relation to digital accessibility, or if you want to reach out for any other reason, make sure to email us at info@allaccess.dev. Also, check out our website for more information on who we are, what we do, and neat facts about digital accessibility at allaccess.dev.

It's been fun talking at you and until next time on Access & A11ies.