Manuelle Tests der Barrierefreiheit

Grundlagen manueller Tests

Bei manuellen Tests der Barrierefreiheit werden Tastatur-, visuelle und kognitive Tests, Tools und Techniken verwendet, um Probleme zu finden, die mit automatisierten Tools nicht erkannt werden können. Da automatisierte Tools nicht alle Erfolgskriterien abdecken, die in den WCAG-Richtlinien festgelegt sind, ist es wichtig , dass Sie automatisierte Tests der Barrierefreiheit durchführen und weiter testen.

Mit dem technischen Fortschritt können immer mehr Tests allein mit automatisierten Tools durchgeführt werden, derzeit müssen jedoch sowohl manuelle Prüfungen als auch Prüfungen mit Hilfstechnologien zu Ihren Testprotokollen hinzugefügt werden, um alle anwendbaren WCAG-Prüfpunkte abzudecken.

Vorteile manueller Tests der Barrierefreiheit:

• Relativ einfach und schnell durchzuführen
• Erkennen einen höheren Prozentsatz von Problemen als automatisierte Tests allein
• Erfordern wenig Tools und Fachwissen

Nachteile manueller Tests der Barrierefreiheit:

• Komplexer und zeitaufwendiger als automatisierte Tests
• Möglicherweise schwierig, in großem Maßstab zu wiederholen
• Erfordern mehr Fachwissen im Bereich Barrierefreiheit, um Tests durchzuführen und die Ergebnisse zu interpretieren

Vergleichen Sie, welche Elemente und Details zur Barrierefreiheit 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 können, wenn Sie Ihre Webseite oder App auf digitale Barrierefreiheit prüfen. Die drei wichtigsten Bereiche bei manuellen Tests sind die Tastaturfunktionalität, visuelle Überprüfungen und allgemeine Inhaltsprüfungen.

In diesem Modul werden diese Themen auf hoher Ebene behandelt. Die folgenden Tests sind jedoch keine vollständige Liste aller manuellen Tests, die Sie durchführen können oder sollten. Wir empfehlen Ihnen, mit einer manuellen Checkliste zur Barrierefreiheit aus einer seriösen Quelle zu beginnen und eine eigene fokussierte manuelle Checkliste für Ihr spezifisches digitales Produkt und die Anforderungen Ihres Teams zu erstellen.

Tastaturprüfungen

Schätzungen zufolge sind etwa 25% aller Probleme mit der digitalen Barrierefreiheit auf mangelnde Tastaturunterstützung zurückzuführen. Wie wir im Modul zum Tastaturfokus gelernt haben, betrifft dies alle Arten von Nutzern, einschließlich sehender Nutzer, die nur die Tastatur verwenden, Nutzer von Screenreadern mit eingeschränktem Sehvermögen/blinde Nutzer und Personen, die Spracherkennungssoftware verwenden, die auf Technologie basiert, die auch Tastaturzugriff auf Inhalte erfordert.

Bei Tastaturtests werden Fragen wie die folgenden beantwortet:

• Ist für die Funktion der Webseite oder Funktion eine Maus erforderlich?
• Ist die Tab-Reihenfolge logisch und intuitiv?
• Ist die Fokusanzeige für die Tastatur immer sichtbar?
• Können Sie in einem Element stecken bleiben, das den Fokus nicht erfassen sollte?
• Können Sie hinter oder um ein Element navigieren, das den Fokus erfassen sollte?
• Ist die Fokusanzeige nach dem Schließen eines Elements, das den Fokus erhalten hat, an eine logische Stelle zurückgekehrt?

Die Auswirkungen der Tastaturfunktionalität sind enorm, das Testverfahren ist jedoch recht einfach. Sie müssen nur die Maus beiseitelegen oder ein kleines JavaScript-Paket installieren und Ihre Website nur mit der Tastatur testen. Die folgenden Befehle sind für Tastaturtests unerlässlich.

Visuelle Prüfungen

Bei visuellen Prüfungen werden visuelle Elemente der Seite in den Mittelpunkt gestellt und Tools wie die Bildschirmlupe oder der Browserzoom verwendet, um die Website oder App auf Barrierefreiheit zu prüfen.

Visuelle Prüfungen können Ihnen Folgendes zeigen:

• Gibt es Probleme mit dem Farbkontrast, die ein automatisiertes Tool nicht erkennen konnte, z. B. Text auf einem Farbverlauf oder Bild?
• Gibt es Elemente, die wie Überschriften, Listen und andere strukturelle Elemente aussehen, aber nicht so codiert sind?
• Sind Navigationslinks und Formulareingaben auf der gesamten Website oder in der gesamten App einheitlich?
• Gibt es Blinken, Stroboskopieren oder Animationen, die die Empfehlungen überschreiten?
• Sind die Inhalte richtig formatiert? Für Buchstaben, Wörter, Zeilen und Absätze?
• Können Sie alle Inhalte mit einer Bildschirmlupe oder dem Browserzoom sehen?

Inhaltsprüfungen

Im Gegensatz zu visuellen Tests, bei denen Layouts, Bewegungen und Farben im Mittelpunkt stehen, konzentrieren sich Inhaltsprüfungen auf die Wörter 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 verständlich ist.

Bei Inhaltsprüfungen werden Fragen wie die folgenden beantwortet:

• Sind Seitentitel, Überschriften und Formularlabels klar und aussagekräftig?
• Sind Alternativtexte für Bilder prägnant, korrekt und nützlich?
• Wird Farbe allein als einzige Möglichkeit verwendet, Bedeutung oder Informationen zu vermitteln?
• Sind Links aussagekräftig oder verwenden Sie generischen Text wie „Weitere Informationen“ oder „Hier klicken“?
• Gibt es Änderungen an der Sprache auf einer Seite?
• Wird eine einfache Sprache verwendet und werden alle Abkürzungen beim ersten Mal ausgeschrieben?

Einige Inhaltsprüfungen können teilweise automatisiert werden. Sie könnten beispielsweise einen JavaScript-Linter schreiben, der nach „Hier klicken“ sucht und eine Änderung vorschlägt. Bei diesen benutzerdefinierten Lösungen ist jedoch oft noch ein Mensch erforderlich, um den Text in etwas Kontextbezogenes zu ändern.

Demo: Manueller Test

Bisher haben wir automatisierte Tests auf unserer Demo-Webseite durchgeführt und acht verschiedene Problemtypen gefunden und behoben. Jetzt führen wir manuelle Prüfungen durch, um zu sehen, ob wir noch mehr Probleme mit der Barrierefreiheit finden können.

Schritt 1

In unserer aktualisierten CodePen-Demo sind alle automatisierten Updates zur Barrierefreiheit angewendet.

Rufen Sie sie im Debug-Modus auf, um mit den nächsten Tests fortzufahren. Das ist wichtig, da dadurch das <iframe> entfernt wird, das die Demo-Webseite umgibt und einige Testtools beeinträchtigen kann. Weitere Informationen zum Debug-Modus von CodePen.

Schritt 2

Legen Sie die Maus oder das Trackpad beiseite und navigieren Sie nur mit der Tastatur im DOM nach oben und unten.

Problem 1: Sichtbare Fokusanzeige

Sie sollten das erste Tastaturproblem sofort sehen – oder besser gesagt, Sie sollten es nicht sehen, da die sichtbare Fokusanzeige entfernt wurde. Wenn Sie den CSS-Code in der Demo scannen, sollten Sie die gefürchtete Zeile „outline: none“ im Code finden.

  :focus {
    outline: none;
  }

Wir beheben das Problem.

Wie Sie im Modul zum Tastaturfokus gelernt haben, müssen Sie diese Codezeile entfernen, damit Webbrowser eine sichtbare Fokusanzeige für Nutzer hinzufügen können. Sie können noch einen Schritt weiter gehen und eine Fokusanzeige erstellen, die dem Design Ihres digitalen Produkts entspricht.

:focus {
  outline: 3px dotted #008576;
}

Problem 2: Fokusreihenfolge

Nachdem Sie die Fokusanzeige geändert haben und sie sichtbar ist, müssen Sie mit der Tabulatortaste durch die Seite navigieren. Dabei sollten Sie feststellen, dass das Formulareingabefeld zum Abonnieren des Newsletters nicht den Fokus erhält. Es wurde durch einen negativen tabindex aus der natürlichen Fokusreihenfolge entfernt.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Wir beheben das Problem.

Da wir möchten, dass Nutzer dieses Feld verwenden, um sich für unseren Newsletter anzumelden, müssen wir nur den negativen tabindex entfernen oder auf null setzen, damit die Eingabe wieder tastaturfokussierbar ist.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Schritt 3

Nachdem der Tastaturfokus überprüft wurde, fahren wir mit visuellen und Inhaltsprüfungen fort.

Problem 3: Farbkontrast von Links

Als Sie die Tastaturtests durchgeführt haben, indem Sie mit der Tabulatortaste auf der Demoseite nach oben und unten navigiert sind, haben Sie wahrscheinlich bemerkt, dass der Tastaturfokus auf drei visuell verborgenen Links in den Absätzen zu den verschiedenen Erkrankungen lag.

Damit unsere Seite barrierefrei ist, müssen sich Links vom umgebenden Text abheben und eine nicht farbliche Stiländerung beim Bewegen des Mauszeigers und beim Tastaturfokus enthalten.

Wir beheben das Problem.

Eine schnelle Lösung besteht darin, die Links in den Absätzen zu unterstreichen, damit sie sich abheben. Dadurch wird das Problem mit der Barrierefreiheit behoben, aber es passt möglicherweise nicht zum gewünschten Gesamtdesign.

Wenn Sie keine Unterstreichung hinzufügen möchten, müssen Sie die Farben so ändern, dass sie die Anforderungen für den Hintergrund und den Text erfüllen.

Wenn Sie die Demo mit einem Tool zur Überprüfung des Linkkontrasts aufrufen, sehen Sie, dass die Linkfarbe die Anforderung für einen Farbkontrast von 4,5:1 erfüllt zwischen normal großem Text und dem Hintergrund. Nicht unterstrichene Links müssen jedoch auch eine Anforderung für einen 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 zu erfüllen: Links, Hintergrund und umgebender Text.

Problem 4: Farbkontrast von Symbolen

Ein weiteres Problem mit dem Farbkontrast, das übersehen wurde, sind die Social-Media-Symbole. Im Modul zu 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.

Wir beheben das Problem.

Um die Anforderungen an den Farbkontrast von 3:1 zu erfüllen, werden die Social-Media-Symbole in ein dunkleres Grau geändert.

Problem 5: Inhaltslayout

Wenn Sie sich das Layout des Absatzinhalts ansehen, ist der Text im Blocksatz formatiert. Wie Sie im Modul zur Typografie gelernt haben, entstehen dadurch "Flüsse", die den Text für einige Nutzer schwer lesbar machen können.

p.bullet {
   text-align: justify;
}

Wir beheben das Problem.

Um die Textausrichtung in der Demo zurückzusetzen, können Sie den Code in text-align: left; ändern oder diese Zeile ganz aus dem CSS entfernen, da links die Standardausrichtung für Browser ist. Testen Sie den Code, falls andere geerbte Stile die Standardausrichtung des Texts entfernen.

p.bullet {
   text-align: left;
}

Schritt 4

Nachdem Sie alle manuellen Probleme mit der Barrierefreiheit, die in den vorherigen Schritten beschrieben wurden, identifiziert und behoben haben, sollte Ihre Seite unserem 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 wir im nächsten Modul entdecken.

Nächster Schritt

Super! Sie haben die Module zu automatisierten und manuellen Tests abgeschlossen. Sie können sich unsere aktualisierte CodePen-Demo ansehen, in der alle automatisierten und manuellen Korrekturen zur Barrierefreiheit angewendet wurden.

Fahren Sie nun mit dem letzten Testmodul fort, das sich auf Tests mit Hilfstechnologienkonzentriert.