What is Web Accessibility?

Who manages web accessibility on the internet?

You might be wondering who’s in charge of the web accessibility initiative and who works to enforce guidelines across the internet?

The answer is the members of the Web Accessibility Initiative (WIP) of The World Wide Web Consortium (W3C) — these people publish the Web Content Accessibility Guidelines (WCAG) (which we’ll review below) and related content.

Why should you care about web accessibility?

As mentioned, web accessibility makes your website — and the content on it — more user-friendly and easy-to-understand for all visitors. This includes those with disabilities and limitations such as:

• Blindness
• Low vision
• Learning disabilities
• Cognitive disabilities
• Deafness
• Hearing loss
• Speech disabilities
• Physical disabilities

…all of which could be permanent or temporary.

By focusing on your website’s level of accessibility, you’ll enhance user experience (UX) for every one of your visitors, including those with disabilities or limitations who land on your site. You’ll show your visitors, leads, and customers that you value and care about them as individuals — and in return, this type of investment will boost your brand loyalty and advocacy.

Meeting web accessibility standards may sound like a good idea to you at this point — but is it required of you?

How is web accessibility enforced?

Long story short, there aren’t any enforceable laws related to website accessibility unless you run a government website — in that case, you must abide by Section 508 of the Rehabilitation Act guidelines.

However, just because web accessibility isn’t a formal law doesn’t mean your business will automatically avoid a lawsuit. There are multiple cases in which major companies have been sued for the lack of an accessible website.

In fact, between the years of 2017 and 2018, there was an increase of 181% in the number of filed federal court lawsuits.

For example, in the Gil v. Winn-Dixie decision, a court ruled that websites may constitute “public accommodations” under the Americans with Disabilities Act (ADA).

Meaning, for businesses with physical stores and websites, their sites can be considered heavily-integrated with their physical store locations. So, their websites could be considered “gateways” to their physical store locations.

For this reason, websites constitute “a service of public accommodation” covered by the ADA — in other words, websites are expected to meet accessibility standards.

And in Domino’s Pizza v. Guillermo Robles, a court ruled in favor of Robles, a blind man who was unable to order food through the Domino’s website and app despite using screen-reading software.

In this case, the panel of the 9th U.S. Circuit Court of Appeals said, “… alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises —which are places of public accommodation.”

To avoid legal trouble — or simply pushing visitors away — make sure your website doesn’t prevent anyone from consuming, navigating, or obtaining any of the information you share. The simple way to do this is by abiding by WCAG — so let’s review those guidelines and standards next.

Web Accessibility Standards

The most recent WCAG and standards state four main principles to focus on when creating an accessible website. Within these four principles are web accessibility guidelines you can reference and work to apply whenever and wherever possible on your site. We’ll get to those next, but for now, let’s review the overall principles.

1. Perceivable

Visitors must be able to perceive, or understand and be aware of, the content and information that’s presented on your website.

Keep in mind that “perceive” doesn’t necessarily mean “see with one’s eyes” — users who are blind or have low vision often use screen reader software, which converts printed text into synthesized speech or braille characters.

2. Operable

Operable websites can be used without disrupting the user in any way. All visitors can utilize every part of the site’s functionality, from navigating a page, to selecting a link from a menu, to playing and pausing video and audio. Generally speaking, the most operable websites are simple, straightforward, and have ditched any excess functionality that could impede users with disabilities and limitations.

3. Understandable

All content on your website — including your written and graphic design content — should be easily understood by visitors. Not only is jumbled, verbose language difficult for your typical visitor to interpret — it also limits access to those with cognitive difficulties and impairments, as well as people who do not speak your site’s predominant language.

This principle applies to your site’s structure, too. Your pages need to be organized intuitively and your navigation readily available to visitors on most if not all pages.

4. Robust

The content on your site should be easily interpreted and consumable by all visitors, including those who use assistive technology like screen readers. This principle boils down to writing your HTML in such a way that assistive technologies can parse your code without a visual reference.

How to Make Your Website Accessible

After reviewing the principles above, you might have realized that your website doesn’t quite meet these standards. Or, perhaps you ran your site through an accessibility testing tool and didn’t come out with the best score.

Either way, the WCAG provides several specific guidelines for each of the four principles above that you can implement immediately. Let’s unpack these guidelines further, so you can come away with some action items to improve your site’s accessibility.

For an even more in-depth review of these guidelines, see our full web accessibility checklist.

Perceivable Web Accessibility Guidelines

Offer text alternatives: All non-text items on your page — including images, videos, and audio content — must have a text alternative so that non-sighted individuals can understand them. Image alt text is the most common approach to meet this guideline, and it’s recommended that you include alt text for every non-decorative image on your website. For decorative images, include the alt attribute but leave it blank, i.e.:

<img src="decorative.png" alt="" />

This tells the screen reader that an image exists but can be ignored.

Offer alternative ways to consume time-based media: Time-based media comprises audio and video content. For audio content, the most common solution is a full transcript of the recording. For video, use captions that are properly synced with the audio. Both of these help users with limited hearing capabilities.

Structure content in an adaptable way: This guideline means writing your HTML files in such a way that, if the page styling were to be removed, the intended information and structure wouldn’t be lost. For example, using proper headings, ordered and unordered list elements, and bold and italic text all convey information, even if you strip pack the page styling.

Make your content easy to see and hear: For sighted individuals, it’s important to utilize color contrast so that everyone, including those with color blindness, can read your content and understand any visual information you want to convey. Additionally, users should be able to adjust any background audio on your site or halt audio playback altogether.

Operable Web Accessibility Guidelines

Ensure total functionality via the keyboard: Not everyone can use a mouse. Therefore, all functionality on your website should be accessible with the keyboard alone. For example, the tab key should let users jump between selectable elements on the page, and the enter/return key should “click” the element in focus.

Provide ample time to engage with your website: Allow users to read, watch, and use the various content types on your site within a reasonable time constraint. If any action on your site includes a time limit, users should be allowed to extend or cancel it. This guideline also applies to accessible drop-down menus: If a user disengages with the menu from the mouse, it’s a good practice to set a time delay before the menu disappears, in case they hover off accidentally.

Avoid blinking/flashing content: According to W3C, content that blinks or flashes more than three times in a second can trigger seizures. Avoid this when possible, or at least provide a warning beforehand.

Provide navigation to help users know where they are and where they can go: A clear page title, meaningful links, a keyboard focus indicator, and proper headings all signal to users where they are on your site, and which elements are clickable links.

Understandable Web Accessibility Guidelines

Make text content readable: Consider the full scope of your potential audience when drafting your content. Your writing should be easily understood by as many readers as possible, including those learning your site’s native language. Avoid using highly technical jargon and regional slang whenever possible.

Structure your pages and site logically: When planning out your site’s structure and navigation, place your navigational links and pages in a way most would expect. This includes placing navigation above the fold, most commonly in the header (and footer) of the page.

Write useful error messages: No one likes receiving an error message, so provide a clear description of the error and instructions to help visitors correct their mistakes.

Robust Web Accessibility Guidelines

Write HTML that can be parsed: Assistive technologies often make use of a web page’s HTML file in order to translate its contents into a different format. For this reason, your pages’ HTML code should be well-written. For accessibility, this means using start and end tags when required, and avoiding duplicate IDs across elements and duplicate attributes within the same HTML tag.

Now that you understand what web accessibility is, why it’s important, and the guidelines that exist, let’s look at some tools you can lean on for assistance when making your site more accessible.

Web Accessibility Tools

There are a variety of web accessibility testing tools available today. W3C has compiled and shared a list of them on their website for you to learn more about and compare to one another, and we have our own list of tool recommendations too.

For the sake of this guide, we’ve highlighted a few options below to provide insight into the capabilities these accessibility tools have.

WAVE

WAVE by WebAIM offers multiple tools to help you evaluate the accessibility of your website. They provide a visual representation of the areas on your website that aren’t considered accessible.

You simply enter the URL of the site you’re looking to evaluate, and Wave will highlight which areas of your site don’t meet WCAG standards as well as provide a human audit and review of your website’s content.

Image Source

DYNO Mapper

DYNO Mapper by Indigo Design Company LLC is a sitemap generator — meaning it uses sitemaps to display the accessibility of your website after conducting content inventories and audits as well as keyword tracking.

The tool also integrates with Google Analytics to allow for in-depth analyses with identifiable areas for accessibility improvement. Dyno Mapper will test all types of sites for you including public, private, and online apps.

Image Source

WCAG Compliance Auditor

WCAG Compliance Auditor by Funnelback references the WCAG standards and guidelines while reviewing your website (or groups of websites). This tool is focused most on various impacts and priorities related to accessibility.

This auditor is a great option for those who haven’t worked much on web accessibility for a couple of reasons: 1) It provides recommendations on how to improve the parts of your site that aren’t yet accessible, and 2) it offers a benchmark for you to measure your website’s accessibility over time — this is ideal as your website evolves and changes.

Image Source

SortSite

SortSite by PowerMapper evaluates the accessibility of your website as a whole or specific web pages in just one click. The tool uses 1,200 different guidelines and standards to determine a site’s accessibility.

Some of the main categories of accessibility SortSite reviews on your site include broken links, compatibility, SEO, privacy, web standards, and usability.

Image Source

A11Y Color Contrast Accessibility Validator

To make your website’s colors accessible, use the A11Y Color Contrast Accessibility Validator by A11Y Company. It displays the color contrast issues on your website or web pages. In the tool, you can choose to test by URL or a specific set of colors (by using their hex codes or locations on the color wheel).

Wherever the tool detects errors in color combinations or contrast, there will be ideas and recommendations on how to fix them to meet WCAG standards.

Image Source

Web Accessibility Examples

Here are six examples of WCAG-compliant websites that you can reference for inspiration while making your website accessible.

1. W3C

It seems obvious, but what better example than the organization that writes these accessibility standards themselves? W3C has everything an accessible website should, including well-structured HTML with clear tags to denote structure, color contrast, simple language, and a focus indicator for the currently selected page element.

Image Source

2. The Cram Foundation

The Cram Foundation focuses on supporting those with disabilities, which is why having a WCAG-compliant site was important to them.

Their website balances web accessibility with an aesthetically pleasing and branded design. The bright and branded website meets all of the WCAG color and contrast standards and their navigation is accessible in terms of both structure and color.

Image Source

3. US Center for Disease Control (CDC) and Prevention

The US Center for Disease Control (CDC) and Prevention is a government website — meaning, it’s required to be accessible. The site includes a page that explains how the Center works to meet and exceed the accessibility standards outlined in Section 508. Additionally, the page explains how visitors with any comments related to their web accessibility can get in touch.

The site’s standard site navigation is straightforward and easy to understand for all — they also offer visitors a couple of different navigation options so they can maneuver around the site in the way that best suits their needs.

There are a number of different content types available on the site too, so visitors can get the information they need in a format that works for them (e.g. written, audio, video).

Image Source

4. Healthmonix

Healthmonix leverages cloud-based technology payment solutions for health systems and medical groups. Its website shows an impressive adherence to accessibility standards. Navigational layout is obvious and intuitive, content is structured in a clear hierarchy, and clear color contrast ensures readable text.

Image Source

5. Unilever

Unilever owns 400 brands and sells consumer goods to over 2 billion people globally. For this reason, they have committed to ensuring their website is accessible to all visitors — and they share information about this investment on a dedicated site page.

The website’s accessible features include accommodation for assistive technologies and code (e.g. screen readers, software for text-to-speech or speech-to-speech, keyboard emulator, screen magnifier, enhanced UI, and visual styling).

Unilever’s website also meets or exceeds the WCAG regarding color and contrast, layout and navigation, browser support, text alternatives, audio and video content, and more.

Image Source

6. The Financial Gym

The Financial Gym is a personal finance coaching service with an accessible website. It makes smart use of text and image colors to provide ample contrast while sticking to the company’s branding. Layout and navigation are both intuitive enough to navigate with a screen reader and the keyboard. Also, videos on the homepage do not auto-play, so users are in full control of the media playback.

Image Source

Designing Websites for Everyone

Although not legally required, it’s wise to make as much of your website accessible and WCAG-compliant as possible. This will create a memorable and positive UX as well as help you boost customer loyalty.

By ensuring your site is accessible, you’re simply doing the right thing for the people who matter most to your business — your visitors and customers. Be sure to use the tools listed above and review the examples we listed for inspiration when making your site accessible.