Deep Dive Into WCAG 2.1 (With HTML & CSS Examples)
By now, you’re somehow familiar with the Web Content Accessibility Guidelines (WCAG) 2.1, a widely recognized and adopted standard for web accessibility. You probably also know that it provides guidance and best practices for making web content more accessible to people with disabilities, including those with visual, auditory, physical, cognitive, and neurological impairments. So in this post, we’ll delve deeper into the world of WCAG 2.1, exploring its principles, guidelines, and success criteria to gain a better understanding of how to make web content more inclusive and accessible.
Understanding WCAG 2.1
As mentioned before, the WCAG 2.1 standard is structured around four principles: perceivable, operable, understandable, and robust, each with its own set of guidelines and success criteria to support it. The guidelines offer particular suggestions for fulfilling each principle, while the success criteria are precise and verifiable statements used to determine if the guideline has been successfully applied.
Success Criteria
WCAG 2.1 includes 78 success criteria, which are organized by level of conformance: A (lowest), AA, and AAA (highest). To achieve a certain level of conformance, all the success criteria at that level and below must be met. Level A criteria are considered the minimum requirements for accessibility, while AA criteria provide a higher level of accessibility and AAA criteria provide the highest level of accessibility.
Below, you will find some pure HTML and CSS examples that demonstrate accessibility implementations of some popular success criteria outlined in WCAG 2.1. These examples are provided for the purpose of illustration to aid an understanding of the basic concepts and principles of web accessibility.
- SC 1.1.1 Non-text Content: Provide text alternatives for non-text content.
The alt attribute on the img tag is used in this example to provide a text alternative for the image. For users who cannot see the image, such as those who use screen readers, the text “Example image of a sleeping dog” describes its content and purpose.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<img src="example.jpg" alt="Example image of a sleeping dog">
</body>
</html>It’s important to note that the alt attribute should be used on all images that convey important information, such as graphs, charts, and infographics. For decorative images that do not convey any information, you can use an empty alt attribute like this:
<img src="decorative.png" alt="">This indicates to assistive technologies that the image is decorative and can be ignored.
It’s worth noting that there are some cases where a text alternative may not be sufficient, such as for complex data visualizations. In these cases, consider providing additional context or a more detailed description of the content using a long description, caption, oraria-discribedbyattribute.
- SC 1.2.2 Captions (Pre-recorded): Provide captions for videos with audio.
Here, the video element is used to embed a video file on the web page, and an track element is used to provide captions for the video. The kind attribute is set to "captions" to indicate that this track contains captions, and the src attribute points to the URL of the caption file in WebVTT format (.vtt). The srclang attribute specifies the language of the captions, and the label attribute provides a descriptive label for the captions.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<video controls>
<source src="example.mp4" type="video/mp4">
<track kind="captions" src="example.vtt" srclang="en" label="English captions">
</video>
</body>
</html>It’s important to note that caption files should be synchronized with the audio of the video and should include all spoken content, as well as any relevant non-speech audio, such as sound effects or music lyrics. Captions should also be legible and easy to read, with appropriate contrast and font size.
Additionally, it’s a good practice to include a button to toggle the captions on and off, so users can choose to view them if they need them. The controls attribute on the video element enables a set of controls that includes a caption toggle button by default.
- SC 1.3.1 Info and Relationships: Use semantic markup to convey meaning and relationships.
Using semantic markup, the meaning and connections of the content on the page are communicated in this example. The navigation links are organized using the navelement, which is used to group the links together, and the headerelement, which houses the site title. The mainelement houses the page’s primary content, which the sectionelement divides into different sections. A heading (h2) identifies the subject of each section, and ul and lielements are used to make a list of services. A contact form is made using the formelement, and screen readers can understand it better thanks to the labels (label) for each form input.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are a web development company that specializes in creating accessible and user-friendly websites.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li><strong>Web Development:</strong> We build custom websites to meet your business needs.</li>
<li><strong>Accessibility Consulting:</strong> We help ensure your website is accessible to all users.</li>
<li><strong>User Experience Design:</strong> We create intuitive and user-friendly interfaces.</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Fill out the form below to get in touch:</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>It’s important to note that using semantic markup not only helps assistive technologies understand the content of a web page, but also makes the page more accessible and user-friendly for all users. By using appropriate HTML tags and attributes, you can help convey the meaning and structure of your content, making it easier for users to navigate and understand.
- SC 1.4.3 Contrast (Minimum): Ensure that text and images have sufficient contrast.
In order to ensure that the text and background contrast sharply enough, we’ve set the text color (color) to #333and the background color (background-color) to #f2f2f2. In order to create a high-contrast, easily readable heading, the text color of the h1element has also been changed to #ffffff, and the background color is #0077cc. To make the image big enough to view comfortably, we’ve lastly increased the width of the imgelement to 400px.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Web Page</h1>
</header>
<main>
<section>
<h2>About Us</h2>
<p>We are a web development company that specializes in creating accessible and user-friendly websites.</p>
<img src="example.jpg" alt="A photo of our team at work">
</section>
</main>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>/* Styling for demonstration purposes only */
body {
background-color: #f2f2f2;
color: #333;
}
h1 {
color: #ffffff;
background-color: #0077cc;
padding: 10px;
}
img {
width: 400px;
}It’s important to note that sufficient contrast between text and background is crucial for readability, especially for users with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (14pt bold or 18pt regular). You can use tools like the Colour Contrast Checker to test the contrast ratio of your text and background colors and ensure that they meet these guidelines.
- SC 2.1.1 Keyboard: All functionality must be operable via a keyboard.
The button element that can be activated with a keyboard has been added to the example below. An onclick event that triggers the alert when the button is clicked is added to the button to achieve this. Using the Tab key to move to the button and then pressing Enter to activate it are the two keyboard shortcuts required to use this button.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Web Page</h1>
</header>
<main>
<section>
<h2>Keyboard Accessibility</h2>
<p>This button can be operated using a keyboard:</p>
<button onclick="alert('Hello, world!')">Click me</button>
</section>
</main>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>/* Styling for demonstration purposes only */
button {
background-color: #0077cc;
color: #ffffff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}It’s important to note that all functionality on a web page must be operable via a keyboard to ensure that users who cannot use a mouse or other pointing device can still access all content and features on the page. This includes navigation, links, forms, and any other interactive elements. You can test keyboard accessibility using only the Tab key and Enter key, without using a mouse, to ensure that all functionality can be accessed and used via a keyboard.
- SC 2.4.2 Page Titled: Pages must have titles that describe the content.
Here, we’ve added a descriptive title to the head section of the page using the <title> element. The title "My Web Page - Home" accurately describes the content of the page, which is the home page of the website.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page - Home</title>
</head>
<body>
<header>
<h1>My Web Page</h1>
</header>
<main>
<section>
<h2>Welcome to My Web Page</h2>
<p>This is the home page of my web site.</p>
</section>
</main>
<footer>
<p>© 2023 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>It’s crucial to remember that titles for pages must accurately summarize the content in order for users to know what the page is about. For instance, screen reader users heavily depend on page titles to navigate and comprehend the content of web pages. Make sure the page’s title is succinct, evocative, and conveys a clear understanding of its subject.
- SC 3.1.1 Language of Page: Specify the language of the page.
The opening htmltag in the example below uses the lang attribute to indicate that the language of the page is English (en).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is an example web page.</p>
</body>
</html>The lang attribute must be set to a legitimate language code, such as en for English, frfor French, es for Spanish, etc., it is very important to remember this. the IANA Language Subtag Registry website has a list of language codes that you can access.
Also, it’s a good practice to include the lang attribute on all web pages to help assistive technologies and search engines correctly identify the language of your content.
Resources for Implementing WCAG 2.1
As a detailed and technical document, the WCAG 2.1 standard can be difficult to implement. Developers, designers, and everyone else involved can, however, find a wealth of resources to aid in understanding and putting the success criteria into practice.
One of the most useful tools is the official WCAG 2.1 documentation, which contains the complete text of the standard as well as a number of supplementary materials, including adequate methods for each success criterion. There is a list of tools and evaluation techniques in the documentation for determining digital accessibility.
There are numerous online resources and tools that can be used to assist with implementing WCAG 2.1 in addition to the official documentation. We’ve already mentioned a few of them here.
Summing Up
To improve accessibility for individuals with disabilities, it’s recommended to refer to the guidelines outlined in WCAG 2.1. By adhering to the principles, directives, and success criteria provided in this guide, development teams can ensure their web content and software is accessible to a diverse user base. Although implementing WCAG 2.1 can be challenging, there are several tools and resources available to help make the process easier. By making an effort to implement WCAG 2.1, we can promote inclusivity on the web and create a more welcoming environment for all users.
