Entwicklung mit dem Fokus auf Barrierefreiheit
Barrierefreiheit ist ein relativ umfangreiches Thema. Wir können es nicht vollständig in einem einzigen Learn-Modul abdecken. Es gibt jedoch einige Grundprinzipien, die Sie in jeder Seite, die Sie erstellen, implementieren sollten. Es ist immer einfacher, eine barrierefreie Seite von Anfang an zu entwerfen, als auf eine vorhandene Seite zurückzugreifen, um sie barrierefrei zu machen.
Verwenden von HTML auf die Art und Weise, wie es entworfen wurde
HTML bietet viele Elemente, mit denen Sie eine Seite erstellen können, darunter Schaltflächen, Links und Formularsteuerelemente. Jedes dieser Elemente verfügt über eine integrierte Funktionalität, z. B. dass es anklickbar ist, als Link verwendet werden kann oder den Fokus akzeptiert.
Hinweis
Focus ist ein Begriff aus der Webentwicklung und bedeutet, dass ein Steuerelement Eingaben von einer Tastatur akzeptieren kann. Eine Schaltfläche kann den Fokus akzeptieren, so dass ein Benutzer sie durch Drücken der Leertaste aktivieren oder „anklicken“ kann.
Mit CSS und JavaScript ist es möglich, jedes Element wie jede Art von Steuerelement aussehen zu lassen. Beispielsweise können Sie <span> verwenden, um ein <button>-Element zu erstellen, und <b> kann zu <a> werden. Obwohl diese Funktion einige Möglichkeiten zum Formatieren oder Gestalten Ihrer Seite bietet, entfernt sie die integrierte Funktionalität. Tools wie eine Sprachausgabe können nicht verstehen, dass <span> als <a> verwendet wird. Ein Benutzer, der mit einer Tastatur surft, kann den Fokus nicht auf ein <div>-Element festlegen, das so programmiert wurde, dass es ein <button>-Element simuliert.
Ein weiteres HTML-Element, das häufig übersprungen wird, sind Header (<h1> bis <h6>). Aus visueller Sicht beginnen Headertags von der größten zur kleinsten Textgröße. Diese Konvention verleitet viele Entwickler dazu, auf Headerelemente zu verzichten und stattdessen <div> oder andere generische Elemente zu stilisieren.
Leider vermitteln stilisierte generische Elemente nur visuelle und keine strukturellen Informationen. Benutzer von Sprachausgaben sind stark auf Überschriften angewiesen, um Informationen zu finden und eine Seite zu durchsuchen. Das Erstellen von beschreibendem Überschrifteninhalt und die Verwendung semantischer Überschriftentags sind wichtig für die Erstellung einer leicht navigierbaren Website für Benutzer von Sprachausgaben.
Als bewährte Methode sollten Sie immer den entsprechenden HTML-Code verwenden, wenn Sie Steuerelemente auf einer Seite erstellen. Wenn Sie einen Link verwenden möchten, verwenden Sie <a>, oder verwenden Sie <button> für eine Schaltfläche.
Verwenden von guten visuellen Hinweisen
Entwickler betrachten Sprachausgaben häufig als einziges Tool für Barrierefreiheit. Benutzer können jedoch zahlreiche andere Tools oder gar keine Tools verwenden. Benutzer, die den Browser verwenden, verlassen sich auf bestimmte visuelle Hinweise, um zu verstehen, wie sie mit Ihrer Seite interagieren können.
Eines der hervorragenden Features von CSS ist, dass vollständige Kontrolle darüber möglich ist, wie eine Seite angezeigt wird, einschließlich der Entfernung bestimmter Anzeigeelemente. Beispielsweise können Sie die Kontur aus einem Textfeld oder die Unterstreichung aus einem Link entfernen. Leider kann das Entfernen dieser Arten von Hinweisen es für einen Benutzer, der von ihnen abhängig ist, schwieriger machen, den Typ des Steuerelements zu erkennen.
Berücksichtigen von Tastaturen
Einige Benutzer können keine Maus oder kein Trackpad/Touchpad verwenden. Stattdessen nutzen diese Benutzer Tastaturinteraktionen, um von einem Element zum nächsten zu gelangen. Es ist wichtig, dass Ihre Seiten Ihre Inhalte in logischer Reihenfolge präsentieren, damit ein Tastaturbenutzer auf jedes interaktive Element zugreifen kann, wenn er sich nach unten bewegt.
Wenn sich ein Benutzer mithilfe der Tabulatortaste durch eine Seite bewegt, wechselt der Fokus von einem Steuerelement zum nächsten basierend auf der Reihenfolge, in der die Steuerelemente im HTML-Quelltext aufgeführt werden. Die Steuerelemente für Ihre Seite sollten in der HTML-Quelle in der Reihenfolge aufgeführt werden, in der Sie erwarten, dass die Seite durchsucht wird, während CSS verwendet wird, um das visuelle Layout der Seite für Benutzer zu erstellen.
Angenommen, Sie erstellen ein Formular mit zwei Spalten. Sie sollten überlegen, welches der natürliche Ablauf für eine Person ist, die das Formular ausfüllt, und die Steuerelemente dann in dieser Reihenfolge auflisten. Anschließend können Sie CSS verwenden, um die Spalten zu erstellen und die Steuerelemente an den entsprechenden Stellen anzuzeigen.
Die Tastaturnavigation basiert stark auf semantischem HTML. Bestimmte Steuerelemente (z. B. Schaltflächen) akzeptieren den Fokus, div-Elemente hingegen nicht. Wenn Sie Steuerelemente neu erstellen, die bereits in HTML vorhanden sind, erschweren Sie es Benutzern, Ihre Seite mit einer Tastatur zu verwenden.
Wichtig
Tastaturnavigation muss manuell getestet werden, und dieser Test sollte auf jeder Seite erfolgen, die Sie erstellen. WebAIM stellt weitere Informationen zu Tastaturnavigationsstrategien zur Verfügung.