Manuelle Tests – Grundlagen
Bei manuellen Tests zur Barrierefreiheit werden Tastatur-, visuelle und kognitive Tests, Tools und Techniken eingesetzt, um Probleme zu finden, die automatisierte Tools nicht können. Da automatisierte Tools nicht alle in der WCAG genannten Erfolgskriterien abdecken, ist es wichtig, dass Sie keine automatisierten Tests zur Barrierefreiheit durchführen und dann die Tests beenden.
Mit dem technologischen Fortschritt können mehr Tests allein durch automatisierte Tools abgedeckt werden. Derzeit müssen jedoch sowohl manuelle als auch assistive Technologieprüfungen zu Ihren Testprotokollen hinzugefügt werden, um alle anwendbaren WCAG-Checkpoints abzudecken.
Vorteile manueller Tests zur Barrierefreiheit:
- Vernünftig und schnell ausgeführt
- Sie können mehr Probleme erkennen als mit automatisierten Tests allein
- Wenig Tools und Fachwissen für den Erfolg erforderlich
Nachteile manueller Tests zur Barrierefreiheit:
- Komplexer und zeitaufwendiger als automatisierte Tests
- Kann schwierig sein, dies im großen Maßstab zu wiederholen
- Mehr Fachwissen zu Barrierefreiheit erforderlich, um Tests durchzuführen und die Ergebnisse zu interpretieren
Vergleichen wir nun, welche Elemente und Details zur Barrierefreiheit derzeit von einem automatisierten Tool erkannt werden können und welche nicht.
Arten manueller Tests
Es gibt viele manuelle Tools und Techniken, die Sie berücksichtigen sollten, wenn Sie Ihre Webseite oder App auf digitale Barrierefreiheit prüfen. Die drei größten Schwerpunkte bei manuellen Tests sind die Tastaturfunktion, optische Überprüfungen und allgemeine Inhaltsprüfungen.
Wir behandeln diese Themen in diesem Modul im Detail. Die folgenden Tests stellen jedoch keine vollständige Liste aller manuellen Tests dar, die Sie ausführen können oder sollten. Wir empfehlen Ihnen, mit einer manuellen Checkliste zur Barrierefreiheit aus einer seriösen Quelle zu beginnen und Ihre eigene Checkliste für manuelle Tests für Ihre spezifischen Anforderungen an digitale Produkte und Teams zu entwickeln.
Tastaturprüfungen
Schätzungen zufolge sind etwa 25% aller Probleme mit der digitalen Barrierefreiheit auf fehlende Tastaturunterstützung zurückzuführen. Wie wir im Modul Tastaturfokus gelernt haben, betrifft dies alle Nutzer, darunter Nutzer, die nur mit der Tastatur zugreifen können, Nutzer von Screenreadern mit eingeschränktem Sehvermögen und Menschen, die Spracherkennungssoftware verwenden, die Technologie darauf setzt, dass Inhalte über die Tastatur zugänglich sind.
Mit Tastaturtests lassen sich Fragen wie die folgenden beantworten:
- Benötigt die Webseite oder Funktion eine Maus, um zu funktionieren?
- Ist die Tabulatortaste logisch und intuitiv?
- Ist die Tastaturfokusanzeige immer sichtbar?
- Können Sie in einem Element stecken, das nicht im Fokus stehen sollte?
- Können Sie hinter oder um ein Element herum navigieren, das im Fokus stehen sollte?
- Ist beim Schließen eines fokussierten Elements die Fokusanzeige wieder an eine logische Stelle zurückgegangen?
Die Tastaturfunktionen haben zwar enorme Auswirkungen, das Testverfahren ist jedoch recht einfach. Sie brauchen dazu nur die Maus beiseitezulegen oder ein kleines JavaScript-Paket zu installieren und Ihre Website nur mit der Tastatur zu testen. Die folgenden Befehle sind für Tastaturtests unerlässlich.
Visuelle Überprüfungen
Bei der optischen Überprüfung liegt der Schwerpunkt auf den visuellen Elementen der Seite. Sie nutzen Tools wie die Bildschirmvergrößerung oder den Browserzoom, um die Barrierefreiheit der Website oder App zu prüfen.
Anhand der visuellen Überprüfung können Sie Folgendes erkennen:
- Gibt es Probleme mit dem Farbkontrast, die ein automatisiertes Tool nicht erfassen konnte, z. B. Text auf einem Farbverlauf oder Bild?
- Gibt es Elemente, die wie Überschriften, Listen oder andere Strukturelemente aussehen, aber nicht als solche codiert sind?
- Sind Navigationslinks und Formulareingaben auf der gesamten Website oder in der App einheitlich?
- Gibt es Blinkungen, Stroboskop-Effekte oder Animationen, die die Empfehlungen nicht überschreiten?
- Hat der Inhalt die richtigen Abstände? Für Buchstaben, Wörter, Zeilen und Absätze?
- Können Sie alle Inhalte mit der Lupe oder dem Zoom des Browsers sehen?
Inhaltsprüfungen
Im Gegensatz zu visuellen Tests, die sich auf Layouts, Bewegung und Farben konzentrieren, liegt der Fokus bei der Inhaltsprüfung auf den Wörtern auf der Seite. Sie sollten sich nicht nur den Text selbst ansehen, sondern auch den Kontext überprüfen, um sicherzustellen, dass er für andere sinnvoll ist.
Mit der Inhaltsüberprüfung können Sie u. a. folgende Fragen beantworten:
- Sind Seitentitel, Überschriften und Formularlabels klar und aussagekräftig?
- Sind Bildalternativen prägnant, präzise und nützlich?
- Wird Farbe allein verwendet, um Bedeutung oder Informationen zu vermitteln?
- Sind die Links beschreibend oder verwenden Sie generischen Text wie „Weiterlesen“ oder „Hier klicken?“.
- Gibt es Änderungen an der Sprache auf einer Seite?
- Wird eine einfache Sprache verwendet und sind alle Akronyme ausgeschrieben, wenn zum ersten Mal auf sie verwiesen wird?
Einige Inhaltsprüfungen können teilweise automatisiert werden. Sie können beispielsweise einen JavaScript-Linter schreiben, der nach „Hier klicken“ sucht und Sie vorschlägt, eine Änderung vorzunehmen. Bei diesen benutzerdefinierten Lösungen ist jedoch häufig ein Mitarbeiter erforderlich, um den Text in Kontext zu stellen.
Demo: Manueller Test
Bisher haben wir automatisierte Tests auf unserer Demo-Webseite durchgeführt und acht verschiedene Problemtypen gefunden und behoben. Wir können jetzt manuelle Prüfungen durchführen, um zu sehen, ob wir noch weitere Probleme mit der Barrierefreiheit entdecken können.
Schritt 1
In unserer aktualisierten CodePen-Demo sind alle automatischen Updates für Bedienungshilfen implementiert.
Rufen Sie sie im Debug-Modus auf, um mit den nächsten Tests fortzufahren. Dies ist wichtig, da dadurch das <iframe> entfernt wird, das die Demowebseite umgibt, was einige Testtools beeinträchtigen kann. Weitere Informationen zum Debug-Modus von CodePen
Schritt 2
Beginnen Sie den manuellen Test, indem Sie die Maus oder das Touchpad beiseitelegen und im DOM nur mit der Tastatur navigieren.
Problem 1: Sichtbare Fokusanzeige
Sie sollten das erste Problem mit der Tastatur sofort sehen – oder besser nicht – es sollte Ihnen nicht angezeigt werden, da der sichtbare Fokussierungsindikator entfernt wurde. Wenn Sie den CSS-Code in der Demo scannen, sollten Sie die gefürchtete „outline: none“ in der Codebasis sehen.
:focus {
outline: none;
}
Das sollten wir beheben.
Wie Sie im Modul Tastaturfokus gelernt haben, müssen Sie diese Codezeile entfernen, damit Webbrowser den Fokus für Nutzer sichtbar machen können. Sie können noch einen Schritt weiter gehen und einen Fokusindikator erstellen, der der Ästhetik Ihres digitalen Produkts entspricht.
:focus {
outline: 3px dotted #008576;
}
Problem 2: Fokusreihenfolge
Wenn Sie die Fokusanzeige geändert haben und diese sichtbar ist, blättern Sie mit der Tabulatortaste durch die Seite. Dabei sollten Sie feststellen, dass das Formulareingabefeld, das zum Abonnieren des Newsletters verwendet wird, nicht hervorgehoben wird. Sie wurde durch einen negativen Tabindex aus der ursprünglichen Fokusreihenfolge entfernt.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Da wir möchten, dass die Leute dieses Feld zur Anmeldung für unseren Newsletter verwenden, müssen wir nur den negativen Tabindex entfernen oder ihn auf null setzen, damit die Eingabe wieder über die Tastatur fokussierbar wird.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Schritt 3
Nachdem der Tastaturfokus überprüft wurde, machen wir mit der Überprüfung von Bild und Inhalt fortfahren.
Problem 3: Farbkontrast zwischen Links
Als Sie die Tastaturtests durch Drücken der Tabulatortaste auf der Demoseite durchgegangen sind, ist Ihnen wahrscheinlich aufgefallen, dass in den Absätzen zu den verschiedenen Erkrankungen drei visuell versteckte Links enthalten waren.
Damit unsere Seite barrierefrei ist, müssen sich Links vom umgebenden Text abheben und bei Mausbewegung und Tastaturfokus eine Stiländerung beinhalten, die sich nicht auf die Farbe bezieht.
Das können wir tun.
Eine schnelle Lösung besteht darin, die Links innerhalb der Absätze zu unterstreichen, um sie hervorzuheben. Dies würde das Problem der Barrierefreiheit lösen, aber möglicherweise nicht zu der Gesamtästhetik des Designs passen, die Sie erreichen möchten.
Wenn Sie keine Unterstreichung hinzufügen möchten, müssen Sie die Farben so ändern, dass die Anforderungen sowohl für den Hintergrund als auch für den Text erfüllt werden.
Wenn Sie die Demo mit einem Tool zur Prüfung des Linkkontrasts ansehen, werden Sie feststellen, dass die Linkfarbe die Anforderung an den Farbkontrast von 4,5:1 zwischen dem Text in normaler Größe und dem Hintergrund erfüllt. Nicht unterstrichene Links müssen jedoch auch die Anforderung an den Farbkontrast von 3:1 zum umgebenden Text erfüllen.
Eine Möglichkeit besteht darin, die Linkfarbe an die anderen Elemente auf der Seite anzupassen. Wenn Sie die Linkfarbe jedoch in Grün ändern, muss auch der Haupttext geändert werden, um die Anforderungen an den Farbkontrast zwischen allen drei Elementen (Links, Hintergrund und umgebender Text) zu erfüllen.
Problem 4: Farbkontrast für Symbole
Ein weiteres Problem mit dem Farbkontrast sind die Social-Media-Symbole. Im Modul Farbe und Kontrast haben Sie gelernt, dass wichtige Symbole einen Farbkontrast von 3:1 zum Hintergrund aufweisen müssen. In der Demo haben die Social-Media-Symbole jedoch ein Kontrastverhältnis von 1,3:1.
Das können wir tun.
Um die Anforderungen an den Farbkontrast von 3:1 zu erfüllen, werden die Symbole der sozialen Medien in ein dunkleres Grau geändert.
Problem 5: Inhaltslayout
Wenn Sie sich das Layout des Absatzinhalts ansehen, ist der Text vollständig im Blocksatz ausgerichtet. Wie Sie im Typografiemodul gelernt haben, entstehen dadurch „Flüsse des Weltraums“, die für manche Nutzer schwer lesbar sind.
p.bullet {
text-align: justify;
}
Wenn Sie die Textausrichtung in der Demo zurücksetzen möchten, können Sie den Code in text-align: left; ändern oder die Zeile vollständig aus dem CSS-Code entfernen, da links die Standardausrichtung für Browser ist. Testen Sie den Code, falls die Standardtextausrichtung durch andere übernommene Stile entfernt wird.
p.bullet {
text-align: left;
}
Schritt 4
Sobald Sie alle in den vorherigen Schritten beschriebenen manuellen Probleme mit den Bedienungshilfen identifiziert und behoben haben, sollte Ihre Seite dem Screenshot ähneln.
Möglicherweise finden Sie bei Ihren manuellen Prüfungen mehr Probleme mit der Barrierefreiheit, als wir in diesem Modul behandelt haben. Viele dieser Probleme werden im nächsten Modul behandelt.
Nächster Schritt
Weiter so! Du hast die Module für automatisierte und manuelle Tests abgeschlossen. Sie können sich unseren aktualisierten CodePen ansehen, für den alle automatisierten und manuellen Fehlerbehebungen für Bedienungshilfen angewendet wurden.
Fahren Sie nun mit dem letzten Testmodul fort, das sich auf unterstützende Technologietests konzentriert.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über manuelle Tests zur Barrierefreiheit
Welche Elemente müssen den WCAG-Farbkontraststandards entsprechen?