So erstellen Sie mit React einen barrierefreien Fortschrittsbalken

Fortschrittsbalken eignen sich hervorragend für die Benutzerinteraktion, da sie ein zu erreichendes Ziel angeben. Anstatt auf eine Webseite zu starren, die auf eine Ressource wartet, sehen Sie einen Fortschrittsbalken, der sich füllt. Fortschrittsbalken sollten nicht nur auf sehende Benutzer beschränkt sein. Jeder sollte in der Lage sein, Ihren Fortschrittsbalken mit Leichtigkeit zu verstehen.

Wie erstellt man also mit React einen barrierefreien Fortschrittsbalken?

MAKEUSEOF VIDEO DES TAGES

Erstellen Sie eine Fortschrittsbalkenkomponente

Erstellen Sie eine neue Komponente namens ProgressBar.js und fügen Sie den folgenden Code hinzu:

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;

Das erste div-Element ist der Container und das zweite div ist der eigentliche Fortschrittsbalken. Das span-Element enthält den Prozentsatz des Fortschrittsbalkens.

Aus Gründen der Barrierefreiheit hat das zweite div die folgenden Attribute:

Eine Rolle des Fortschrittsbalkens.
aria-valuenow, um den aktuellen Wert des Fortschrittsbalkens anzuzeigen.
aria-valuemin, um den Mindestwert des Fortschrittsbalkens anzugeben.
aria-valuemax, um den maximalen Wert des Fortschrittsbalkens anzugeben.

Die Attribute aria-valuemin und aria-valuemax sind nicht erforderlich, wenn die Maximal- und Minimalwerte des Fortschrittsbalkens 0 und 100 sind, da HTML diese Werte standardmäßig verwendet.

Gestalten des Fortschrittsbalkens

Sie können den Fortschrittsbalken mit Inline-Stilen oder a gestalten CSS-in-JS-Bibliothek wie styled-components . Beide Ansätze bieten eine einfache Möglichkeit, Requisiten von der Komponente an das CSS zu übergeben.

Sie benötigen diese Funktionalität, da die Breite des Fortschrittsbalkens von dem Fortschrittswert abhängt, der als Props übergeben wird.

Sie können diese Inline-Stile verwenden:

verbinde mein Handy mit meinem Computer

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", 
}

Ändern Sie den Rückgabeteil der Komponente so, dass er Stile wie unten gezeigt enthält:

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

Rendern Sie den Fortschrittsbalken wie folgt:

<ProgressBar progress={50}/>

Dies zeigt einen Fortschrittsbalken mit 50 Prozent abgeschlossen an.

Bauteile in Reaktion

Sie können jetzt einen barrierefreien Fortschrittsbalken mit Prozentwerten erstellen, den Sie in jedem Teil Ihrer Anwendung wiederverwenden können. Mit React können Sie solche unabhängigen UI-Komponenten erstellen und sie als Bausteine einer komplexen Anwendung verwenden.