What is WCAG 2.1 and how do I make sense of the guidelines?
Have you ever avoided delving into WCAG compliance due to its complexity? Never fear, we’re here to help. This blog will highlight the main components of web accessibility, without all the technical jargon.
So what is WCAG? WCAG stands for Web Content Accessibility Guidelines and are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI). The guidelines aim to make your content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. It’s quite a long list but it represents about 1 billion people across the world.
The guidelines inform the international standard for web accessibility, and legislation such as the EU Directive for Web Accessibility, outlines that organizations must comply with WCAG 2.1 Level AA standards.
Following the guidelines will not only make your web content more usable to ALL USERS, but will also ensure you're in compliance with legal requirements.
What are the main recommendations?
Image ALT text
Make sure all images that are visible to screen readers have descriptive ALT text. For example, an image of a pie chart might have ALT text reading: “Pie chart illustrating that “40% Voted Yes and 60% Voted No.”
Links
Format links to contrast from the body text, such as using underlines or icons next to the text. Use descriptive TITLE text, and descriptive link text such as “click here to download policies PDF.”
Forms
Add a border to input fields, populate the LABEL tags for each field, and add helper text that provides an example input for each field. Make sure form elements are not hidden or inaccessible by using the tab key.
Color
Set the contrast ratio between text and the text’s background to be at least 4.5 to 1. If your font is at least 18px bold, the minimum drops to 3 to 1. Use a color contrast tool to analyze your site for AA and AAA standards.
HTML Mark up
Apply H1, H2, H3, and H4 tags for your headings and apply landmarks such as main, form, and navigation to the structure of the page.
ARIA Code
Use aria-hidden=”true” on elements such as pull-quotes, dividers, and icons to hide them when the site is accessed by screen readers.
Fonts
Select an easy-to-read font, and limit the number of fonts used on the site. Use relative units for font sizes so they can be increased with screen magnification. Avoid very small text.
How do I improve web accessibility for users of assistive technology?
Many users with disabilities use assistive technologies to access digital content. Assistive technologies include screen magnifiers, screen readers, alternative keyboards and pointing devices, and site, or browser based assistive tools.
Understanding how assistive technologies work and applying the principles of accessible design allows you to successfully deliver web content for every user. The practices of accessibility affect all areas of a website, including:
Code
Your code needs to be optimized for screen readers, including appropriate HTML markup structure. Users should be able to navigate the entirety of the site, including any forms, using only a keyboard. Accessible coding is generally the responsibility of a web developer.
Styling
Think about users with vision impairments and make sure that the use of colors, contrast, and font sizes is optimized for visibility. Colors should not be the only element used to indicate important information.
Content
Ensure that screen readers and other devices can translate visual content into speech or text by providing text alternatives for graphic elements and links.
Where can I learn more?
To help you delve deeper into web accessibility and create digital content that's inclusive, we've pulled together several free resources for you to explore: