Accessibility in ReactJS
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.
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.
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.
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.
Example: Code for onBlur and onFocus.
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.