Manuelle Tests der Barrierefreiheit

Grundlagen des manuellen Testens

Beim manuellen Testen 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 Tests als auch Tests 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
• Für den Erfolg sind nur wenige Tools und Fachkenntnisse erforderlich

Nachteile manueller Tests der Barrierefreiheit:

• Komplexer und zeitaufwendiger als automatisierte Tests
• Möglicherweise schwierig, im großen Maßstab zu wiederholen
• Erfordern mehr Fachkenntnisse 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 von manuellen Tests

Es gibt viele manuelle Tools und Techniken, die Sie verwenden können, um die digitale Barrierefreiheit Ihrer Webseite oder App zu überprüfen. Die drei wichtigsten Bereiche beim manuellen Testen 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 Checkliste für die manuelle Barrierefreiheit aus einer seriösen Quelle zu beginnen und eine eigene Checkliste für die manuelle Barrierefreiheit zu erstellen, die auf Ihr spezifisches digitales Produkt und die Anforderungen Ihres Teams zugeschnitten ist.

Tastaturtests

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 oder Blindheit und Nutzer von Spracherkennungssoftware, die auf Technologien basiert, die ebenfalls auf die Tastatur zugreifen können müssen.

Bei Tastaturtests werden unter anderem folgende Fragen 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 Webseite nur mit der Tastatur testen. Die folgenden Befehle sind für Tastaturtests unerlässlich.

Visuelle Tests

Bei visuellen Tests werden visuelle Elemente der Seite untersucht. Dabei werden Tools wie die Bildschirmlupe oder die Browservergrößerung verwendet, um die Webseite oder App auf Barrierefreiheit zu überprüfen.

Visuelle Tests 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 Webseite oder in der gesamten App einheitlich?
• Gibt es Blinken, Stroboskop-Effekte oder Animationen, die die Empfehlungen überschreiten?
• Sind die Inhalte richtig formatiert? Gilt das für Buchstaben, Wörter, Zeilen und Absätze?
• Können Sie alle Inhalte mit einer Bildschirmlupe oder der Browservergrößerung 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 unter anderem folgende Fragen beantwortet:

• Sind Seitentitel, Überschriften und Formularlabels klar und aussagekräftig?
• Sind Alternativen für Bilder prägnant, korrekt und nützlich?
• Wird Farbe allein als einzige Möglichkeit verwendet, um 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 Tests durch, um zu sehen, ob wir noch weitere Probleme mit der Barrierefreiheit finden können.

Schritt 1

In unserer aktualisierten CodePen-Demo wurden 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 das CSS in der Demo scannen, sollten Sie die gefürchtete Zeile „outline: none“ in der Codebasis 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 mit der Tastatur fokussiert werden kann.

<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 Tests 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 Überfahren mit der Maus und beim Tastaturfokus aufweisen.

Wir beheben das Problem.

Eine schnelle Lösung besteht darin, den Links in den Absätzen eine Unterstreichung hinzuzufügen, 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 sich die Demo mit einem Tool zur Überprüfung des Linkkontrasts ansehen, sehen Sie, dass die Linkfarbe die Anforderung an den Farbkontrast von 4,5:1 erfüllt zwischen normal großem Text und dem Hintergrund. Nicht unterstrichene Links müssen jedoch auch eine Anforderung an den Farbkontrast von 3:1 gegenüber dem 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 Fließtext 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 vollständig aus dem CSS entfernen, da links die Standardausrichtung für Browser ist. Testen Sie den Code, falls andere geerbte Stile die Standardausrichtung des Textes 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 Tests 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 zum automatisierten und manuellen Testen abgeschlossen. Sie können sich unsere aktualisierte CodePen-Demo ansehen, in der alle automatisierten und manuellen Korrekturen zur Barrierefreiheit angewendet wurden.

Gehen Sie nun zum letzten Testmodul, das sich mit Tests mit Hilfstechnologienbefasst.