How to conform to the different levels of web content accessibility

Web content accessibility is quickly becoming a growing initiative for many forward-thinking organizations, both domestic and international.

The Web Content Accessibility Guidelines (WCAG) define a set of requirements that take the guesswork out of how you can go about making your site more accessible for everyone – regardless of their ability.

In this article, we’ll step through some tips and techniques you can follow for designing a more accessible website. But, before we begin, let’s quickly take a look at what the accessibility conformance levels are.

Accessibility conformance levels

Published by the Web Accessibility Initiative, the WCAG are part of a series of web accessibility guidelines that explain how you can make content accessible for people with various disabilities (such as vision or hearing disabilities, limited hand dexterity, etc.) and those who browse the web using assistive technology.

There are three conformance levels of content accessibility – A, AA and AAA. Higher conformance levels mean more restrains on your designs. These levels have been established to help web designers and developers meet the needs of different groups and circumstances.

According to WCAG, you’re not required to have your entire site conform to level AAA since it’s not possible to satisfy all of the success criteria for some content. In fact, you can improve your website’s accessibility significantly for hundreds of thousands of people just by following some of the guidelines listed in WCAG.

10 Tips for designing a more accessible website

Complying with WCAG’s guidelines and conformance levels is all about making sure that everyone – regardless of their disabilities or other limitations – can easily consume the content on your site.

To track progress, you have to know where you started out. We recommend using the tools listed below to run a quick accessibility check on your site and get a good before picture.

• Accessibility Valet lets you check web pages against all three WCAG conformance levels and generate reports that highlight both valid and deprecated markup in addition to accessibility warnings.
• A11Y. The Bureau of Internet Accessibility’s A11Y accessibility checker offers tools, reports, and services to help organizations maintain and defend their site’s accessibility.
• Web Accessibility. The Web Accessibility tool lets you test five pages for accessibility against WCAG 2.0. It identifies accessibility violations, gives you an accessibility compliance rating, and enables you to you download your reports.
• AChecker is an open-source accessibility checker that checks HTML pages for conformance with accessibility standards (including WCAG). You can evaluate your site’s accessibility by merely entering a URL, uploading its HTML file, or pasting HTML markup.
• Functional Accessibility Evaluator (FAE). If you’d like to stick to Level A and Level AA, then you can use FAE to evaluate your site’s accessibility against WCAG. It generates a report that lists the rule group, number of rules, implementation level, score, and status in a table layout.

Level A

Tip #1: Color is not the only visual means of conveying information

Although color is an important asset in web design that’s used to improve usability and enhance visual appeal, some users may have difficulty perceiving color. What this means in terms of accessibility is that you have to make sure all users can access the information that is conveyed with the color, i.e. when a particular color has a meaning assigned to it.

For instance, if you’re designing a checkout form then here are some accessibility issues you might run into:

• You’ve used red labels to denote required fields.
• You’ve used green buttons to indicate advancing to the next step and red to clear the forms’ fields.
• You’ve highlighted form fields with yellow to indicate that the area is still blank.

In addition, you should make sure that all information that is conveyed by color differences is also conveyed in text. Following our example, you might choose to include a relevant icon next to the form field whose alternative text reads Required field.

Tip #2: Make sure you can tab through the site

Since not all users can use a mouse, allowing them to navigate sequentially through your site’s content using their keyboard becomes a necessary accessibility feature. WCAG recommends that compliant websites support keyboard accessibility for common use case scenarios such as accessing navigation menus, main content, hyperlinks, form fields, etc.

You could use the tabindex HTML attribute with a defined tab order to allow users to tab through your site’s content from one focusable element to the next in a logical, sequential order. You could use this technique to launch a skip to main content button on the first tab.

Tip #3: Add aria-label (or aria-labelledby) to every block level element

Adding aria-label to every block level element makes non-text content accessible for all users.

By using aria-label (or aria-labelledby) you can provide text labels for objects (such as buttons) that can be read by assistive technology like screen readers. It works like this: when the screen reader encounters an object with the aria-label, it reads out the text to let the user know what the object is.

This feature allows you to cater to users who use assistive technology to read text aloud, have it displayed on the screen, or converted to braille.

Tip #4: Include an ALT tag on images

From an accessibility standpoint, it’s important that you add alt tags (alt text) on all image elements that you publish on your site. According to WCAG, people who have difficulty understanding the meaning of images, photographs, and drawings rely on text alternatives. Another benefit of this is that it allows users to search for non-text content.

There are many best practices and examples for using alt tags on images that are definitely worth a read.

Tip #5: Add captions to videos

Pre-recorded audio content – whether it’s an audio file or a video – should be captioned with synchronized text that describes (1) what is being said and (2) what is happening. The purpose behind this Level A requirement is to make audio accessible to deaf users and those who have trouble hearing.

It’s important to note that captions and subtitles are not the same things. While subtitles simply provide text for the dialogue, captions also explain what’s happening e.g., by describing sounds.

You have the option to provide either open captions or closed captions with all forms of audio to meet this requirement. One key benefit of offering open captions is that it ensures users who don’t know how to turn captions on in their media player can also view them.

Level AA

Tip #6: Use colors that offer good contrast ratios

To make your site accessible to users who have moderately low vision, the WCAG recommends that you provide enough contrast between the text and its background. Text (or images of text) should have a contrast ratio of 4:5:1 at least, except in the case of large text (18 point), logos, and incidental text elements such as inactive UI components.

Although you could use a formula to measure the luminance of each letter and use it to compute the contrast ratio, using an online tool like Color Contrast Checker or Contrast Checker is far simpler.

Tip #7: Enlarge text without assistive technology

Users should be able to enlarge all kinds of text and text-based controls on your site – except for images of text and captions – up to 200 percent without using screen magnifiers or other forms of assistive technology. And when the user increases the text size, the content should not disappear from the screen or become unreadable.

Since most people use browsers that offer zoom support, all you have to do is make sure it doesn’t disappear or lose functionality zoomed in at 200 percent. Since this depends entirely on the user’s browser, WCAG recommends that you test with a wide range of web browsers. You can use tools like Browserling and BrowserStack to test your site.

Tip #8: UI components used across the website are consistent

People who use screen readers rely on their familiarity of the appearance and functionality of UI components that appear on different web pages. For this reason, it’s important that you maintain consistency across your site in terms of UI design. This includes being consistent with text alternatives of non-text UI elements, like icons.

Level AAA

Tip #9: No more than three flashes

It’s difficult to completely eliminate the chance of seizures caused by flashing on-screen elements. However, WCAG recommends that you remove all elements that flash over three times per second anywhere on the screen because this is the rate that’s known to cause seizures.

You can use the Photosensitive Epilepsy Analysis Tool to make sure all elements on your website are below the three flashes per second threshold.

Tip #10: Context-Sensitive help is available

Providing textual context-sensitive help to users can significantly reduce the chances of them making mistakes when interacting with your website. Any sort of supplementary information related to a function is considered context-sensitive help. This includes labels, help links, spell checking, instructions, and data formats.

Conclusion

Understanding WCAG and designing websites that are WCAG compliant will take some practice.

The goal isn’t to make your site fully compliant right away. You’ll be able to make your content accessible to a much wider audience by following the tips we listed in this article. Remember to run an accessibility check on your website once you’ve made the changes to see how much progress you made.