Open In App

Accessibility in ReactJS

Improve
Improve
Like Article
Like
Save
Share
Report

ReactJS Accessibility: 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 dropdowns or spaces to write a comment and stuff.

React fully supports building accessible websites, often by using standard HTML techniques.

Semantic HTML: Semantic HTML is the foundation of web Accessibility as they provide convenience to the developer and the testing team.  Sometimes we use too many <div> to wrap our code to make it work and this, in turn, makes a problem of understanding the code and thus debugging the code. 

So at times, we use pieces like <> or <fragment> to use it in our favor. Remember we need to import fragments first.

Example:

Javascript




import React, { Fragment } from 'react';
function studentList() {
  return (
    <Fragment>      
        <dt>24</dt>
          <dd> Stefen Sen</dd>
    </Fragment>  );
}


Label Property: There are many labelling attributes to react. The label attributes property sets or returns the value of the attribute of a label.

One of the label property is the htmlFor attribute that sets or return the value of the for the attribute.

Example:

Javascript




// Using htmlFor in label of form 
// Remember the camelCase writing
  
<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. Mostly used when the user is filling up a form or any kind of input field.

Sometimes TAB is used to get to the next entry in the form.

Reference in React: Referencing in React is more like a key to React. It is an attribute in react that makes it possible to store a reference to a particular react element. It provides a way to access the React element for reference and is used when we need to change the child element without using the prop.

Example:

Javascript




class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
  }  
  render() {  
    return <div ref={this.callRef} />;  
  }  
}


Mouse and pointer-events: Most of the time we use a mouse or pointer device to access the internet, so we must be very clear with the mouse or pointer-events like click, Double Click, hover and many others. 

Example: This example is for outer click.

Javascript




import React from 'react';
import ReactDOM from 'react-dom';
  
function clickMe() {
  alert("You Just Clicked");
}
  
const clickFun = (
  <button onClick={clickMe}>Click Me!</button>
);
  
  
ReactDOM.render(clickFun, document.getElementById('root'));


Example: Code for onBlur and onFocus.

Javascript




function App() {
  const [fieldValue, setFieldValue] = React.useState('');
  
  const handleBlur = (e) => setFieldValue(e.target.value);
  
  console.log(fieldValue);
  
  return <input onBlur={handleBlur} />;
}
  
  
function App() {
  const [fieldValue, setFieldValue] = React.useState("");
  
  const handleChange = (e) => setFieldValue(e.target.value);
  
  console.log(fieldValue);
  
  return <input onChange={handleChange} />;
}


This code exposes the functionality to both pointer device and keyboard users. Also note the added aria-* props to support screen-reader users. For simplicity’s sake the keyboard events to enable arrow key interaction of the popover options have not been implemented.



Last Updated : 17 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads