The basics of Web Accessibility in React & Gatsby Projects
Tags: react, gatsby, webdev, a11y
Published: 2020-01-14 09:15:47

<h2><strong>What is </strong>Accessibility and Web Accessibility<strong>?</strong></h2>
<p><strong>Accessibility</strong> is the degree to which <strong>an environment is usable</strong> by as many people as possible.</p>
<p><strong>Web Accessibility</strong> is the degree to which <strong>a website is usable </strong>by as many people as possible.</p>
<p>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.</p>
<h2><b>What is WCAG?</b></h2>
<p><a href="https://www.w3.org/WAI/standards-guidelines/wcag/"><strong>WCAG</strong></a> means <strong>W</strong>eb <strong>C</strong>ontent <strong>A</strong>ccessibility <strong>G</strong>uidelines:</p>
<ul><li>published by <a href="https://www.w3.org/">W3C</a></li><li>a large and very detailed document that includes very precise, technology-agnostic criteria for accessibility conformance.</li></ul>
<p>The criteria are split up into four main categories, which specify how implementations can be made <strong>perceivable</strong>, <strong>operable</strong>, <strong>understandable</strong>, <strong>robust</strong>.</p>
<h3>I. Perceivable</h3>
<ul><li>Provide <strong>text alternatives for non-text content</strong>.</li><li>Provide <strong>captions</strong> and other alternatives for multimedia.</li><li>Create content that <strong>can be presented in different ways</strong>, including by assistive technologies, without losing meaning.</li><li><strong>Make it easier</strong> for users to see and hear content.</li></ul>
<h3>II. Operable</h3>
<ul><li>Make all functionality <strong>available from a keyboard</strong>.</li><li>Give users <strong>enough time to read and use</strong> the content.</li><li>Do not use content that causes seizures or physical reactions.</li><li>Help users <strong>navigate and find content</strong>.</li><li>Make it easier to use inputs other <strong>than a keyboard</strong>.</li></ul>
<h3>III. Understandable</h3>
<ul><li>Make text <strong>readable and understandable</strong>.</li><li>Make content <strong>appear and operate in predictable ways.</strong></li><li>Help users <strong>avoid and correct mistakes</strong>.</li></ul>
<h3>IV. Robust</h3>
<p>Maximize compatibility with current and future user tools.</p>
<h3>Most common WCAG failures?</h3>
<img src="https://lh6.googleusercontent.com/2lKuccQKo6rbKGeRPQb2ql-aC9n2xFfiviMQ0dZ3f5Fnc8PVMXR8-ID4Yqwhf9sQZFrf-tF_r_e2bQcRZIN1E8UftBZYhQK-LvHOm-ijisIajML5A_9LWkU_Zb9itfOkKvCcDFo0uZk" alt="wcag failures"/>
<h2><b>How to achieve Accessibility in React &amp; Gatsby projects?</b></h2>
<p>In <strong>React</strong> &amp; <strong>Gatsby</strong> you have full control of generated HTML so you can achieve an accessible website, by using standard HTML techniques. </p>
<h3>Set Page Titles</h3>
<p>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.</p>
```javascript
componentDidMount() {
  document.title = "Contact Us - Pagepro LTD";
}
```
<p>You can also use a <a rel="noreferrer noopener" href="https://github.com/nfl/react-helmet" target="_blank">react-helmet</a> plugin instead where you handle head tags per page:</p>
```javascript
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>
    );
  }
}
```
<h3>Write Semantic HTML</h3>
<p>An important principle in the web is the idea of using&nbsp;<a href="https://www.lifewire.com/what-is-html-3482374">HTML elements</a>&nbsp;to indicate what they actually are, rather than how they may appear in the browser by default. This is known as using semantic HTML.</p>
<p>Examples of semantic HTML tags include:</p>
<ul><li>Header tags &lt;h1&gt;&nbsp;through &lt;h6&gt;</li><li>Paragraph tags &lt;p&gt; indicating the enclosed text</li><li>Button tags &lt;button&gt; for clickable controls</li><li>Anchor tags &lt;a&gt; for links</li></ul>
<p><strong>Semantic markup:</strong></p>
```javascript
<button className="c-btn" onClick={this.onClick}>
  Apply
</button>
```
<p class="has-text-color has-vivid-red-color"><strong>Non-semantic markup:</strong></p>
```javascript
<div onClick={this.onClick} className=”c-btn”>
   Apply
</div>
```
<h3>Set lang attribute</h3>
<p>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 <strong>lang</strong> <strong>attribute</strong> for HTML tag and also for specific page elements:</p>
```html
<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>
```
<h3>Provide alternative text for images</h3>
<p>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 <strong>alt attributes</strong> that are describing the content in easy to understand form.</p>
```html
<img src="lola.jpg" alt="A picture of sitting Yorkshire Terrier called Lola" />
```
<h3>Use the aria-label attribute</h3>
<p>Let's imagine that you have a popup dialog with a cross as a close button.</p>
<p>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. <strong>aria-label</strong> explicitly tells them what the click on the button will do.</p>
```html
<button aria-label="Close Dialog" onclick="confirmationDialog.close()">X</button>
```
<h2>A Few Helpful Tools</h2>
<p>You can also install ESLint jsx-a11y plugin for your React projects to display accessibility rules you miss while building your application.</p>
```javascript
npm install eslint-plugin-jsx-a11y  --save-dev
```
<p>Update your <em>eslint.rc</em> file’s plugin and extends sections in your code editor. For plugin section:</p>
```javascript
"plugin": [ 
   “jsx-a11y”
  ]
```
<p>In the extends section:</p>
```javascript
"extends": [
  "plugin": "jsx-a11y/recommended"
]
```
<h2>What are the benefits of building accessible sites?</h2>
<ul><li>Semantic HTML, which improves accessibility, also improves SEO, making your site more findable.</li><li>Caring about accessibility demonstrates good ethics and morals, which improves your public image.</li><li>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.</li></ul>