Accesibilidad en ReactJS

Accesibilidad de ReactJS: la accesibilidad es la herramienta necesaria o las formas en que el usuario puede acceder fácilmente a un sitio web con funciones como botones en los que se puede hacer clic o menús desplegables o espacios para escribir un comentario y otras cosas.

React es totalmente compatible con la creación de sitios web accesibles, a menudo mediante el uso de técnicas HTML estándar.

HTML semántico: el HTML semántico es la base de la accesibilidad web, ya que brinda comodidad al desarrollador y al equipo de pruebas. A veces usamos demasiados <div> para envolver nuestro código para que funcione y esto, a su vez, crea un problema para comprender el código y, por lo tanto, para depurarlo. 

Entonces, a veces, usamos piezas como <> o <fragment> para usarlo a nuestro favor. Recuerde que primero debemos importar fragmentos.

Ejemplo:

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

Propiedad de etiqueta: hay muchos atributos de etiquetado para reaccionar. La propiedad de atributos de etiqueta establece o devuelve el valor del atributo de una etiqueta.

Una de las propiedades de la etiqueta es el atributo htmlFor que establece o devuelve el valor del atributo.

Ejemplo:

// Using htmlFor in label of form 
// Remember the camelCase writing
  
<label htmlFor="name">Name:</label>
<input id="name" type="text" name="name"/>

Enfoque del teclado: el enfoque del teclado se refiere a la parte de la aplicación web que acepta datos o acciones del teclado del usuario, a menudo se refiere a la entrada DOM. Se utiliza principalmente cuando el usuario está completando un formulario o cualquier tipo de campo de entrada.

A veces se usa TAB para pasar a la siguiente entrada del formulario.

Referencia en React: Hacer referencia en React es más como una clave para React. Es un atributo en reaccionar que hace posible almacenar una referencia a un elemento de reacción en particular. Proporciona una forma de acceder al elemento React como referencia y se usa cuando necesitamos cambiar el elemento secundario sin usar el accesorio.

Ejemplo:

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

Eventos de mouse y puntero: la mayoría de las veces usamos un mouse o un dispositivo de puntero para acceder a Internet, por lo que debemos ser muy claros con los eventos de mouse o puntero como hacer clic, hacer doble clic, pasar el mouse y muchos otros. 

Ejemplo: este ejemplo es para un clic externo.

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'));

Ejemplo: código para onBlur y onFocus.

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} />;
}

Este código expone la funcionalidad tanto a los usuarios de dispositivos de puntero como de teclado. Tenga en cuenta también los accesorios aria-* agregados para admitir a los usuarios de lectores de pantalla. En aras de la simplicidad, no se han implementado los eventos del teclado para habilitar la interacción de las teclas de flecha de las opciones emergentes.