Web Content Accessibility Guidelines Section 1A and 2A

Overview

The Web Content Accessibility Guidelines (WCAG) are an important resource for understanding how accessibility works in general and especially on the web. In this lesson, you will learn the standards these guidelines define and some of the rules they establish.

Goals

You have the following goals for this lesson:

• Learn what the Web Content Accessibility Guidelines (WCAG) are
• Learn specifically about 2.2 A in regard to WCAG
• Examine a web-page with accessibility issues and debug it

Warm up

Imagine you run an online store offering a wide range of products. Now think about the customer experience, from browsing and navigating to purchasing a product. What sort of challenges might a customer face? Consider users with diverse abilities and disabilities. How would someone with low vision interact with your site? What if a customer struggles to distinguish colors or relies on keyboard navigation instead of a mouse? Reflect on how the design of your website would impact those customers.

Vocabulary

You will be learning about the following vocabulary words:

Web Content Accessibility Standards

This lesson covers the following standards:

• WCAG 2.2 A Section 1: Focuses on content accessibility by requiring sufficient contrast, text resizing, and captioning, making elements distinguishable and perceivable.
• WCAG 2.2 A Section 2: Focuses on interactive elements ensuring they are easily identifiable and operable.

Explore

Think about the websites you might visit in a day. Behind many of them there is likely a team of developers and designers that crafted the version of the site you see to cater to what you want. This concept is known as user experience (UX) design. The basic idea is to ensure that users feel their needs were considered throughout the development and design process.

Creating a space that is usable by all people is the core idea behind accessibility. The Web has grown into a place for the widest range of people possible. Whatever hardware, software, language, location, financial status, and ability, there is a place on the Web for everyone. If your online store can be used by everyone, then everyone is a potential customer.

Accessible design is an important concept for designers to learn and understand so that their products can be used by all. Common guidelines designers use are the Web Content Accessibility Guidelines (WCAG), which focus on accessible design on digital products (particularly websites). WCAG is unusual in that it gives ideas in design, like how to structure a web page, but also serves as legal guidelines from the U.S. Department of Justice as of 2024 in Title II of the Americans with Disabilities Act (ADA) [1]. This rule introduces significant changes by mandating accessibility as the default in specific conditions. Beyond the U.S., the European Accessibility Act (EAA) [2] also applies, which came into effect in June 2025, further mandates accessibility across the European Union for digital products and services.

In this lesson, you will explore key guidelines and criteria of WCAG 2.2. Think of WCAG as a regulatory code for web accessibility, similar to an electrical code; it sets a baseline standard for what not to do. Put another way, it does not always give terribly useful guidance on how to make a product accessible to all, but it is helpful in understanding what can get in the way when making products that are accessible to all.

The design principles used in these guidelines can enhance any product, but in the U.S., accessibility guidelines are also legal requirements. If you work for any public entity or contract for a public entity, you would have to ensure these requirements are met. The compliance deadline for large public entities is April of 2026, and for small public entities, April of 2027, in accordance with the Department of Justice [1].

Government regulations typically require a digital product to conform to WCAG 2.1; however, WCAG 2.2 is simply an extension of 2.1. Even if there is a formal obligation to WCAG 2.1, using WCAG 2.2 as a target can provide improved accessibility and anticipate future policy changes while meeting the requirements of WCAG 2.1. Just as importantly, if your site is already 2.1 compliant then 2.2 is doable.

WCAG is structured in layers of guidance, starting with an overall principle, followed by general guidelines, and then in theory what are testable success criteria. Also, WCAG provides a collection of sufficient techniques and failures of a particular success criterion. However, it is important to recognize that WCAG can be somewhat subjective and open to interpretation. Reasonable people might disagree on the meaning or interpretation of WCAG requirements, and even the Department of Justice [1] strongly suggests that certain aspects hold greater importance than others. In some ways, phrases like perfect is the enemy of the good holds.

WCAG has three levels of conformance which are A, AA, and AAA. AA is the typical standard used for regulations. To conform to Level AA, you must also conform to Level A, which is basic accessibility. Level AAA is sometimes called exceptional accessibility, but in practice such a moniker is not really reasonable and regardless this standard is not always applicable or achievable. That said, the AAA standard does provide interesting ideas. To document whether your content is accessible, you could fill out a Voluntary Product Accessibility Template (VPAT). A VPAT is a structured way to check if content conforms to WCAG, so you can think of it almost like a checklist for the criteria in WCAG.

Section 1A: Perceivable

The main principle of Section 1 is known as Perceivable. Information and the user interface must be presentable to users in a way that they can perceive. Text is a form that can easily be altered by assistive technology into a format a user needs, such as braille, speech, symbols, or alternative language. You will find that many of the criteria in this section boil down to providing some text alternative to non-text content.

Section 2A: Operable

The main principle of Section 2 of WCAG is known as Operable. This section focuses on the functional aspect of accessibility where users must be able to interact with the content to operate or navigate it. You can follow everything in Section 1 and have perceivable, well-structured content but if navigation requires a mouse and the user can only use a keyboard, the content is inaccessible.

Using the Inspect tool in a Browser

One way to investigate whether a website is accessible is to use a browser's inspect tool. The Inspect tool, sometimes called Developer Tools or DevTools, is a built-in feature of most modern web browsers. These tools let you look behind a web page, examine its inner workings, debug code, change styling in real time, see how fast a page loads, and much more. To ensure usability, the Inspect tool also helps check specific elements such as an image or link for specific attributes like the alt tag.

Earlier in the lesson you learned about Section 1 of WCAG that is guided by the principle that content should be perceivable by the user. Without alternate text, a user with no vision may have trouble with an image. The alt tag is one of the most common properties used across the web to make content accessible. If your user has low or no vision, then images might not be the best way to convey information. If there is text describing the image, then users who cannot see the image still understand what image conveys.

Given a page with an image, a right click on the image opens a menu that pops up that has an item that is labeled Inspect.

If you are unable to use the mouse, then DevTools can also be opened manually by opening the browser menu and under the item More Tools you will find an item called Developer Tools. Alternatively, you can use the keyboard shortcut Ctrl + Shift + I for most browsers or if you are on Mac Command + Option + I.

Web Inspectors have grown to be very robust and contain a lot of information. To check for an alt tag it would be under the Elements tab.

The Elements tab contains a variety of information on the structure and contents of the current page. Images are typically added to pages using the tag. Each image on the page has a corresponding tag in HTML that often includes the source of image as a link. The attribute alt is what has the alternative description that a screen reader would read if the user goes over the image. For images to be accessible, remember that the text in that alt tag should also convey the same, or at least reasonable, information.

Citations

1. Fact Sheet: New Rule on the Accessibility of Web Content and Mobile Apps Provided by State and Local Governments. Department of Justice. https://www.ada.gov/resources/2024-03-08-web-rule/
2. The EAA comes into effect in June 2025. Are you ready? European Commission, 2025. Retrieved from https://accessible-eu-centre.ec.europa.eu/content-corner/news/eaa-comes-effect-june-2025-are-you-ready-2025-01-31_en

Engage

Now you will get practice using the web inspector on a real webpage so that you can evaluate some accessibility related elements and properties. You can go to any webpage you like, but for this activity the Quorum homepage, will be used.

Directions

Inspect the bunny by right-clicking on, or using yhe inspect tool, and opening the Inspect menu. Determine what the alternative description is.

There are more bunnies on this page. Try to locate three other bunnies and find their alternative descriptions. Inspect other elements on the page. Find a button and check whether it also has alternative text or labels of some sort. The homepage also has headings. Try to find a heading and see what heading level it uses.

Next Tutorial

In the next tutorial, we will discuss WCAG Section 3A and 4A, which describes WCAG Section 3A and 4A.