Cómo crear una barra de progreso accesible con React

Cómo crear una barra de progreso accesible con React

Las barras de progreso son excelentes para la participación del usuario porque proporcionan un objetivo que alcanzar. En lugar de mirar una página web esperando un recurso, verá que se llena una barra de progreso. Las barras de progreso no deben limitarse solo a usuarios videntes. Todo el mundo debería poder entender tu barra de progreso con facilidad.





Entonces, ¿cómo se crea una barra de progreso accesible con React?





cómo publicar en instagram desde mac chrome
MAKEUSEOF VÍDEO DEL DÍA

Crear un componente de barra de progreso

Cree un nuevo componente llamado ProgressBar.js y agregue el siguiente código:





const ProgressBar = ({progress}) => { 
return (
<div>
<div role="progressbar"
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100}>
<span>{`${progress}%`}</span>
</div>
</div>
);
};

export default ProgressBar;

El primer elemento div es el contenedor y el segundo div es la barra de progreso real. El elemento span contiene el porcentaje de la barra de progreso.

Por motivos de accesibilidad, el segundo div tiene los siguientes atributos:



  • Una función de barra de progreso.
  • aria-valuenow para indicar el valor actual de la barra de progreso.
  • aria-valuemin para indicar el valor mínimo de la barra de progreso.
  • aria-valuemax para indicar el valor máximo de la barra de progreso.

Los atributos aria-valuemin y aria-valuemax no son necesarios si los valores máximo y mínimo de la barra de progreso son 0 y 100, ya que HTML tiene estos valores por defecto.

Dar estilo a la barra de progreso

Puede diseñar la barra de progreso usando estilos en línea o un Biblioteca CSS-in-JS como componentes con estilo . Ambos enfoques proporcionan una forma sencilla de pasar accesorios del componente al CSS.





cómo obtener un fondo de pantalla animado de windows 10

Necesita esta funcionalidad porque el ancho de la barra de progreso depende del valor de progreso pasado como accesorios.

Puede utilizar estos estilos en línea:





const container = { 
height: 20,
width: "100%",
backgroundColor: "#fff",
borderRadius: 50,
margin: 50
}

const bar = {
height: "100%",
width: `${progress}%`,
backgroundColor: "#90CAF9",
borderRadius: "inherit",
}

const label = {
padding: "1rem",
color: "#000000",
}

Modifique la parte de retorno del componente para incluir estilos como se muestra a continuación:

<div style={container}> 
<div style={bar} role="progressbar"
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>

Renderice la barra de progreso de esta manera:

<ProgressBar progress={50}/> 

Esto muestra una barra de progreso con un 50 por ciento completo.

Construcción de componentes en React

Ahora puede crear una barra de progreso accesible con porcentajes que puede reutilizar en cualquier parte de su aplicación. Con React, puede crear componentes de interfaz de usuario independientes como estos y usarlos como bloques de construcción de una aplicación compleja.