Einleitung
Auf giveandtake-duisburg.de entdeckst Duisburgs lebendige Tauschkultur: von Kleider- bis Bücher- und Dekotausch. Die Plattform zeigt aktuelle Event-Termine, stimmungsvolle Rückblicke und praktische Teilnahmetipps für ein gelungenes Tauscherlebnis.
Projektziele
Barrierefreiheit
Die Website soll barrierefrei sein und den WCAG 2.2 AA-Standards entsprechen.
Visuelle Leitlinien
Design: Buntes, auffälliges, verspieltes Design. Das Farbschema stand schon vorher fest.
Fokus: Die Termine für kommende Tauschevents sollen im Vordergrund stehen.
Funktionale Komponenten
Termine sollen einmal eingegeben werden und auf der Seite an unterschiedlichen Stellen mit unterschiedlichen Designs eingefügt werden.
Technische Umsetzung
Basis: WordPress mit dem Bricks Builder
Die Website habe ich mit dem Bricks-Builder in WordPress erstellt.
Vorteile von dem Bricks Builder
- Automatische Generierung von Skip-Links
- Volle Kontrolle über semantisches HTML
- Flexible Anpassung von ARIA-Attributen
Termine mit Advanced Custom Fields (ACF)
Mit dem Plugin “Advanced Custom Fields” konnte ich eigene Elemente erstellen, was die Pflege der Seite vereinfacht. Jetzt können Termine eingegeben werden, die dann automatisch an den unterschiedlichen Stellen der Website eingefügt werden. In der Vergangenheit liegende Termine werden ausgeschlossen, sodass die Daten immer aktuell sind.
Auswertung der WCAG
Hier betrachten wir einige WCAG-Erfolgskriterien in Bezug auf die Website “Give and Take Duisburg” genauer. Du kannst die Kriterien unter How to Meet WCAG (englisch) nachlesen.
Wahrnehmbar
1.1.1 Alt-Texte (A)
Für alle angezeigten Nicht-Text-Inhalte (Bilder) gibt es eine Textalternative, die den gleichen Zweck erfüllt. Für die Bilder gibt es Alt-Texte. Oft wird der Zweck des Logos vergessen, das auf die Startseite verlinkt.
1.3.1 Info und Beziehung
Informationen, Struktur und Beziehungen zwischen visuellen Inhalten werden auch über HTML oder den Code vermittelt. Hierzu gehören die Überschriftenstruktur (H1-H6) oder auch Listen semantisch korrekt auszeichnen.
1.3.2 Sinnvolle Reihenfolge (A)
Die visuelle Darstellung des Inhalts entspricht dem, was ein Screenreader vorliest.
1.3.3 Sensorische Eigenschaften (A)
Nichts wird nur durch Farbe, Position usw. referenziert.
1.3.4 Bildschirmausrichtung (AA)
Sowohl im Hoch- als auch im Querformat ist die Seite nutzbar. Sie wurde von Anfang an responsiv entwickelt.
1.4.1 Benutzung von Farbe (A)
Farbe ist nicht das einzige, was den Zweck vermittelt. Ein Beispiel ist, dass Links unterstrichen werden. Im Menü wird die aktive Seite in einer größeren Schriftstärke dargestellt. Beim Hovern mit der Maus werden die Menüeinträge unterstrichen.
1.4.3 Text Kontrast (AA)
Text hat ein Kontrastverhältnis von mind. 4,5: 1 zum Hintergrund. Des Weiteren wird die Link-Farbe spezifischer gesetzt.
1.4.4 Textgröße ändern (AA)
Bei 200% Zoom ist jeder Text lesbar und wird nicht von anderen Elementen überdeckt.
1.4.5 Bilder von Text (A)
Text ist Text und nicht ein Bild von Text.
1.4.10 Umfluss (AA)
Die Seite ist vollständig responsiv.
1.4.11 Nicht-Text-Kontrast (AA)
Bedienelemente haben ein Kontrastverhältnis von mind. 3:1.
1.4.12 Textabstand (AA)
Wenn die Abstände von Wörtern, Buchstaben, Zeilen und Absätzen vergrößert werden, ist die Seite vollständig nutzbar. Es gibt keine überlappenden oder abgeschnittene Inhalte. Getestet habe ich das mit dem BIK BiTV Tool: Bookmarklet Textabstände.
Bedienbar
2.1.1 Tastatur (A)
Die gesamte Funktionalität des Inhalts ist über eine Tastatur bedienbar, ohne dass für einzelne Tastenanschläge bestimmte Zeitangaben erforderlich sind.
2.1.2 Keine Tastaturfalle (A)
Wenn der Tastaturfokus mithilfe einer Tastatur auf eine Komponente verschoben werden kann, kann der Fokus mithilfe einer Tastatur von dieser Komponente weg geschoben werden. Das ist häufig ein Problem bei Slidern. In unserem Beispiel gibt es keine Tastaturfallen.
2.2.2 Pause, Stopp, Ausblenden (A)
Für alle bewegten, blinkenden oder scrollenden Informationen, die automatisch starten, länger als fünf Sekunden dauern und parallel zu anderen Inhalten dargestellt werden, gibt es einen Mechanismus, mit dem der Nutzende sie anhalten, stoppen oder ausblenden kann. Hier gibt es keine derartigen Animationen.
2.3.1 Grenzwert für drei Blitze oder weniger (A)
Nichts blitzt, blinks oder flackert mehr als dreimal pro Sekunde.
2.4.1 Blöcke umgehen (A)
Es gibt Skiplinks, um die Navigation zu überspringen. Sobald die Seite das erste Mal mit der Tab-Taste angesprochen wird, wird als erstes der Skiplink fokussiert.
2.4.2 Seite mit Titel versehen (A)
Auf jeder Seite ist ein Titel, der beschreibt, worum es auf der Seite geht.
2.4.3 Fokus-Reihenfolge (A)
Die Fokus-Reihenfolge mit der Tastatur entspricht der visuellen Struktur.
2.4.4 Linkzweck im Kontext (A)
Der Linktext beschreibt, wohin der Link führt. Zum Beispiel werden Linktexte wie “Weiter” oder “Mehr Infos” vermieden.
2.4.5 Verschiedene Möglichkeiten (AA)
Es gibt mehrere Wege, um sich auf der Seite zurechtzufinden. Da dies eine recht kleine Website ist, können alle Seiten vom Menü aus erreicht werden. Zudem sind alle Seiten von der Startseite aus verlinkt.
2.4.6 Überschriften und Beschriftungen (AA)
Überschriften und Labels beschreiben den Inhalt oder Zweck.
2.4.7 Fokus sichtbar (AA)
Der Tastatur-Fokusrahmen ist sichtbar. Da wir helles und dunkles Design haben, wird der Fokusrahmen je nach Hintergrund angepasst, sodass er immer sichtbar ist, unabhängig vom Farbschema.
2.4.11 Fokus nicht verdeckt (AA)
Wenn man mit der Tab-Taste ein Element fokussiert, dann sollte das Element mindestens teilweise sichtbar sein. Häufig ist das nicht der Fall bei “Sticky”-Header oder -Footer. In unserem Beispiel ist der Fokus sichtbar.
2.5.3 Bezeichnung im Namen (A)
Der sichtbare Text eines Formularfeldes oder Buttons entspricht dem Text im Label. Das ist besonders wichtig für Personen, die die Spracheingabe nutzen.
2.5.8 Zielgröße (AA)
Jedes Bedienelement ist mind. 24 x 24 Pixel groß. Dies ist relevant für die Social Media Icons.
Verständlich
3.1.1 Sprache der Seite (A)
Der Code enthält das lang-Attribut, das der Sprache der Seite entspricht. In unserem Beispiel ist das Deutsch.
3.2.1 Bei Fokus (A)
Es gibt keine unerwarteten Änderungen, wenn ein Element den Tastaturfokus erhält.
3.2.2 Bei Eingabe (A)
Es gibt keine unerwarteten Änderungen bei Eingabe in einem Formularfeld. Es gibt keine Formularfelder.
3.2.3 Konsistente Navigation (AA)
Die Navigation ist auf allen Seiten einheitlich. Das Menü ändert sich nicht.
3.2.6 Konsistente Hilfe (A)
Auf jeder Seite gibt es im Menü einen Link zur Kontaktseite.
Robust
4.1.2 Name, Rolle, Wert (A)
Die semantische Bedeutung jedes interaktiven Elementes ist korrekt und hat eine verständliche Bezeichnung.
Fazit
Barrierefreiheit sollte kein nachträglicher Gedanke, sondern fester Bestandteil jeder Webseitenplanung sein, genau wie bei “Give and Take Duisburg”. Diese Website zeigt beispielhaft, wie inklusives Design nicht nur mehr Menschen erreicht, sondern auch durch technische Präzision und nutzerzentrierte Umsetzung überzeugt.
Digitale Barrierefreiheit ist kein optionales Extra, sondern das Fundament für zeitgemäßes, verantwortungsvolles Webdesign.