What is Accessibility and Web Accessibility?

Accessibility is the degree to which an environment is usable by as many people as possible.

Web Accessibility is the degree to which a website is usable by as many people as possible.

We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

What is WCAG?

WCAG means Web Content Accessibility Guidelines:

published by W3C
a large and very detailed document that includes very precise, technology-agnostic criteria for accessibility conformance.

The criteria are split up into four main categories, which specify how implementations can be made perceivable, operable, understandable, robust.

I. Perceivable

Provide text alternatives for non-text content.
Provide captions and other alternatives for multimedia.
Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
Make it easier for users to see and hear content.

II. Operable

Make all functionality available from a keyboard.
Give users enough time to read and use the content.
Do not use content that causes seizures or physical reactions.
Help users navigate and find content.
Make it easier to use inputs other than a keyboard.

III. Understandable

Make text readable and understandable.
Make content appear and operate in predictable ways.
Help users avoid and correct mistakes.

IV. Robust

Maximize compatibility with current and future user tools.

Most common WCAG failures?

How to achieve Accessibility in React & Gatsby projects?

In React & Gatsby you have full control of generated HTML so you can achieve an accessible website, by using standard HTML techniques.

Set Page Titles

Descriptive HTML page titles help users quickly understand a web page’s content. Remember to set up initial title and update it on every page change.

componentDidMount() {
  document.title = "Contact Us - Pagepro LTD";
}

You can also use a react-helmet plugin instead where you handle head tags per page:

import React from "react";
import {Helmet} from "react-helmet";

class App extends React.Component {
  render () {
    return (
        <div className="page">
            <Helmet>
                <title>Contact Us - Pagepro LTD</title>
            </Helmet>
            ...
        </div>
    );
  }
}

Write Semantic HTML

An important principle in the web is the idea of using HTML elements to indicate what they actually are, rather than how they may appear in the browser by default. This is known as using semantic HTML.

Examples of semantic HTML tags include:

Header tags <h1> through <h6>
Paragraph tags <p> indicating the enclosed text
Button tags <button> for clickable controls
Anchor tags <a> for links

Semantic markup:

<button className="c-btn" onClick={this.onClick}>
  Apply
</button>

Non-semantic markup:

<div onClick={this.onClick} className=”c-btn”>
   Apply
</div>

Set lang attribute

Indicating the text language used on a web page is critical because assistive technologies need to know how to correctly pronounce the text. If you are displaying text in different languages on the same page you can use lang attribute for HTML tag and also for specific page elements:

<html lang="en-GB">
  <head>
    <title>Contact Us - Pagepro LTD</title>
  </head>
  <body>
    <p>
        <span lang="pl">"Klienci mówia, że jesteśmy całkiem mili."</span> . 
    </p>
  </body>
</html>

Provide alternative text for images

People with visual disabilities or other cognitive impairments often cannot perceive information conveyed through images without help from a textual alternative. Image-based content that impedes accessibility includes charts, graphs, and other non-textual content. Remember to add alt attributes that are describing the content in easy to understand form.

<img src="lola.jpg" alt="A picture of sitting Yorkshire Terrier called Lola" />

Use the aria-label attribute

Let's imagine that you have a popup dialog with a cross as a close button.

Most people would be able to infer visually that the top right button will close the dialog. A blind person using assistive technology might just hear "X", which doesn't mean much without the visual clues. aria-label explicitly tells them what the click on the button will do.

<button aria-label="Close Dialog" onclick="confirmationDialog.close()">X</button>

A Few Helpful Tools

You can also install ESLint jsx-a11y plugin for your React projects to display accessibility rules you miss while building your application.

npm install eslint-plugin-jsx-a11y  --save-dev

Update your eslint.rc file’s plugin and extends sections in your code editor. For plugin section:

"plugin": [ 
   “jsx-a11y”
  ]

In the extends section:

"extends": [
  "plugin": "jsx-a11y/recommended"
]

What are the benefits of building accessible sites?

Semantic HTML, which improves accessibility, also improves SEO, making your site more findable.
Caring about accessibility demonstrates good ethics and morals, which improves your public image.
Other good practices that improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. In fact, everyone can benefit from many such improvements.

The basics of Web Accessibility in React & Gatsby Projects