Quick Web Accessibility Guide That All Sites Should Follow

Quick Accessibility Guide

What is Accessibility?

According to the W3C:

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Accessibility is often overlooked in web and app development. It’s not our faults, but it’s morally just to take into account the needs of people with disabilities. This is particularly true in the world of the open and free internet (I know it’s not so free these days, but freedom is the goal after all). So, it’s critical to take a few minimal steps to make websites easier to use for all peoples.

For people without disabilities, a good way to think about Accessibility, is to consider that you are navigating your website with a screen reader, using the keyboard tab and enter keys for navigation.

Screen Reader Example

Below are a few of these minimal steps and by no means is this guide exhaustive. In fact, there are many things that might need to be modified on your website or app to make it fully compliant. In some industries, you can even be sued by civil rights organizations if you website isn’t compliant.

Add “Skip To” Links

As you could see in the video above, there were “Skip to Main Content” and “Skip to Navigation” links at the very beginning of the tabbing sequence. These make it easier for people using the keyboard to navigate a website to jump further down the page, allowing them to avoid having to click “tab” so many times.

Add the following HTML where you want your Skip To Links to appear:

<a href="#main-content" class="element-invisible element-focusable">Skip to Main Content</a>

Add id="main-content" or name="main-content" to the container where you’d like the Skip To link jump to. Repeat for other Skip To links.

And the following CSS:

.element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px;
}

.element-invisible.element-focusable:active, .element-invisible.element-focusable:focus {
	position: static !important;
	clip: auto;
	overflow: visible;
	height: auto;
}

Add data-title Attributes To All Navigation Links

In the video above, every time person tabbed over the main navigation we heard the screen reader say “blank.” This is because none of the links in the nav had the data-title attribute. Here’s a mini main nav example that is Accessible.

<ul id="main-navigation">
    <li data-title="home">Home</li>
    <li data-title="about">About</li>
    <li data-title="services">Services</li>
    <li data-title="Contact">Contact</li>
</ul>

Add alt And title Tags To All Images Or Video Containers

This needs no explanation. It’s also good for SEO.

Check All Colors For Contrast Ratios

You don’t have to be partially blind to have difficulty to see #ccc text on a #f8f8f8 background. Make sure all of your contrast ratios are readable!

How do you test? Go here: http://wave.webaim.org

This Accessibility testing tool checks all of the basic conditions you must meet for Accessibility Compliance.

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply