Handout Workshop

Testanleitung für Blöcke

Richtlinien für die barrierefreie Prüfung von Block-Editor-Blöcken & Patterns

Das Projektziel besteht darin, mögliche Probleme mit der Ausgabe der Core WordPress-Blöcke und Patterns zu identifizieren. Achte bei den Tests darauf, nur Probleme anzusprechen, die mit der Verwendung des Inhalts durch den Block zusammenhängen, nicht jedoch, ob der Inhalt an sich barrierefrei ist. Zum Beispiel ist es kein Fehler des Blocks, wenn einem Bild das „alt“-Attribut fehlt und es nicht hinzugefügt haben.

Einige Testschritte gelten möglicherweise nicht für alle Blöcke. Der Absatz-Block sollte zum Beispiel keine Landmarks oder Überschriften haben.

Unser Ziel ist es nicht, die gesamte Website oder die Barrierefreiheit eines Themes zu testen; der Fokus liegt darauf, den Blockinhalt selbst isoliert zu prüfen und alle möglichen Variationen in den Einstellungen für einen bestimmten Block zu erkunden.

Test-Schritte

Vorbereitung

Beende deine Browser-Extions die die Erfahrung deiner Webseite beeinflussen. Z.b. Ad-Blocker oder Cookie-Blocker. Alternativ kannst du auch im Inkognito-Fenster testen.

Prüfe, wie deine Device-Settings eingestellt sind für Barrierefreiheit. Hast du zum Beispiel „Bewegung reduziert“ aktiviert oder den Dark Mode? Je nachdem kann die Erfahrung unterschiedlich sein.

Suche dir eine Test-Seite. Zum Beispiel deine eigene Seite oder eine Kundenseite. Du kannst auch eine Seite auf der Testseite nehmen.

1. Erster Wahrnehmungstest:

Notieren Sie Ihre Gesamteindrücke von dem Block. Ist der Block verständlich? Gibt es etwas, das Sie stört oder ablenkt?

2. Farbkontrastüberprüfung:

Ist der Farbkontrast ausreichend hoch? Er sollte dem AA-Level im WCAG entsprechen.

Wie wird geprüft:

3. Hängt der Block allein von der Farbe ab?

Informationen und Verhaltensweisen sollten nicht ausschließlich durch Farbe angezeigt werden. Farbe kann zusammen mit Änderungen der Form, Dekoration oder des Texts verwendet werden, darf jedoch nicht der einzige Indikator für einen Unterschied im Inhalt oder Zustand sein.

Wie wird geprüft:

  • Schau dir die Seite an. Gibt es Elemente die du nur über Farbe verstehst?
  • Alternativ: mache einen Screenshot und nimm die Farbe heraus (Über Paint oder Vorschau“). Kannst du alle Funktionen und Informationen erkennen und verstehen?

4. Tastaturnavigation

Können Sie den Block mithilfe der Tastatur navigieren und bedienen?

Wie wird geprüft:

Benutze die Tabulatortaste, Eingabetaste, Pfeiltasten und Leertaste auf deiner Tastatur.
Kannst du auf alle Elemente zugreifen und diese bedienen? Mit Umschalt+Tab, entspricht die Navigationsreihenfolge der umgekehrten Richtung.

Notiz: Focus state is mostly dependent on the Theme.

5. Landmarks

Sind die Landmarken korrekt eingerichtet? Wird HTML5 verwendet, um Elemente zu markieren?

Wie wird geprüft:

6. Überschriften

Ist die Überschriftenstruktur hierarchisch und korrekt? Gibt es Inhalt im Block oder Blockmuster, der der ersten Überschrift vorausgeht?

Wie wird geprüft:

7. Medien

7.1 Bilder

Ist alternativer Text für Bilder oder Symbole vorhanden? Kann er vom Inhaltsersteller konfiguriert werden? Wenn ja, kann er so konfiguriert werden, dass die Barrierefreiheit beeinträchtigt wird?

Wie wird geprüft:

7.2 Video

Kannst du Untertitel hinzufügen? Wenn du Untertitel hinzufügst, können diese dann im Frontend abgerufen werden? Sind diese als Close Captions vorhanden, oder Bestandteil des Videos?

7.3 Audio

Kannst du eine Abschrift hinzufügen? Wenn du eine Abschrift hinzufügst, ist sie dann im Frontend verfügbar?

8. Text Zoom: 200%

Ist der Blockinhalt verständlich und bedienbar, wenn der Text auf 200% vergrößert wird?

Wie wird geprüft:

Vergrößere die Textgröße im Browser auf 200% und betrachte den Block.

  • im Browser über Strg / Cmd und +

9. Bildschirm-Lupe

Ist der Blockinhalt verständlich und bedienbar mit einem Bildschirm-Lupe? Kannst du dem Inhalt des Blocks folgen, auch wenn du den gesamten Block nicht auf einmal sehen kannst?

Sind die Elemente nahe genug beieinander, um ihre Beziehungen zu verstehen?

Wie wird geprüft:

  • Auf Mac: System Preferences > Barrierefreiheit > Zoomen
  • Auf PC: Start > Einstellungen > Barrierefreiheit > Zoomen

10. Screen Readers

Kannst du den Inhalt mit einem Screen Reader bedienen und verstehen?

Wie wird geprüft:

  • Voice Over + Safari
  • NVDA + Chrome

11. Mobile

Kannst du den Blockinhalt von einem mobilen Gerät aus bedienen und lesen?

Wie wird geprüft:

  • Öffne die Seite auf einem mobilen Gerät.
  • Überprüfe, ob das Layout responsiv ist.
  • Bestätige, ob du den Blockinhalt bedienen oder navigieren kannst, ohne auf Handgesten wie Wischen angewiesen zu sein.
  • Beobachte, ob der Inhalt angemessen zwischen horizontaler und vertikaler Ansicht wechselt.