Seiteninhalt

Installation

• Google Chrome Version 90.0.4430.93 (Offizieller Build) (64-Bit)
• Browsereinstellungen: Seitenzoom: 100%, Schriftgröße: mittel
• Chrome-Erweiterung „Disable Content-Security-Policy“ Version 3.0.0: zum Download
• Chrome-Erweiterung „Zoom Text Only“ Version 1.5.3 zum Download

Bookmarklet

• ANDI ( Bookmarklet für Browser) Version 27.3.2, weitere Informationen

• Home 10.0.19042 Build 19042 (Skalierung: 150%, Auflösung: 1920 x 1080)
• NVDA - kostenfreie Bildschirmvorlesesoftware Version 2020.04
• Colour Contrast Analyser Version 3.1.2

• Bluetooth-Tastatur
• TalkBack (Bildschirmvorlesesoftware von Android-Geräten meistens vorinstalliert)
• Accessibility Scanner Version 2.2.1.351925010

• Bluetooth-Tastatur (aktiviert in Bedienungshilfen)
• VoiceOver (Bildschirmvorlesesoftware von Android-Geräten meistens vorinstalliert)

Falls Sie den Browser Google Chrome schon länger benutzen, kann es sein, dass sie Erweiterungen installiert haben, die die Testergebnisse verfälschen würden. Dies kann z.B. ein Werbeblocker sein, der die Anzeige von störenden Überblendungen verhindert. Des weiteren könnten im Browser Anmeldedaten gespeichert sein, die automatisch angewendet werden. Auch dieses kann die Testergebnisse verfälschen. Daher empfehlen wir, den Test im sogenannten Inkognito-Modus durchzuführen. Ein Inkognito-Fenster können Sie durch einen Rechtsklick auf das Icon des Browsers öffnen. Alternativ können Sie auch im Browser die Tastenkombination [Strg]-, [Umschalt]- und [N]-Taste drücken.

Bookmarklet ANDI (Accessible Name & Description Inspector)

Ein Bookmarklet ist eine kleine Softwareanwendung, die als Lesezeichen in einem Webbrowser gespeichert wird und dem Benutzer in der Regel die Möglichkeit gibt, mit der aktuell geladenen Webseite zu interagieren. ANDI ist ein Angebot der US-amerikanischen Verwaltung der sozialen Sicherheit (Social Security Administration) und bietet eine gute Unterstützung bei den meisten unserer Testschritte. Die Bedienoberfläche ist zwar auf Englisch, wird aber in den einzelnen Testschritten erläutert.

Installation

• Öffnen Sie Google Chrome im Inkognito-Modus
• Sollte die Lesezeichenleiste nicht angezeigt werden, drücken sie die Tasten [Strg], [Umschalt]- und [B]-Taste gleichzeitig.
• Öffnen Sie die Homepage von ANDI.
• Ziehen Sie Schaltfläche „ANDI“ in ihre Lesezeichenleiste

Erweiterungen

Durch Browser-Erweiterungen kann ebenfalls mit der aktuellen Webseite interagiert werden. Zur Installation folgen Sie bitte den Links und betätigen dann die Schaltfläche „Hinzufügen“ und danach „Erweiterung hinzufügen“.

• Die Erweiterung Zoom Text Only Version 1.5.3 ermöglicht es, ausschließlich den Text einer Webseite oder Webanwendung zu vergrößern.

• Die Erweiterung Disable Content-Security-Policy Version 3.0.0 setzt kurzzeitig die Inhalts- Sicherheitsrichtlinie einer Webseite außer Kraft. Manche Webseiten blockieren über diese ein Nachladen von externem JavaScript und verhindern damit die Ausführung von ANDI. Dieser Modus stellt kein Sicherheitsrisiko dar und wird beendet, wenn die Seite geschlossen wird.

Nachdem die Erweiterungen installiert sind, sollten Sie angepinnt werden, damit Sie schnell darauf zugreifen können. Danach klicken Sie bitte auf „Erweiterungen verwalten“, gehen jeweils in die Details und aktivieren „Im Inkognitomodus zulassen“.

Einstellungen

Wir haben mit folgenden Einstellungen getestet:

• chrome://settings/cookies : Alle Cookies zulassen
• Seitenzoom: 100%
• Schriftgröße: mittel

Betriebssystemversion und Einstellungen

Wir haben mit Windows Home Version 10.0.19042 Build 19042 bei einer Skalierung: von 150% und einer Auflösung: von 1920 x 1080 getestet.

„Non-visual Desktop Assistant“ (NVDA)

NVDA Ist eine kostenlose Bildschirmvorlesesoftware (Screenreader) für Windows. Wir haben Version 2020.04 genutzt, um Die Bedienbarkeit mit einem Screenreaderbei nativen Windows Anwendungen zu testen. Wie bei allen Screenreadern empfiehlt sich hier auch, sich etwas Zeit für die Einarbeitung zu nehmen.

Color Contrast Analyser

Der Colour Contrast Analyser ist ein frei verfügbares Kontrastanalyse-Werkzeug, mit dem wir bei Verdachtsfällen sowohl die Kontraste in nativen Windows-Anwendungen, als auch anhand von Screenshots die Kontraste in mobilen Apps getestet haben. Wir haben Version 3.1.2 benutzt.

• Auch unter Android können Sie die Tastaturbedienbarkeit einer App mit Hilfe einer externen Bluetooth-Tastatur testen. Hierzu koppeln Sie sie bitte mit dem Endgerät.
• Den Android-eigenen Screenreader Talkback finden Sie unter Einstellungen und dann bei Eingabehilfe. Sollte Talkback auf dem Gerät nicht installiert sein, müssen Sie dieses über dem PlayStore nachholen. Auch hier empfiehlt es sich, dass sie sich ein wenig Zeit nehmen, sich mit der Bedienung vertraut zu machen.

Accessibility Scanner

• Sollten Sie bereits Erfahrung mit dem Testen von Barrierefreiheit haben, können Sie optional die App Accessibility Scanner installieren. Diese kann ihre Interaktionen mit einer App aufzeichnen, indem sie Screenshots erstellt und diese anschließend hinsichtlich Mängel auf ihrer Barrierefreiheit prüft und notiert. Diese sind allerdings nicht immer einfach zu interpretieren. Für unsere Tests haben wir Version 2.2.1.351925010 benutzt.

Installation

Die App können Sie aus dem Google Play Store installieren. Befolgen Sie bitte zur Einrichtung die Anweisungen der App. Sollten Schwierigkeiten auftreten, ist die Kontaktaufnahme mit dem Anbieter zu empfehlen.

Verwendung

Ist der Accessibility Scanner installiert, erscheint auf der Home-Seite des Endgerätes eine Verknüpfung. Nun muss man die zu testende Anwendung öffnen, um parallel den Scanner anwenden zu können.

Klickt man auf die Verknüpfung, erhält man die Auswahl zwischen „Aufnahme“, wobei während der Nutzung App regelmäßig automatisch Screenshots gemacht werden, und „Snapshot“. Beim letzteren wird nur im Moment des Drückens ein Screenshot des Bildschirmes gemacht.

Auswertung

• Wenn Sie alle relevanten Oberflächen aufgenommen haben, können Sie den Accessibility Scanner öffnen und sehen die Übersicht über die Seiten.

• Wahlen Sie eine Seite aus, wird diese angezeigt. Hinsichtlich der Barrierefreiheit problematische Stellen sind orange umrandet. Tippen Sie auf eine dieser Umrandungen, werden Details zum Problem gezeigt. Sie können auch mit den Pfeilen an den Seiten des Bildschirms durch die Meldungen navigieren.

Die Hinweise umfassen unter anderem Probleme mit der Größe der Schaltflächen, dem Kontrast und Textalternativen.

• Wollen Sie die Tastaturbedienbarkeit einer App testen, sollten Sie eine Bluetooth-Tastatur mit dem Endgerät koppeln. Die Tastaturbedienung des Betriebssystems muss unter iOS explizit in den Bedienungshilfen aktiviert werden. Hierzu finden Sie unter den Optionen zu Physisch und Motorisch den Punkt „Tastaturen“, der wiederum aktiviert werden muss. In der Tastatursteuerung lässt sich diese nicht nur anschalten sondern die voreingestellten Tastenkürzel können unter „Befehle“ individuell neubelegt werden.

• In den Bedienhilfen finden Sie unter den Optionen zu Sehen auch die Schaltfläche zum Aktivieren der Bildschirmvorlesesoftware (Screenreader) „VoiceOver“. Es empfiehlt sich dass sie kurz das Tutorial zu VoiceOver durchführen, um sich mit dessen Bedienung vertraut zu machen.

Benutzen Sie ANDI auf der Seite, indem Sie auf den Link in der Lesezeichenleiste klicken. Möglicherweise wird ANDI durch die Seite geblockt. In diesem Falle aktivieren Sie bitte die Erweiterung „Disable Content Security Policy“ und laden die Seite neu. Sollte ANDI auch danach nicht benutzbar sein, können Sie auch auf den Screenreader NVDA zurückgreifen und sich die Beschreibungen der Eingabefelder ansagen lassen.

ANDI startet im Modul „focusable elements“ (Fokussierbare Elemente). Klicken Sie hier bitte auf den Link mit der Beschriftung „label tags“. Hierdurch werden auf der Seite die korrekt über ein „label“-Element ausgezeichneten Beschriftungen für Eingabe-Elemente eingeblendet. Alternativ können die Eingabefelder auch über Platzhaltertexte verfügen. Fahren Sie mit der Maus über die vorhandenen Eingabefelder und schauen Sie, ob bei „ANDI Output“ eine sinnvolle Beschreibung für das Eingabefeld steht.

Benutzen Sie den Screenreader und navigieren Sie alle Eingabefelder mit der Maus oder der Tastatur an. Bitte achten Sie darauf, ob die auf dem Bildschirm angezeigte Beschriftung der Felder angesagt wird. Bei Eingabefeldern ohne sichtbare Beschriftung muss die Beschreibung den Zweck des Feldes erklären.

Benutzen Sie den Screenreader Talkback und tippen Sie alle Eingabefelder an. Bitte achten Sie darauf, ob die auf dem Bildschirm angezeigte Beschriftung der Felder angesagt wird. Bei Eingabefeldern ohne sichtbare Beschriftung muss die Beschreibung den Zweck des Feldes erklären.

Benutzen Sie den Screenreader VoiceOver und tippen Sie alle Eingabefelder an. Bitte achten Sie darauf, ob die auf dem Bildschirm angezeigte Beschriftung der Felder angesagt wird. Bei Eingabefeldern ohne sichtbare Beschriftung muss die Beschreibung den Zweck des Feldes erklären.

Benutzen Sie ANDI auf der Seite, indem Sie auf den Link in der Lesezeichenleiste klicken. Möglicherweise wird ANDI durch die Seite geblockt. In diesem Falle aktivieren Sie bitte die Erweiterung „Disable Content Security Policy“ und laden die Seite neu. Danach sollte ANDI benutzbar sein.

Wählen Sie in ANDI das Modul „graphics / images“ (Grafiken / Bilder). Klicken Sie hier bitte auf den Link mit der Beschriftung „find background“.

Hierdurch werden auf der Seite die Hintergrundbilder mit einem grünen Rahmen versehen. Nun können Sie die Seite einer Sichtkontrolle unterziehen.

Die grün umrahmten Bilder sind Hintergrundbilder und sollten rein dekorativ sein, also keine Informationen enthalten, die für das Verständnis der Seite wichtig sind.

Die rot gestrichelt umrandeten Bilder enthalten keinerlei Text-Alternative, was Bildschirmvorlesesoftware je nach Konfiguration dazu veranlasst, den Dateipfad vorzulesen.

Wenn Sie ein Bild mit der Maus überfahren, wird unter ANDI Output die Texte-Alternative angezeigt. Bitte prüfen Sie, ob der Inhalt des Bildes im Kontext der Seite sinnvoll und ausreichend beschrieben ist, um es zu verstehen.

Benutzen Sie den Screenreader und navigieren Sie per Maus oder Tastatur zu den verfügbaren Bildern. Achten Sie darauf, ob die Bilder ausreichend beschrieben sind, sofern sie zum Verständnis des Anwendungsinhaltes beitragen. Bilder, die klar als Dekoration erkennbar sind, sollten hingegen nicht angesagt werden.

Benutzen Sie den Screenreader Talkback und tippen Sie auf oder navigieren Sie per Tastatur zu den verfügbaren Bildern. Achten Sie darauf, ob die Bilder ausreichend beschrieben sind, sofern sie zum Verständnis des Anwendungsinhaltes beitragen. Bilder, die klar als Dekoration erkennbar sind, sollten hingegen nicht angesagt werden.

Alternativ benutzen Sie die App Accessibility Scanner, achten Sie auf Fehler vom Typ „Objektlabel“. Beim Tippen auf Bilder wird der angesagte Text auf dem Bildschirm angezeigt.

Benutzen Sie den Screenreader VoiceOver und tippen Sie auf oder navigieren Sie per Tastatur zu den verfügbaren Bildern. Achten Sie darauf, ob die Bilder ausreichend beschrieben sind, sofern sie zum Verständnis des Anwendungsinhaltes beitragen. Bilder, die klar als Dekoration erkennbar sind, sollten hingegen nicht angesagt werden.

Wählen Sie in ANDI das Modul „links / buttons“ (Verweise / Schaltflächen). Nun können Sie mit Hilfe der Vorspultaste durch die vorhandenen Links navigieren und unter ANDi Output die Text-Alternative überprüfen. Diese soll sinnvoll das Ziel, bzw. den Zweck des jeweiligen Links beschreiben. Klicken Sie dann bitte auf den Link mit der Beschriftung „buttons“ und wiederholen den Vorgang für die Schaltflächen.

Benutzen Sie den Screenreader und navigieren Sie per Maus oder Tastatur zu den verfügbaren Schaltflächen und Links. Achten Sie darauf, ob der Zweck, beziehungsweise das Ziel, ausreichend beschrieben ist. Bei Schaltflächen sollte der sichtbare Text auch Bestandteil der Ansage sein.

Benutzen Sie den Screenreader Talkback und tippen Sie auf oder navigieren Sie per Tastatur zu den verfügbaren Schaltflächen und Links. Achten Sie darauf, ob der Zweck, beziehungsweise das Ziel, ausreichend beschrieben ist. Bei Schaltflächen sollte der sichtbare Text auch Bestandteil der Ansage sein.

Benutzen Sie den Screenreader VoiceOver und tippen Sie auf oder navigieren Sie per Tastatur zu den verfügbaren Schaltflächen und Links. Achten Sie darauf, ob der Zweck, beziehungsweise das Ziel, ausreichend beschrieben ist. Bei Schaltflächen sollte der sichtbare Text auch Bestandteil der Ansage sein.

Wählen Sie in ANDI das Modul „structures“ (Strukturen). Klicken Sie dann bitte auf die Schaltfläche mit der Beschriftung „show headings list“. Nun wird Ihnen eine Aufstellung der Überschriften der Seite angezeigt.
Diese können entweder als HTML-Heading-Elemente (h1-h6), oder als ein ein Element mit der Rolle „heading“ (z.B.: <div role=”heading” aria-level=”3”>) ausgezeichnet sein. Sie sollten mit Ebene 1 (<h1>) beginnen und logisch verschachtelt sein, ohne dass Überschriften-Ebenen übersprungen werden.

Für Windows-Anwendungen ist dieser Schritt nicht durchführbar.

Wechseln Sie mit aktiviertem Screenreader Talkback bitte den Lesemodul zu „Überschriften“. Dazu bewegen Sie den Finger ohne abzusetzen auf dem Bildschirm einmal auf und ab, bis der Modul angezeigt wird. Nun können Sie mit Wischgesten nach oben und unten durch die Überschriften navigieren. Vergessen Sie nicht, den Modul nach dem Test wieder zu wechseln.

Benutzen Sie bitte den Screenreader VoiceOver-Rotor, um den Punkt „Überschriften“ auszuwählen. Der Rotor funktioniert wie ein Drehknopf. Drehen Sie bitte zur Aktivierung mit zwei Fingern auf dem Bildschirm, das funktioniert am einfachsten mit Zeigefinger und Daumen. Mehr Informationen: Informationen zum VoiceOver-Rotor auf dem iPhone, iPad und iPod touch.

Nun können Sie mit Wischgesten nach oben und unten durch die Überschriften navigieren. Vergessen Sie nicht, den Modul nach dem Test wieder zu wechseln.

Klicken Sie bitte im Modul „structures“ (Strukturen) auf die Schaltfläche mit der Beschriftung „reading order“. Nun werden auf der Seite Zahlen eingeblendet, die die Lesereihenfolge angeben. Bitte überprüfen Sie, ob die Reihenfolge der Zahlen mit der Reihenfolge des Inhalts übereinstimmt.

Bitte benutzen Sie den Screenreader NVDA und navigieren Sie mit der Pfeiltaste nach unten, um sich den Text ansagen zu lassen, bezeihungsweise die Tabulatortaste, wenn Sie auf Schaltflächen stoßen. Überprüfen Sie, ob die Reihenfolge der Ansage der sichtbaren Reihenfolge entspricht.

Bitte bewegen Sie mit aktiviertem Screenreader Talkback ihren Finger ohne abzusetzen von unten nach oben und dann nach rechts. Es öffnet sich ein Menü, in dem Sie bitte „Ab dem nächsten Element vorlesen“ auswählen. Nun werden alle Elemente auf dem Bildschirm vorgelesen. Überprüfen Sie, ob die Reihenfolge der Ansage der sichtbaren Reihenfolge entspricht.

Bitte wischen Sie mit aktiviertem Screenreader VoiceOver wiederholt nach links, um durch den Inhalt zu navigieren. Überprüfen Sie, ob die Reihenfolge der Ansage der sichtbaren Reihenfolge entspricht.

Wählen Sie in ANDI das Modul „color contrast“.

Auf der rechten Seite zeigt ANDI neben der Gesamtzahl der Text-Elemente auch die Anzahl der Elemente mit einem potentiellen Kontrast-Problem. Aus dem Verhältnis dieser beiden Zahlen zueinander, lässt sich zunächst ein erster grober Eindruck über den Kontrastreichtum der Webseite gewinnen.

Zur Sicherheit kann in ANDI mit der Vorwärtstaste durch die Elemente navigiert oder Verdachtsfälle mit der Maus überfahren werden und hinsichtlich ihrer Wichtigkeit bewertet werden. Schaltflächen und erläuternde Texte sollten auf jeden Fall über ausreichende Kontraste verfügen.

Für einen manuellen Test der Kontraste stellt ANDI ein Hilfsmittel zur Verfügung, dass Sie mit der Schaltfläche „show contrast playground“ öffnen können. In diesem können Sie mithilfe des Pipetten-Auswahlwerkzeuges die Vordergrund- sowie die Hintergrundfarbe auswählen und sich das Kontrastverhältnis anzeigen lassen. ANDI zeigt auch sofort an, ob das Kontrastverhältnis ein Problem darstellt.

Bei einer Windows-Anwendung können Sie die Kontrastverhältnisse mithilfe des Colour Contrast Analyser überprüfen. Hierzu wählen Sie mit dem Pipettenwerkzeug zunächst einen Punkt im Hintergrund und danach einen Punkt aus dem Vordergrund aus. Bitte wählen Sie für den Vordergrund einen Punkt aus, der im Vergleich zum Hintergrund das wahrscheinlich beste Kontrastverhältnis hat. Bei einem dunklen Hintergrund also einen sehr hellen und bei einem hellen Hintergrund einen sehr dunklen Punkt.

Wenn Sie den Accessibilty Scanner verwenden, dann wird dieser während der Anwendung Bildschirmaufnahmen machen und zeigt mangelnde Kontraste in den Ergebnissen an.

Alternativ können Sie selbst während der Benutzung einer App Screenshots machen und diese auf Ihren Computer übertragen. Dort können Sie die Screenshots mithilfe des Colour Contrast Analyser auf Elemente, die ein Problem darstellen könnten, überprüfen.

Hierzu wählen Sie auf dem Screenshot mit dem Pipettenwerkzeug zunächst einen Punkt im Hintergrund und danach einen Punkt aus dem Vordergrund aus. Bitte wählen Sie für den Vordergrund einen Punkt aus, der im Vergleich zum Hintergrund das wahrscheinlich beste Kontrastverhältnis hat. Bei einem dunklen Hintergrund also einen sehr hellen und bei einem hellen Hintergrund einen sehr dunklen Punkt.

Machen Sie bitte selber während der Benutzung einer App Screenshots und übertragen diese auf Ihren Computer. Dort können Sie die Screenshots mithilfe des Colour Contrast Analyser auf Elemente, die ein Problem darstellen könnten, überprüfen.

Hierzu wählen Sie auf dem Screenshot mit dem Pipettenwerkzeug zunächst einen Punkt im Hintergrund und danach einen Punkt aus dem Vordergrund aus (s.Windows). Bitte wählen Sie für den Vordergrund einen Punkt aus, der im Vergleich zum Hintergrund das wahrscheinlich beste Kontrastverhältnis hat. Bei einem dunklen Hintergrund also einen sehr hellen und bei einem hellen Hintergrund einen sehr dunklen Punkt.

Bitte fahren Sie mit der Maus über den Browse-Tab der Anwendung, daraufhin wird Ihnen der Seitentitel angezeigt.

Bitte fahren Sie mit der Maus in der Taskleiste über das Symbol der Anwendung. Daraufhin wird Ihnen der Anwendungstitel angezeigt.

Bitte benutzen Sie die Schaltfläche oder Geste zur Anzeige der Übersicht der geöffneten Apps.

Bitte benutzen Sie die Schaltfläche oder Geste zur Anzeige der Übersicht der geöffneten Apps.

Drücken Sie bitte 6 mal die Tastenkombination [Strg]-[+], um den Seiteninhalt zu vergrößern. Bitte überprüfen Sie, ob alle Inhalte noch vollständig lesbar sind und es zu keinem Überlappen oder Abschneiden von Inhalten kommt. Ein horizontales Scrollen sollte nicht nötig sein, um alle Inhalte zu erreichen.

In manchen Browsern ist es möglich, einzustellen, dass auf Webseiten nur die Texte vergrößert werden. Layout-Elemente und Bilder werden dann je nach Programmierung nicht mit vergrößert. Zum Testen dieser Funktion mit Google Chrome benötigen Sie die Erweiterung „Zoom-Text-only“. Diese starten Sie, indem Sie auf das Symbol neben der Adresszeile klicken. Stellen Sie die Textgröße auf 200% und überprüfen Sie, ob alle Inhalte noch lesbar sind und es keine Überschneidungen des Inhalts gibt. Nach dieser Kontrolle setzen Sie bitte durch die Schaltfläche „Reset“ die Einstellungen zurück, damit die Vergrößerung die Ergebnisse der weiteren Testschritte nicht verfälscht. .

In den Systemeinstellungen können Sie unter „Erleichterte Bedienung“ einige Änderungen vornehmen. Bei „Text vergrößern“ sehen Sie eine Leiste, auf der Sie mit dem Regler von Standard-Größe auf bis zu 225% skalieren können. Zum Testen benötigen Sie eine Textvergrößerung von 200%, so dass die Schriftgröße sich mindestens verdoppelt. Überprüfen Sie nun, ob alle Inhalte noch lesbar sind und es keine Überschneidungen des Inhalts gibt.

In den Systemeinstellungen finden Sie die „Eingabehilfe“. Da können Sie verschiedene Einstellungen vornehmen, um eine verbesserte Bedienung zu erhalten. Unter diesen Punkt finden Sie „Verbesserungen der Sichtbarkeit“ und hier wählen Sie „Größe und Zoom“ aus, um bei „Schriftgröße und -stil“ mit Hilfe einer Leiste den Text anzupassen. Dabei müssen Sie beachten, dass sich die Schriftgröße mindestens verdoppet und überprüfen Sie anschließend, ob alle Inhalte noch lesbar sind und es keine Überschneidungen des Inhalts gibt.

In den Systemeinstellungen finden Sie den Menüpunkt „Bedienungshilfen“. Dort unter „Anzeige & Textgröße“ können bei „Größerer Text“ die Eigenschaften derverwendeten Schriften geändert werden. Durch Aktivierung des Option-Schalters „Größerer dynamischer Text“ wird die Schriftgröße, in allen Applikationen angepasst, wenn sie dynamische Texte unterstützen. Hier finden Sie auch einen Schieberegler, mit dem Sie die Schriftgröße anpassen können. Dabei müssen Sie beachten, dass sich die Schriftgröße mindestens verdoppet und überprüfen Sie anschließend, ob alle Inhalte noch lesbar sind und es keine Überschneidungen des Inhalts gibt.