About web accessibility

Foreword

The web is a lot less accessible than it should be. This is because there is so much to know, so little of which comes ‘naturally’. If you yourself have 20/20 vision, or don’t suffer from motor impairment, it’s only natural you’re not too familiar with what the web looks, ergo, feels like to people with disabilities, impairments or other factors that hinder their experience. Now, as designers and developers, it is our responsibility to create an accessible web. For an accessible web is a usable web. This is what I want to talk about today.

Accessibility equals usability

As the great Dieter Rams once said: Design is for Everyone.

We seem to have neglected this in the recent years, with flashy animation and low contrast for the sake of ‘cleanliness’. This article aims to give some actionable guidelines for developers to improve semantics and accessibility without too much effort.

1. Media queries

We have access to possibly one of the most powerful 2D styling engines in all of programming, CSS. To make a website responsive, we’ve often need to use media queries for applying styles at a specific breakpoint. Did you know there are also a handful of media queries you can use to change how your website or application behaves, depending on user preference?

With queries like @prefers-reduced-motion, @prefers-contrast, @prefers-reduced-transparency, @prefers-color-scheme and @inverted-colors, it’s easier than ever to progressively enhance your application, while simultaneously preventing any hinderance for impaired people.

2. Keyboard

This should be fairly obvious, but you need to make sure your website or application is easily navigable with just a keyboard. One thing we should always strive for is to check if the tab order makes sense. Usually, tab order should be decently fine so long as good semantics are used. For more complex interactive layouts, we might want to improve or modify the tab order, to improve usability for keyboard users. In HTML, we have a couple of ways to interact with the tab order besides changing the overall structure of our HTML. Most elements support the tabindex attribute, which allows us to change how and if an element is focused.

From WebAIM:

The tabindex attribute has three distinct uses: tabindex="1" (or any number greater than 1) defines an explicit tab or keyboard navigation order. This must always be avoided.

tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link/button on the page.

tabindex="-1" allows things besides links and form elements to receive “programmatic” focus, meaning focus can be set to the element through scripting.

If you want to make sure your users can use your website or application without touching the mouse, you can also use tabindex. By setting tabindex to 0 on any element, you can make sure it is the first thing focusable.

3. Headings and semantics

The heading element is one of the most important for accessibility. It’s meant to be the “table of contents” for your website. If you’re using the h1-6 elements, you can use the heading structure to create a better navigation structure.