Introduction
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.
About all•Access
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.
Ep. 1 Recap - POUR
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?
Topic Intro - “Success Criteria”
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.
Examples
Text alternatives
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.
For videos and audio files, you have a few options. One way to provide a text alternative is to include captions. Captions are subtitles that appear on the screen and give a written version of the audio, both dialogue and relevant sounds. This way, users who have hearing disabilities can still understand the audio content.
Another option is to provide a transcript which is a written version of the audio or video, and it can be provided as a separate document or on the same page as the video. This way, users who are deaf and hard of hearing can read along and understand the content.
And, it's important to note that when the non-text content is purely decorative and doesn't provide any information, you can leave the alt tag empty to indicate that the image is not providing any information. This way, screen readers will ignore the image and not read anything to the user.
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.
Specific criteria: Text alternatives
There are a few WCAG 2.1 success criteria that deal specifically with text alternatives.
One of them is 1.1.1 Non-text Content. This success criterion requires that all non-text content, like images, videos, and audio files, have a text alternative that provides the same information. This means that when a screen reader comes across an image, for example, it should be able to read the alt text and give the user an idea of what the image is about.
Another success criterion that deals with text alternatives is 1.2.2 Captions (Prerecorded). This success criterion requires that all prerecorded audio content, like videos, have captions that provide a written version of the audio. This way, users who are deaf or hard of hearing can still understand the content of the video.
Then, 1.2.3 Audio Description or Media Alternative (Prerecorded) requires that all prerecorded video content has an audio description or a media alternative that provides the same information. This means that users who are visually impaired can still understand the content of the video.
And finally, 1.2.5 Audio Description (Prerecorded) requires that all prerecorded video content has an audio description that provides a verbal description of the visual content. This way, users who are blind or have low vision can still understand the content of the video.
Keyboard and tab navigation
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.
Specific criteria: Keyboard and tab navigation
There are of course a few success criteria that deal specifically with keyboard accessibility.
One of them is 2.1.1 Keyboard. This success criterion requires that all functionality of the website can be operated using a keyboard without requiring a mouse or other pointing device. This means that all interactive elements, like buttons, links, and form fields, can be accessed and operated using the keyboard.
Another success criterion is 2.1.2 No Keyboard Trap, which requires that the website does not trap users in a modal dialog or other non-webpage element, and users can return to the main webpage by using the keyboard.
Then, 2.4.7 Focus Visible, which requires that a clear visual indication is provided when an element receives focus, like a highlighted button. This way, users can easily see where they are on the website and know which element they're interacting with.
Finally, 2.4.13 Content on Hover or Focus, which requires that the content does not disappear when the user interacts with an element using the keyboard, for example, by hovering over it.
These criteria are important to keep in mind to ensure that all functionality can be accessed and operated using a keyboard, without trapping the users in non-webpage elements, providing clear visual indication of the focused element, and ensuring content does not disappear when the user interacts with it using the keyboard.
Distinguishability
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.
The standard for contrast ratio is defined in success criterion 1.4.3 Contrast (Minimum) which is set at 4.5:1 for normal text and 3:1 for large text (14 point or greater and bold text or 18 point or greater). This means that the text colour should be at least 4.5 times darker than its background colour for normal text and 3 times darker than its background colour for large 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.
Navigation, Input assistance and more
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.
Specific criteria: Navigation and Input assistance
For Navigation, some specific criteria are:
2.4.1 Bypass Blocks: This success criterion requires that a mechanism is provided to bypass blocks of content that are repeated on multiple web pages. This means that users can skip repetitive navigation and go straight to the main content of the page.
2.4.2 Page Titled: This success criterion requires that web pages have a title that describes the topic or purpose of the web page. This way, users can understand what the page is about and where they are on the website.
For Input assistance, there are:
3.3.2 Labels or Instructions: This success criterion requires that form controls and input fields have clear and visible labels or instructions that describe the purpose of the control or field. This way, users know what information is required and how to complete the form.
3.3.3 Error Identification: This success criterion requires that errors are identified and described to the user in a clear and understandable way, and that the error is clearly associated with the input field in question. This way, users know if there's an error in their input and can correct it before submitting the form.
3.3.5 Help: This success criterion requires that help is available for users who need it, such as context-sensitive help, a help button or a link to a help document. This way, users can easily find the information they need to complete the form or understand the instructions.
These criteria ensure that users can easily bypass repetitive navigation and understand the purpose of the web page, as well as provide clear and visible labels and instructions for form controls and input fields and make errors and help easily identifiable, which makes it easy for users to complete forms and input data correctly. These criteria are important for creating an inclusive website that can be used by everyone regardless of their abilities.
Where to go from here
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 / blog 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 / blog 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.
There’s no “magic wand” solution
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.
Sign Off
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.
