Een toegankelijke voortgangsbalk maken met React

Voortgangsbalken zijn geweldig voor gebruikersbetrokkenheid omdat ze een doel bieden om te bereiken. In plaats van naar een webpagina te staren die op een bron wacht, zie je een voortgangsbalk vollopen. Voortgangsbalken mogen niet beperkt blijven tot alleen ziende gebruikers. Iedereen zou uw voortgangsbalk gemakkelijk moeten kunnen begrijpen.

Dus hoe bouw je een toegankelijke voortgangsbalk met React?

Maak een voortgangsbalkcomponent

Maak een nieuwe component met de naam ProgressBar.js en voeg de volgende code toe:

const Voortgangsbalk = ({voortgang}) => {
opbrengst (
<div>
<div rol="voortgangsbalk"
 aria-valuenow={voortgang}
 aria-waardemin={0}
 aria-waardemax={100}>
<span>{`${voortgang}%`}</span>
</div>
</div>
 );
};
exporterenstandaard Voortgangsbalk;

Het eerste div-element is de container en de tweede div is de daadwerkelijke voortgangsbalk. Het span-element bevat het voortgangsbalkpercentage.

Voor toegankelijkheidsdoeleinden heeft de tweede div de volgende attributen:

• Een rol van voortgangsbalk.
• aria-valuenow om de huidige waarde van de voortgangsbalk aan te geven.
• aria-valuemin om de minimale waarde van de voortgangsbalk aan te geven.
• aria-valuemax om de maximale waarde van de voortgangsbalk aan te geven.

De attributen aria-valuemin en aria-valuemax zijn niet nodig als de maximale en minimale waarden van de voortgangsbalk 0 en 100 zijn, aangezien HTML standaard deze waarden gebruikt.

De voortgangsbalk stylen

U kunt de voortgangsbalk opmaken met behulp van inline stijlen of een CSS-in-JS-bibliotheek zoals gestileerde componenten. Beide benaderingen bieden een eenvoudige manier om rekwisieten van de component door te geven aan de CSS.

U hebt deze functionaliteit nodig omdat de breedte van de voortgangsbalk afhangt van de voortgangswaarde die als rekwisieten wordt doorgegeven.

U kunt deze inline-stijlen gebruiken:

const houder = {
 hoogte: 20,
 breedte: "100%",
 Achtergrond kleur: "#fff",
 grensRadius: 50,
 marge: 50
}
const balk = {
 hoogte: "100%",
 breedte: `${voortgang}%`,
 Achtergrond kleur: "#90CAF9",
 borderRadius: "erven",
}
const label = {
 opvulling: "1rem",
 kleur: "#000000",
}

Wijzig het retourgedeelte van de component om stijlen op te nemen, zoals hieronder weergegeven:

<div-stijl={container}>
<div style={bar} rol="voortgangsbalk"
 aria-valuenow={voortgang}
 aria-waardemin={0}
 aria-waardemax={100}>
<overspanningsstijl={label} >{`${voortgang}%`}</span>
</div>
</div>

Geef de voortgangsbalk als volgt weer:

<ProgressBar-voortgang={50}/>

Dit toont een voortgangsbalk met 50 procent voltooid.

Componenten bouwen in React

U kunt nu een toegankelijke voortgangsbalk met percentages maken die u in elk deel van uw toepassing kunt hergebruiken. Met React kunt u dergelijke onafhankelijke UI-componenten maken en deze gebruiken als bouwstenen van een complexe applicatie.