Come creare una barra di avanzamento accessibile con React

Le barre di avanzamento sono ottime per il coinvolgimento degli utenti perché forniscono un obiettivo da raggiungere. Invece di fissare una pagina web in attesa di una risorsa, vedi una barra di avanzamento che si riempie. Le barre di avanzamento non dovrebbero essere limitate ai soli utenti vedenti. Tutti dovrebbero essere in grado di comprendere facilmente la barra di avanzamento.

Quindi, come si costruisce una barra di avanzamento accessibile con React?

Crea un componente barra di avanzamento

Crea un nuovo componente chiamato ProgressBar.js e aggiungi il seguente codice:

cost ProgressBar = ({progress}) => {





instagram viewer


ritorno (
<div>
<ruolo div="barra di avanzamento"
 aria-valuenow={progresso}
 aria-valoremin={0}
 valore-ariamax={100}>
<span>{`${progresso}%`}</span>
</div>
</div>
 );
};
esportarepredefinito Barra di avanzamento;

Il primo elemento div è il contenitore e il secondo div è l'effettiva barra di avanzamento. L'elemento span contiene la percentuale della barra di avanzamento.

Ai fini dell'accessibilità, il secondo div ha i seguenti attributi:

• Un ruolo di progressbar.
• aria-valuenow per indicare il valore corrente della barra di avanzamento.
• aria-valuemin per indicare il valore minimo della barra di avanzamento.
• aria-valuemax per indicare il valore massimo della barra di avanzamento.

Gli attributi aria-valuemin e aria-valuemax non sono necessari se i valori massimo e minimo della barra di avanzamento sono 0 e 100 poiché l'HTML ha come impostazione predefinita questi valori.

Stile della barra di avanzamento

Puoi definire lo stile della barra di avanzamento utilizzando gli stili incorporati o a Libreria CSS-in-JS come componenti in stile. Entrambi questi approcci forniscono un modo semplice per passare oggetti di scena dal componente al CSS.

Hai bisogno di questa funzionalità perché la larghezza della barra di avanzamento dipende dal valore di avanzamento passato come oggetti di scena.

Puoi utilizzare questi stili incorporati:

cost contenitore = {
 altezza: 20,
 larghezza: "100%",
 colore di sfondo: "#F F F",
 bordoRaggio: 50,
 margine: 50
}
cost barra = {
 altezza: "100%",
 larghezza: `${progresso}%`,
 colore di sfondo: "#90CAF9",
 bordoRaggio: "ereditare",
}
cost etichetta = {
 imbottitura: "1 rem",
 colore: "#000000",
}

Modifica la parte di ritorno del componente per includere gli stili come mostrato di seguito:

<stile div={contenitore}>
<stile div={barra} role="barra di avanzamento"
 aria-valuenow={progresso}
 aria-valoremin={0}
 valore-ariamax={100}>
<stile span={etichetta} >{`${progresso}%`}</span>
</div>
</div>

Visualizza la barra di avanzamento in questo modo:

<Avanzamento ProgressBar={50}/>

Viene visualizzata una barra di avanzamento con il 50% di completamento.

Costruire componenti in React

Ora puoi creare una barra di avanzamento accessibile con percentuali che puoi riutilizzare in qualsiasi parte della tua applicazione. Con React, puoi creare componenti dell'interfaccia utente indipendenti come questi e utilizzarli come elementi costitutivi di un'applicazione complessa.