Accessibility in React

Accessibility is the ability for applications to be used by everyone, including those with disabilities.As a devloper its your responsibility to make sure that everyone get the right experience in your app. For making your react app Accessible you should know what is accessibility exactly is?? so let's get started

What is Accessibility and Why it is needed?

Web accessibility is also referred to as a11y.A11y is a numero-nym that stands for accessibility as “a” followed by 11 more letters, followed by “y”.It is the design and creation of websites that can be used by everyone.

Accessibility support is necessary to allow assistive technology to interpret web pages.

Accessibility is the necessary tool or ways in which a website can be made easy to access by the user with features like clickable buttons or drop downs or spaces to write a comment and stuff.

Accessibility also helps in power users may find it faster to interact with your application using a keyboard, rather than a mouse or touch screen. Especially for applications involving a large amount of data entry, good keyboard navigation support can dramatically increase user productivity.

Accessibility Standards and Guidelines
There are some standard guidelines available for achieving accessibility which helps us to achive accessibility for building websites.Some of them are:

WCAG: Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

natural information such as text, images, and sounds

code or markup that defines structure, presentation, etc.

WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) is the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.

Accessibility Using React:

React fully supports building accessible websites, often by using standard HTML techniques.Let's see how we can make your react applications more accessible.

ARIA:
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make Web content and Web applications more accessible for users with disabilities.ARIA HTML attributes are fully supported in JSX, and therefore can be used as attributes for elements and components in React. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased.

<input
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Semantic HTML:
Semantic HTML is the foundation of accessibility in a web application.Sometimes we break HTML semantics when we add <div> elements to our JSX to make our React code work, especially when working with lists (<ol>, <ul> and <dl>) and the HTML <table> this makes a problem of understanding the code and thus debugging the code.

So at times, we use pieces like <> or allows you to group together a list of child elements without adding more nodes to the DOM.

import React, { Fragment } from 'react';
function  employeeList() {
return (
    <Fragment>  
        <dt>EA824412</dt>
        <dd> Sreashi Saha</dd>
    </Fragment> );
}

Labeling:
Labeling is used to makes the forms accesible.Every HTML form control, such as <input> and <textarea>, needs to be labeled accessibly. There is one important thing you must provide in your application: a textual label for each control . This gives a screen reader user context about the control they are interacting with.Although these standard HTML practices can be directly used in React, note that the for attribute is written as htmlFor in JSX:

<label htmlFor="name">Name:</label>
<input id="name" type="text" name="name"/>

Keyboard Focus:
Keyboard Focus refers to the part of the web application that is accepting data or actions from the keyboard from the user often refers to the DOM input.We can use ref functions to handle where we want the user to focus on in our application.Using the React.createRef() we can control the focus.

Use the ref callback to store a reference to the text input DOM

Create a ref to store the textInput DOM element

Let's have a look how to create a ref to an element in the JSX of a component class..

class CustomDiv extends React.Component {
  constructor(props) {
    super(props);

    this.div = React.createRef();
  }
  render() {

    return (
      <div
        tabIndex= "-1"

        ref={this.div}
      />
    );
  }


}

Then we can focus it elsewhere in our component when needed:

Explicitly focus the div using raw DOM API

We are accessing "current" to get the DOM node

focus() {

 this.textInput.current.focus();


}

When using a HOC to extend components, it is recommended to foward the ref to the wrapped component using the forwardRef function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.

Setting Document Title:

Setting document title provides a declarative way to specify document.title in a single-page app.It is actually crucial for screen readers, the document title is the first thing screen readers announce. It updates the content currently showing in the browser tab helping to announce exactly where the users (who might depend on screen readers) are in your application. It is also really great for search engine optimisation.Set the document <title> to correctly describe the current page content as this ensures that the user remains aware of the current page context.Let's see an example:

function App() {
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

  render() {
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }

Development Assistance:
Devlopment Assistance can helps to improve yours website Accessibility.

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:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]

}

Hopefully, It helps to improve your efficiency writing React and also helps to build your website more accesible. If any queries regarding this write them down in the comment below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!