Web accessibility best practices BLOG

Why web accessibility matters

Lots of online activities have become commonplace for us. However, innovations are happening so quickly today that even the most tech-savvy users sometimes find themselves out of the loop. This feeling is more widely felt among disabled and physically impaired users.

According to the World Health Organisation, 15% of the world’s population lives with some form of impairment.

Web accessibility 1

As many basic practices are moved to the internet, the concept of digital inclusion (where no one is left behind or disadvantaged) has become a big concern. With the current online-first (and sometimes online-only) information trend, many physically-challenged people might not be able to access this information, as not all websites are optimized for these kinds of visitors.

Ideally, any designer, developer, or content manager should think about creating accessible content in much the same way as an architect treats home access solutions, such as wheelchair ramps, stairways, and lifts. The stark reality is that web accessibility is usually an afterthought, and that’s a critical problem.

Let’s explain digital accessibility and review some basic design and development practices that can help provide more personal and adaptive experiences for all users.

What is digital accessibility?

In a broad sense, accessibility implies that users with dyslexia, visual and speech impairment, motion disorders and other disabilities can comprehend, navigate, and contribute to the World Wide Web. 

Web accessibility 2

More narrowly, accessibility is applied to older people with declining abilities and anyone facing situational limitations due to poor internet access, devices characteristics, and more. The ultimate goal is to provide a seamless user experience for everyone, indiscriminately.

Web accessibility 3

There are also significant business perks to improving website accessibility. It will help your company drive more traffic and will enhance its image as well as promote an inclusive corporate culture.

Web accessibility 10

Web accessibility guidelines in a nutshell

To streamline digital accessibility practices, the World Wide Web Consortium prepared The Web Content Accessibility Guidelines (WCAG 2.1 as at February 2019). It is a set of rules that helps make the internet available to as many people as possible.

According to the document, accessible content is operable, comprehendable, understandable, and robust.

WCAG is made up of 12 guidelines that are split into three degrees of compliance: (A — lowest, AA, or AAA — highest).

Web accessibility checklist

Let’s analyze some practical recommendations on how to make a website digitally compliant.

Web accessibility best practices: Color contrast

In order to make content comprehensible, it’s critical to ensure an adequate color contrast between fonts and background on a document, slide and web pages.

Keep in mind that color alone never conveys meaning. It should be accompanied by different font sizes, bold text, shapes, patterns, or a halo effect to stress the information.

Web accessibility 11

Web accessibility best practices: Keyboard navigation

Since a large part of assistive technologies supports only keyboard navigation, websites must allow the ability to work without a mouse.

Using tabindex

The most common means of navigating using a keyboard is the Tab key.

Though the DOM position provides a convenient tab order of native elements, sometimes it is necessary to alternate it. One of the ways to set an element’s tab position is to leverage the tabindex HTML attribute.

Web accessibility 5

The tabindex attribute offers three scenarios:

1. tabindex="-1" makes the element focusable, but not reachable via sequential keyboard navigation;

2.  tabindex="0" allows non-form objects and links to trigger interaction, placing them in the logical navigation order;

3.  tabindex="1" defines an explicit tab order.

As any tabindex greater than 0 is considered an anti-pattern, it is better to restructure the HTML.

Note that it’s preferable to apply the tabindex attribute only to interactive components.

Skip to content button

According to surveys, 82% of screen readers users utilize a “Skip to main content” button. It provides a shortcut to tabbing (or reading) through the entire page.

Here is one of the ways to make a button visible only when it's focused, which is a common way of representation.

Web accessibility 6

Modal windows

A modal dialog can be a rather problematic element. It may not capture the focus or a screen reader user may be unaware that a dialog box was opened and how to access it.

Web accessibility 7

Example of an HTML dialog box with the main content and tabbable elements

Keyboard event handlers are applied to hold keyboard focus inside the dialog boxes. For users of screen readers, the modality is enabled by applying the aria-hidden="true" attribute for all page content apart from the dialog box.

Here is one of the methods to implement modal window accessibility:

Web accessibility 8

Web accessibility best practices: Screen readers adaptation

Screen readers adaptation is one of the most complex web accessibility practices.

A screen reader is an application that translates information displayed on the screen (text, links, images, and so on) to a format that people with poor vision understand.

Typically, one screen reader interacts with only one browser at a maximum level.

Web accessibility 8

If you have to support several screen readers, it can turn into a nightmare. Nevertheless, there are a number of useful practices that will help patch things up.

1. Check out roles and ARIA (Accessible Rich Internet Applications) attributes. Roles set tag semantic values. ARIA attributes define screen reader behavior. For instance, the aria-live attribute notifies screen reader users when the content is updated.

Web accessibility 12
2. Use header tags to ensure a proper content structure. Don’t skip heading levels, because this can confuse screen reader users. Also, it’s recommended to have only one H1 per page.

3. If you create an accessible table, mark header cells with th, and data cells with td. For more complex tables, apply scope, id, and headers attributes.

4. Make sure all your buttons and links have unique and descriptive titles.

5. The aria-label attribute helps identify such form controls as text fields, radio buttons, and checkboxes. If the inputs are grouped, you can also add aria-labelledby for the container element.

6. If you don’t stick with default options, it is possible to create customized inputs. The following example code shows how to create a custom checkbox:

Web accessibility 9

The must-use tools for web accessibility evaluation

To check if the website is accessible, we recommend the following time-tested tools:

There is a wide range of services for testing color contrast, such as Colour Contrast Analyzer and Webaim Color Contrast Checker.

2. The Web Accessibility Toolbar (WAT) assists in evaluating a web page for a variety of compliance  aspects.

3. SortSite scans the whole website for issues with accessibility, browser compatibility, SEO, and usability.

4. WAVE provides visual feedback about digital content accessibility.

Web accessibility is the new usability

Sir Tim Berners-Lee, the father of the World Wide Web, hoped it would be a place for everyone. That’s why we need to build the internet with accessibility in mind.

This is the case against all kinds of exceptions — and we must win it. To put digital inclusion into practice, we should embrace people from the most diverse backgrounds, regardless of their level of health.

Think of it as a backup. You never know what tough conditions you will be exposed to. More than that, many of us will face exclusion as we age. When we care about accessibility, we care about our future selves.

Let's get rolling!
Get a chance to build the next big thing with our development team
Have a project in mind?
We'll help you develop this idea into a great solution.
Give us a shout!