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.
