Wenn Sie die Lektion Was ist Barrierefreiheit und warum ist sie wichtig? durchgearbeitet haben, wissen Sie, dass digitale Barrierefreiheit ein weitreichendes Konzept ist. Im Kern geht es darum, sicherzustellen, dass möglichst viele Menschen das Web nutzen können.
Neben den rechtlichen und geschäftlichen Aspekten ist vor allem wichtig, dass die Einhaltung von Richtlinien zur Barrierefreiheit das Surferlebnis für alle deutlich verbessert.
Der einfachste Weg, ein barrierefreies Theme, Plugin oder eine barrierefreie Website zu erstellen, besteht darin, von Anfang an darüber nachzudenken. Beziehen Sie Barrierefreiheit bereits in die Planung ein und sensibilisieren Sie Ihre Kollegen (und Kunden) dafür. So können Sie Fehler nicht nur frühzeitig erkennen, sondern viele von vornherein vermeiden.
In dieser Lektion lernen Sie die Grundlagen von barrierefreiem HTML kennen und erfahren, wie Sie diese in Ihrem WordPress-Theme anwenden.
Grundlagen
HTML ist ebenso leistungsfähig wie barrierefrei.
Probieren Sie es selbst aus: Öffnen Sie Ihren Code-Editor und erstellen Sie eine gültige HTML-Seite, die mit Landmarken, Überschriften, Text, Buttons, Links, Formularen und mehr korrekt ausgezeichnet ist.
Sie können den folgenden Code verwenden, wenn Sie möchten.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Website</title>
</head>
<body>
<header>
<h1>Willkommen auf meiner Website</h1>
<nav>
<ul>
<li><a href="#home">Startseite</a>
<li><a href="#about">Über uns</a>
<li><a href="#services">Dienstleistungen</a>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article id="home">
<h2>Startseite</h2>
<p>Dies ist der Startseitenbereich, in dem Sie einführende Inhalte finden.</p>
<form name="Just a button">
<button type="button">Klicken Sie mich an!</button>
</form>
</article>
<article id="about">
<h2>Über uns</h2>
<p>Dieser Bereich enthält Informationen über die Website oder die Person bzw. das Unternehmen dahinter.</p>
<p><a href="https://example.com">Vollständiges Profil anzeigen</a></p>
</article>
<article id="services">
<h2>Dienstleistungen</h2>
<p>Hier finden Sie Einzelheiten zu den angebotenen Dienstleistungen.</p>
</article>
<article id="contact">
<h2>Kontakt</h2>
<form action="#" method="post" name="contact" autocomplete="on">
<fieldset>
<legend>Lassen Sie uns sprechen</legend>
<div><label for="name">Name:</label></div>
<div><input type="text" id="name"></div>
<div><label for="email">E-Mail:</label></div>
<div><input type="email" id="email"></div>
<div><label for="message">Nachricht:</label></div>
<div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
<div><input type="submit" value="Absenden"></div>
</fieldset>
</form>
</article>
</main>
<footer>
<p>© 2024 Meine Website</p>
</footer>
</body>
</html>
Testen Sie den Code nun mit einem Onlinetool wie dem Web Accessibility Checker und prüfen Sie, ob keine Probleme mit der Barrierefreiheit angezeigt werden.
Probleme treten in der Regel erst auf, wenn Sie Stile, Skripte oder Medien-Assets hinzufügen. Als moderner WordPress-Theme-Entwickler arbeiten Sie hauptsächlich mit diesen Technologien – etwa mit React-basierten Blöcken, mit PHP erstellten Mustern und aus theme.json generiertem CSS.
Entscheidend ist, bei der Programmierung und beim Design stets auf Barrierefreiheit zu achten.
Sehen wir uns einige Techniken und Best Practices an, die Entwickler und Designer beim Erstellen benutzerdefinierter Blöcke, Templates und Muster befolgen können.
Semantisches HTML
Verwenden Sie statt alles in <div>-Elemente einzuschließen die semantischen oder bedeutungstragenden Elemente von HTML.
Das bewahrt Sie vor unnötig kompliziertem Code und dem Aufwand, das “Rad neu zu erfinden”.
Landmarken
Landmarken sind eine Möglichkeit, die Struktur einer Seite zu definieren. Sie helfen Screenreadern, durch Inhalte leichter zu navigieren.
Verwenden Sie beispielsweise nicht nur einige <div>-Elemente und deren Klassen:
<div class="header">
<h1>Willkommen auf meiner Website</h1>
</div>
<div class="nav">
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div>Für die entsprechenden Bereiche können Sie Landmarken verwenden.
<header>
<h1>Willkommen auf meiner Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>Wenn Sie Ihr Theme über den Site-Editor gestalten oder erstellen, können Sie auch dort Landmarken festlegen.
Um die Blöcke Group, Row und Stack als Elemente zur Inhaltsgliederung zu definieren, wählen Sie den Block aus, öffnen Sie Settings und erweitern Sie den Abschnitt Advanced .
Scrollen Sie nach unten und wählen Sie entsprechend der Funktion und Position des Blocks unter HTML ELEMENT header, main, section, article, aside oder footer aus.
Überschriften
Verwenden Sie beim Hinzufügen von Überschriften zu einem Template immer die richtige Reihenfolge – beginnend mit H2 und aufsteigend bis H6.
Klicken Sie im Site-Editor auf Document Overview > Outline und prüfen Sie, ob eine Ebene übersprungen wurde oder alles korrekt ist.
Button vs. Link
Berücksichtigen Sie beim Entwerfen von Benutzeraktionen die folgenden Punkte bei der Verwendung von Buttons und Links:
- Wenn Benutzer eine Aktion ausführen sollen, verwenden Sie das button-Element.
- Wenn sie zu einer anderen Seite navigieren sollen, verwenden Sie das Anker-Element (<a>).
- Wenn ein Link wie ein Button aussehen soll, etwa bei einem Call-to-Action auf einer Landingpage, gestalten Sie ihn mit CSS.
Formulare
Beachten Sie beim Entwerfen eines Formulars in Ihrem Theme die folgenden Richtlinien:
Platzieren Sie das Formular immer innerhalb eines form-Elements.
Legen Sie für Eingabefelder stets den richtigen type und passende Attribute fest. Wenn Sie beispielsweise den type eines Eingabefelds als tel definieren, wird auf Mobilgeräten ein Ziffernblock angezeigt.
<input type="tel" name="phone" id="phone" required>Verlassen Sie sich nicht ausschließlich auf Platzhaltertext, um zu erklären, wofür das Eingabefeld gedacht ist; verwenden Sie immer barrierefreie Labels.
Verwenden Sie für jedes Suchformular das search-Element.
Beim Entwerfen eines Anmeldeformulars können Sie das autocomplete-Attribut verwenden, um Passwortmanager beim Ausfüllen des Formulars zu unterstützen.
<input type="password" autocomplete="current-password">Standardmäßig zeigen die meisten Browser bei fokussierten Elementen einen Fokusring an.
Wenn Sie die Darstellung dieses Fokusrings ändern möchten, verwenden Sie die Pseudoklasse :focus-visible und entfernen Sie den Fokusring nicht vollständig.
Farben
Erstellen Sie eine barrierefreie Farbpalette mit ausreichendem Kontrast.
Beim Bearbeiten eines Templates warnt WordPress Sie, wenn Sie Text- und Hintergrundfarben verwenden, die keinen ausreichenden Kontrast bieten.
Vermitteln Sie Informationen nicht ausschließlich durch Farbe. Markieren Sie Links beispielsweise nicht nur durch ihre Farbe, sondern definieren Sie auch Fokuszustände entsprechend. Wenn Sie unsicher sind, sehen Sie sich die standardmäßigen HTML-Link- und Fokusstile an und orientieren Sie sich daran.
Typografie
Verwenden Sie beim Festlegen der Schriftgröße relative Einheiten wie rem und vermeiden Sie die Verwendung von px.
Beschränken Sie die Inhaltsbreite auf 50 bis 70 Zeichen; dafür eignet sich die Einheit character bzw. ch hervorragend.
Verwenden Sie je nach Schriftgröße einen ausreichenden Zeilenabstand.
Benutzerpräferenzen priorisieren
Die Grundlage responsiven Designs sind Media Queries, die zur Verbesserung der Benutzererfahrung beitragen.
Einige Media Queries wie prefers-color-scheme oder prefers-reduced-motion stehen in direktem Zusammenhang mit der Barrierefreiheit, während sich das Verhalten von Komponenten je nach Gerät mithilfe von Abfragen wie pointer, hover oder scripting anpassen lässt.
ARIA als Workaround
ARIA ist die Abkürzung für Accessible Rich Internet Applications framework und wird häufig als schnelle Möglichkeit genannt, HTML-Inhalte für Screenreader barrierefreier zu machen.
Die wichtigste Regel bei der Verwendung von ARIA lautet jedoch, es nur dann einzusetzen, wenn es wirklich erforderlich ist. Idealerweise sollten Sie immer die integrierten Funktionen von HTML verwenden, um Screenreadern die Bedeutung der Inhalte zu vermitteln.
Falsch verwendete ARIA-Attribute beeinträchtigen die Barrierefreiheit. Vermeiden Sie sie daher, sofern Sie nicht die Kontrolle über Ihr HTML haben oder dynamische Inhalte verarbeiten müssen.
Weitere Informationen finden Sie in den WAI-ARIA basics von MDN.
Zusammenfassung und weiterführende Informationen
Barrierefreiheit ist ein fortlaufender Prozess. Schon eine kleine Verbesserung kann für die Besucher Ihrer Website einen großen Unterschied machen, ohne negative Auswirkungen zu haben. Sie wird die Benutzererfahrung niemals verschlechtern.
Weitere Informationen finden Sie in den Tutorials der Web Accessibility Initiative (WAI) des W3C.