“Ignorance plays a massive role in web inaccessibility and digital discrimination.”

Making a website more accessible isn’t easy. Resources for learning about good accessibility practices are limited and are not written for most people to digest. These “wall of text” specs are difficult to read, as they tend to be created for web engineers to reference while creating web browsers. These specifications may act as a deterrent to someone just getting started with web accessibility.

What are some guidelines to work with?

In 2008, the Web Accessibility Initiative (WAI), a project by the World Wide Web Consortium (W3C) published the Web Content Accessibility Guidelines 2.0. This document currently acts as a guideline for creative professionals for creating websites with accessibility in mind and is an update to one created in 1999.

The web is the only multimedia environment where you can publish content and have it immediately available for consumption by people all over the world. This global reach is part of the reason why I fell in love with making websites. More people are sure to enjoy your content if you work to make it more accessible.

There are many steps you can take to make your website more accessible. I’ve rounded it to five (in no particular order) that I feel everyone should know about.

Step 1: Design with accessibility in mind.

The visual design process is a stage of the project that should also consider accessibility. Some of these considerations at this stage could include reading order, proper contrast, tab order, adequate font sizes, good line lengths, and easy-to-use user interfaces. Webaim.org has created a great infographic highlighting some of these design practices.

WCAG 2.0 (Color Contrast)

Step 2: Make sure the website’s content can be navigable using only the keyboard in a logical order.

Keyboard access to websites is a basic but important requirement for a website to be accessible for users with or without disabilities. I’ve found that many websites lack this basic functionality. Keyboard navigation should be considered in the design phase and into the development phase.

• Can the website be used without a mouse?
• Is there visual feedback for where the user is in the interface while tabbing through it?
• Are we using native elements that possess automatic accessibility?
• Could this interface be navigable by voice?

Keyboard accessibility is one the easiest ways to make a website more accessible and requires very little work. A good test is to unplug your mouse and try to use a website.

WCAG 2.0 (Keyboard Operation)

Step 3: Include proper alternative (alt) text for images.

Text alternatives for images are the primary way of making visual information accessible. This text can be rendered in many different ways to match the needs of the user, e.g., visual, auditory, or tactile. For example, a user who cannot see a picture can be delivered the alternative text to them with assistive technology.

<img src="portrait.jpg" alt="A painting of a woman holding a baby">

There are also positive Search Engine Optimization (SEO) benefits from offering quality alternative text. After all, many search engine crawlers are robots without vision.

Data visualizations are also notoriously inaccessible. I suggest adding text-based data to accompany the visualization for a more accessible experience.

Don’t forget to plan for alternative text as early as the Information Architecture phase. If you’re curious how to apply good alternative text to images checkout the W3C’s recommendations.

WCAG 2.0 (Non-text Content)

Step 4: Use ARIA (Accessible Rich Internet Applications) attributes, and Landmark Roles.

By adding ARIA attributes and Landmark Roles in your HTML you are adding great accessibility to the experience. These attributes are like little triggers for assistive technology to respond to.

Clean, semantic HTML delivers great out-of-the-box accessibility benefits.

Aria attribute usage examples:

Aria attributes such as aria-live and aria-atomic can be added to sections of the website that are updated automatically thus informing the user that content has changed. This is important for modern web applications.

<div class="widget" aria-live="polite" aria-atomic="true">…</div>

Aria attributes can be added to elements that perform functions and the state of those elements can be communicated to assistive technology as well. For instance, a button can own an aria-clicked=”false” attribute. When the user clicks the button that performs a certain function, the attribute’s value can be changed to true with javascript. This communicates to assistive technology the state of the button which is then conveyed to the user.

I created a little jQuery plugin that makes toggling Aria attributes easier. Grab it from Github.

Landmark Roles usage examples

Navigation is a landmark role, role=”navigation”, that informs the user by assistive technology that they have navigated to the main navigation of the website.

<nav role="navigtion">…</nav>

Main is a landmark role, role=”main”, that can be used to inform assistive technology that the user has navigated to the main content of a document.

<main id="main-content" role="main">…</main>

These are simple additions to the HTML, but they should be used carefully as you can actually make a website less accessible if you use them incorrectly.

WCAG 2.0 (Aria Authoring Practices)
W3C Aria States and Properties

Step 5: Add “Skip to Content” links

A user is generally tabbing the interface when using only a keyboard to navigate a website. Depending on how the interface is designed, the user must tab through dozens of links to get to the content they’re trying to enjoy, so tabbing through a large navigation at the top of the page can take a long time.

Website navigation best practices ensure that all users, regardless of their abilities, can access the content they need. By offering keyboard shortcuts and “jump” links, you can significantly improve the experience for users who are navigating your site with a keyboard or assistive technology. An example of this would be a Skip to Content link.

Skip to main content

<a href="#main-content">Skip to Main Content</a>

will jump the user to a section that owns and ID of main-content.

<main role="main" id="main-content" tabindex="0">…</main>

With CSS you can position these links off screen and when focussed upon they appear for the user. These are generally the first links in the page so they are accessed quickly. Blind users are read these links aloud as well. I’ve found by adding tab-index=”0″ or tabindex=”-1″ to the item that in some browsers it helps bring focus to the target element.

There is nothing wrong with offering a few of these skip links to the user, e.g., Skip to Navigation, Skip to Footer.

WCAG 2.0 (Skip Navigation)

Additional resources

A resource that I contribute to and find very helpful is the a11yproject. There you will find very clear and easy to follow tips for building accessible websites.

Here’s even more:
The Paciello Group Blog
accessiBe’s guide on the Web Content Accessibility Guidelines
WebAIM Blog
Simply Accessible
A11y Buzz
…and yet more