Manuelle Tests der Barrierefreiheit

Manuelle Tests – Grundlagen

Bei manuellen Tests zur Barrierefreiheit werden Tastatur-, visuelle und kognitive Tests, Tools, und Techniken zur Erkennung von Problemen, die mit automatisierten Tools nicht möglich sind. Wie automatisch nicht alle Erfolgskriterien der WCAG, sondern Wichtig ist, dass Sie keine automatischen Tests zur Barrierefreiheit durchführen und dann die Tests beenden.

Mit dem technologischen Fortschritt können allein durch automatisierte Tools weitere Tests durchgeführt werden. Heute müssen Ihren Testprotokollen jedoch sowohl manuelle als auch assistive Technologieprüfungen hinzugefügt werden, um alle anwendbaren WCAG-Prüfpunkte abzudecken.

Vorteile manueller Tests zur Barrierefreiheit:

• Relativ einfach und schnell umzusetzen
• Es werden mehr Probleme erkannt als mit automatisierten Tests allein
• Wenig Tools und wenig Fachwissen für den Erfolg erforderlich

Nachteile manueller Tests zur Barrierefreiheit:

• Komplexer und zeitaufwendiger als automatisierte Tests
• Kann schwierig sein, in großem Umfang zu wiederholen
• Mehr Barrierefreiheits-Know-how erforderlich, um Tests durchzuführen und die Ergebnisse zu interpretieren

Sehen wir uns an, welche Elemente und Details der Barrierefreiheit derzeit erkannt werden. von einem automatisierten Tool und solche, die nicht erkannt werden.

Arten manueller Tests

Es gibt viele manuelle Tools und Techniken, die Sie bei der Analyse Ihrer Webseite oder App für digitale Barrierefreiheit. Die drei wichtigsten Schwerpunkte Manuelle Tests sind Tastaturfunktionen, visuelle Bewertungen und allgemeine Inhaltsprüfungen.

Wir werden jedes dieser Themen in diesem Modul grob behandeln, aber die Die folgenden Tests stellen keine vollständige Liste aller manuellen Tests dar die Sie ausführen können oder sollten. Wir empfehlen Ihnen, mit einer Checkliste für die manuelle Barrierefreiheit von einer seriösen Quelle an und entwickeln Sie Ihre eigene, zielgerichtete Checkliste für manuelle Tests. spezielle Anforderungen an Ihr digitales Produkt und Ihr Team.

Tastaturprüfungen

Schätzungen zufolge sind etwa 25% aller Probleme bei der digitalen Barrierefreiheit mangelnde Tastaturunterstützung. Wie wir im Modul Tastaturfokus gelernt haben, betrifft dies alle Arten von Nutzern, einschließlich sehender Nutzer mit Tastatur, sehbehinderten/blinden Screenreadern und Personen, die eine Spracherkennungssoftware mit Technologie verwenden, die darauf angewiesen ist, dass Inhalte auch per Tastatur zugänglich sind.

Mit Tastaturtests werden u. a. folgende Fragen beantwortet:

• Benötigt die Webseite oder die Funktion eine Maus, um zu funktionieren?
• Ist die TAB-Reihenfolge logisch und intuitiv?
• Ist die Fokusanzeige der Tastatur immer sichtbar?
• Können Sie bei einem Element feststecken, das nicht im Fokus stehen sollte?
• Können Sie hinter oder um ein Element herum navigieren, das im Fokus sein sollte?
• Ist beim Schließen eines Elements, das den Fokus erhalten hat, der Fokusanzeige wieder an eine logische Stelle zurückgekehrt?

Die Tastatur bietet zwar enorme Auswirkungen, das Testverfahren ist jedoch recht einfach. Dazu müssen Sie nur Ihre Maus zur Seite legen oder ein kleines JavaScript-Paket installieren und Ihre Website nur mit Ihrer Tastatur testen. Die folgenden Befehle sind für das Testen der Tastatur unerlässlich.

Visuelle Prüfungen

Bei der visuellen Prüfung liegt der Fokus auf visuellen Elementen der Seite. Mithilfe von Tools wie der Bildschirmvergrößerung oder dem Browserzoom wird die Barrierefreiheit der Website oder App überprüft.

Anhand der Sichtprüfung können Sie Folgendes erkennen:

• Gibt es Farbkontrastprobleme, die ein automatisiertes Tool nicht erkennen konnte, z. B. Text über einem Farbverlauf oder einem Bild?
• Gibt es Elemente, die wie Überschriften, Listen oder andere strukturelle Elemente aussehen, aber nicht als solche codiert sind?
• Sind Navigationslinks und Formulareingaben auf der gesamten Website oder in der App einheitlich?
• Gibt es Blinkungen, Stroboskopeffekte oder Animationen, die die Empfehlungen nicht überschreiten?
• Haben die Inhalte korrekte Abstände? Für Buchstaben, Wörter, Zeilen und Absätze?
• Können Sie den gesamten Inhalt mit der Lupe oder dem Browserzoom sehen?

Inhaltsprüfungen

Im Gegensatz zu visuellen Tests, bei denen Layouts, Bewegungen und Farben im Mittelpunkt stehen, liegt der Fokus bei Inhaltsprüfungen 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 Sinn ergibt.

Mit der Inhaltsüberprüfung lassen sich z. B. folgende Fragen beantworten:

• Sind Seitentitel, Überschriften und Formularbeschriftungen klar und aussagekräftig?
• Sind Bildalternativen prägnant, präzise und nützlich?
• Wird nur Farbe verwendet, um Bedeutung oder Informationen zu vermitteln?
• Sind die Links beschreibend oder wird ein generischer Text wie „Weiterlesen“ oder „Hier klicken“ verwendet?
• Wurde die Sprache auf einer Seite geändert?
• Wird einfache Sprache verwendet und werden alle Abkürzungen ausgeschrieben, wenn sie zum ersten Mal darauf verweisen?

Einige Inhaltsprüfungen können teilweise automatisiert werden. Sie könnten beispielsweise einen JavaScript-Linter schreiben, der nach "Hier klicken" sucht. und schlägt vor, eine Änderung vorzunehmen. Oftmals ist bei diesen kundenspezifischen Lösungen aber immer noch ein Mensch erforderlich, der die Texte in einen Kontext ändern muss.

Demo: Manueller Test

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

Schritt 1

Unsere aktualisierte CodePen-Demo enthält der automatischen Updates für Bedienungshilfen.

Rufen Sie es im Debug-Modus auf, um mit der nächsten Tests. Dies ist wichtig, da dadurch das <iframe> entfernt wird, das die Demo-Webseite, die einige Testtools beeinträchtigen kann. Weitere Informationen über Debug-Modus von CodePen verwenden.

Schritt 2

Beginnen Sie den manuellen Testprozess, indem Sie die Maus oder das Touchpad zur Seite legen und im DOM nur mit Ihrer Tastatur nach oben und unten navigieren.

Problem 1: Sichtbare Fokusanzeige

Das erste Tastaturproblem sollte sofort zu sehen sein bzw. gar nicht mehr, da die sichtbare Fokusanzeige entfernt wurde. Wenn Sie den CSS-Code in der Demo scannen, sollte der Codebasis das gefürchtete „outline: none“ hinzugefügt werden.

  :focus {
    outline: none;
  }

</ph> Problem beheben

Wie Sie im Fokusmodul für die Tastatur gelernt haben, müssen Sie diese Codezeile entfernen, damit Webbrowser einen sichtbaren Fokus für Nutzer hinzufügen 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

Nachdem Sie die Fokusanzeige geändert haben, über die Seite navigieren können. Dabei sollten Sie feststellen, dass das Eingabefeld das Abonnieren des Newsletters verwendet wurde, nicht hervorgehoben wird. Wurde entfernt aus der natürlichen Fokusreihenfolge durch einen negativen Tabindex entfernt.

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

</ph> Problem beheben

Da wir möchten, dass die Nutzer 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 per Tastatureingabe 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 visuellen und inhaltlichen Überprüfung weiter.

Problem 3: Farbkontrast der Links

Während Sie die Tastaturtests durchlaufen haben, indem Sie auf der Demoseite mit der Tabulatortaste nach oben und unten haben Sie wahrscheinlich bemerkt, dass sich die Tastatur auf drei optisch versteckten Links im über die verschiedenen Erkrankungen.

Damit unsere Seite zugänglich ist, müssen sich Links vom umgebenden Text abheben und eine Änderung des Nicht-Farbstils durch Bewegen des Mauszeigers und Tastaturfokus einschließen.

</ph> Problem beheben

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 es passt möglicherweise nicht zu der Designästhetik, die Sie erreichen möchten.

Wenn Sie keine Unterstreichung hinzufügen möchten, müssen Sie die Farben so ändern, dass sie den Anforderungen sowohl für den Hintergrund als auch für den Text entsprechen.

Wenn Sie sich die Demo mit dem Tool zur Überprüfung des Linkkontrasts ansehen, werden Sie feststellen, dass die Linkfarbe die Anforderung an den Farbkontrast von 4,5:1 zwischen normalem Text und dem Hintergrund erfüllt. Nicht unterstrichene Links müssen jedoch einem Farbkontrast von 3:1 gegenüber dem umgebenden Text entsprechen.

Eine Möglichkeit besteht darin, die Linkfarbe so zu ändern, dass sie zu den anderen Elementen auf der Seite passt. Wenn Sie jedoch die Linkfarbe in Grün ändern, muss auch der Fließtext so angepasst werden, dass er die allgemeinen Anforderungen an den Farbkontrast zwischen allen drei Elementen erfüllt: Links, Hintergrund und umgebenden Text.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Problem 4: Farbkontrast der Symbole

Ein weiteres Problem beim Farbkontrast sind die Social-Media-Symbole. Im Modul Farbe und Kontrast haben Sie gelernt, dass wichtige Symbole einen Farbkontrast von 3:1 zum Hintergrund haben müssen. In der Demo haben die Social-Media-Symbole jedoch ein Kontrastverhältnis von 1,3:1.

</ph> Problem beheben

Um die Anforderungen an den 3:1-Farbkontrast zu erfüllen, werden die Symbole für soziale Medien in ein dunkleres Grau geändert.

</ph>

Problem 5: Inhaltslayout

Wenn Sie sich das Layout des Absatzinhalts ansehen, ist der Text vollständig gerechtfertigt ist. Wie Sie in den Modul „Typografie“, entstehen so „Raumfluss“, was den Text für einige Nutzer zu lesen.

p.bullet {
   text-align: justify;
}

</ph> Problem beheben

Um die Textausrichtung in der Demo zurückzusetzen, können Sie den Code so aktualisieren, dass text-align: left; oder entfernen Sie diese Zeile vollständig aus dem CSS, da links der Standardausrichtung für Browser. Testen Sie den Code unbedingt, Mit übernommenen Stilen wird die Standardtextausrichtung entfernt.

p.bullet {
   text-align: left;
}

Schritt 4

</ph> <ph type="x-smartling-placeholder">

Sobald Sie alle in den vorherigen Schritten beschriebenen manuellen Probleme mit den Bedienungshilfen identifiziert und behoben haben, sollte Ihre Seite dem Screenshot ähneln.

Es ist möglich, dass Sie bei Ihren manuellen Prüfungen mehr Probleme mit der Barrierefreiheit finden, als in diesem Modul behandelt wurden. Im nächsten Modul lernen Sie viele dieser Themen kennen.

Nächster Schritt

Weiter so! Du hast die Module zu automatisierten und manuellen Tests abgeschlossen. Sie können sich unseren aktualisierten CodePen ansehen. Dort wurden alle automatisierten und manuellen Korrekturen an Bedienungshilfen angewendet.

Gehen Sie nun zum letzten Testmodul, assistive Technologietests.

Wissen testen

Testen Sie Ihr Wissen über manuelle Tests zur Barrierefreiheit