So verwenden Sie die Axe-Erweiterung in Firefox V54+ mit NVDA

• Axe in Firefox V54+ mit NVDA installieren
• Einstellungen der Axe-Entwicklertools für Nutzer von Bildschirmleseprogrammen
• Verwendung von Axe in Firefox V54+ mit NVDA

Axe-Add-on herunterladen

1. Rufen Sie in Firefox ab Version 54 die Seitehttps://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ auf, um das Add-on „Axe Developer Tools“ zu installieren. Firefox öffnet den Link je nach den Einstellungen des Benutzers in einem neuen Tab oder Fenster.
2. Navigieren Sie zu und wählen Sie Zu Firefox hinzufügen auf der Seite zum Axe Developer Tools-Add-on.
3. Firefox zeigt eine Sicherheitswarnung an, in der die erforderlichen Berechtigungen für die weitere Installation des Add-ons aufgeführt sind. Drücken SieAlt+A, um Firefox die Berechtigung zum Abschluss der Installation der Erweiterung „Axe Developer Tools“ zu erteilen. Nach erfolgreicher Installation gibt NVDA folgende Ansage aus: „Axe wurde zu Firefox hinzugefügt.“ Drücken Sie Alt+O, um den Bestätigungsdialog zu schließen.Hinweis: Wenden Sie sich anIhren Sicherheits- oder Systemadministrator, falls Sie nicht über die erforderlichen Berechtigungen zur Installation der Browser-Erweiterung verfügen.

Überprüfung der Axe-Installation

4. Drücken SieAlt+T+A, um den Add-ons-Manager von Firefox zu öffnen.
5. Drücken SieNVDA+TAB, um die aktuelle Fokusposition zu überprüfen. NVDA verkündet: „Fokus auf der Anwendung ‚Add-ons-Manager‘.“ Die Seite „Add-ons-Manager“ zeigt eine Liste mit sieben Einträgen an, darunter „Add-ons herunterladen“, „Erweiterungen“, „Designs“ und „Plugins“ als auswählbare Optionen. Der Browserfokus ist standardmäßig auf „Erweiterungen“ gesetzt. Navigieren Sie mit denPfeiltastennach untenundnach obendurch die Optionsliste. Vergewissern Sie sich, dass die Option „Erweiterungen“ ausgewählt ist, und drücken Siedie Eingabetaste.
6. Presse TAB ein paar Mal, und sobald der Fokus über das Suchfeld für die Add-on-Suche auf mozilla.org hinauswandert, wird die Liste der installierten Erweiterungen angezeigt. Verwenden Sie die Pfeil nach unten und Pfeil nach oben Tasten, um bereits installierte Erweiterungen zu durchsuchen. Die Erweiterungen sind alphabetisch sortiert, sodass „Axe Accessibility Testing in Firefox Developer Tools“ ganz am Anfang der Liste steht. Wiederholen Sie die oben genannten Schritte 1 bis 3, falls der Eintrag für die Axe-Erweiterung nicht in der Liste der Erweiterungen erscheint.
7. Wenn „Axe“ ausgewählt ist, verkündet NVDA: „Axe-Barrierefreiheitstests in den Firefox-Entwicklertools. Weitere Versionshinweise: Wird geladen … Deaktivieren. Entfernen …“ Durch Drücken der Tabulatortaste werden drei zugehörige Schaltflächen angezeigt:
   • Mehr — Weitere Details zu diesem Add-on anzeigen.
   • Deaktivieren — Um das aktuell ausgewählte Add-on zu deaktivieren.
   • Entfernen — So entfernen (deinstallieren) Sie das Add-on aus Firefox.

   Hinweis: Die Deaktivieren Die Schaltfläche ist ein Umschalter. NVDA verkündet „Deaktivieren“, was darauf hinweist, dass das Add-on „Axe“ derzeit aktiviert ist.

8. Die Mehr Über diese Schaltfläche wird ein Fenster geöffnet, das die Versionsinformationen und die Beschreibung von Axe sowie Optionsfelder zur Steuerung der automatischen Updates enthält. Deque empfiehlt, die Standardeinstellung beizubehalten, die automatische Updates aktiviert. Die übrigen Auswahlmöglichkeiten sind Am und Aus.
9. Drücken SieStrg+W, um den Add-on-Manager zu schließen.

Launch Axe

1. Starten Sie Firefox, während NVDA läuft.
2. Öffnen Sie die zu testende Webseite. Beachten Sie, dass Axe die Seite in ihrem aktuellen, gerenderten Zustand testet. Enthält die Seite ein Formular, ist es hilfreich, einige Eingabefehler zu erzeugen und das Formular zu testen. Selbstverständlich kann und sollte das Formular auch in seinem Ausgangszustand getestet werden. Enthält die Seite Registerkarten, wird ebenfalls die gesamte Seite einschließlich des Inhalts der aktiven Registerkarte getestet.
3. Öffnen Sie das Untermenü „Webentwickler“ in Firefox Werkzeuge Menü.
4. Presse Abwärtspfeil an den Inspektor und die Presse Eingabe. Alternativ gilt: Wenn Sie einen Screenreader verwenden und Firefox 61 oder höher nutzen, könnte Folgendes für Sie interessant sein: Barrierefreiheit im Untermenü. Wählen Sie Barrierefreiheit stattdessen und drücken Sie Eingabe.
5. Die Entwicklertools berücksichtigen Ihre Einstellung und werden in einem separaten Fenster geöffnet.
6. Drücken Siedie TAB-Tasteoder einmal bzw. zweimaldie Tastenkombination UMSCHALT+TAB, um den NVDA-Fokus auf die Symbolleiste der Entwicklertools zu verschieben.
7. Verwenden Sie die Pfeil nach rechts und Pfeil nach links Tasten, um den Fokus auf „Axe“ zu setzen. NVDA meldet: „Umschaltknopf für Axe nicht gedrückt. Dev Panel Tool wurde durch das Axe-Add-on hinzugefügt.“ Drücken Sie Eingabe um Axe zu aktivieren. Der Fokus in Firefox wechselt nun zum Axe-Bereich innerhalb des Entwickler-Tools-Fensters. Sie haben die Axe-Tools in den Entwickler-Tools von Firefox erfolgreich aktiviert!

Einführung in die Axe-Benutzeroberfläche und Durchführung von Analysen

NVDA gibt die „Entwicklertools“ sowie den Titel und die URL der entsprechenden Webseite bekannt, von der aus Sie die Entwicklertools aufgerufen haben. Drücken Sie dieNVDA-Taste+T, um den Titel und die URL der Webseite jederzeit zu überprüfen.

Das „Axe Tool“-Fenster ist zur einfachen Navigation mit Orientierungshilfen (Banner, globale Navigation, Themennavigation und Hauptinhalt), Überschriften und Listen versehen. Gleich zu Beginn im Bannerbereich verkündet NVDA „A“Grafik zum xe Developer Tool.

Der erste Tab-Stopp vom oberen Rand des „Axe“-Werkzeugfensters ist die eingeklappte Menüschaltfläche „Axe-Versionsinformationen“. Klappen Sie diese auf und sehen Sie sich den Inhalt an. Drücken Sie die Escape-Taste, um sie wieder einzuklappen. Die Versionsinformationen sind auch im Add-on-Manager des Firefox-Browsers verfügbar, auf den oben unter Überprüfung der Axe-Installation wenn bei der Auswahl Weitere Informationen.

Dann kommt der entscheidende Analysieren Schaltfläche. Durch Aktivieren der Analysieren Über diese Schaltfläche wird die Barrierefreiheitsprüfung der Seite gestartet. Bei umfangreicheren Seiten dauert die Analyse etwas länger. Bitte haben Sie etwas Geduld. Wenn Sie mit der Pfeiltaste nach unten navigieren, während die Analyse noch läuft, wird Folgendes angezeigt bzw. angesagt: Wird analysiert … bitte warten.

NVDA zeigt nach Abschluss der Analyse eine Menüschaltfläche an, die im ausgeblendeten Zustand die Gesamtzahl der Barrierefreiheitsverstöße enthält, z. B.: Festgestellte Verstöße: 17. Presse Pfeil nach unten oder TAB um weitere Anzeigeoptionen zu erweitern, darunter Alle Ausgaben, Punkte, die einer Überprüfung bedürfen, und Probleme, deren Lösung zu bewährten Verfahren führt unter dem Gesichtspunkt der Barrierefreiheit.

Das nächste Element ist ein Noch einmal ausführen Schaltfläche. Verwenden Sie diese Schaltfläche, um die Analyse erneut auszuführen, wenn Sie zum Browserfenster wechseln und den Zustand der Seite ändern (z. B. einen anderen Reiter auswählen oder Eingabefehler in einem Formular erzeugen) oder eine andere Webseite laden. Klicken Sie anschließend auf Alt+Tab um zum Fenster der Firefox-Entwicklertools zurückzukehren und die Noch einmal laufen Schaltfläche in Axe.

Wenn die Analyse keine Fehler feststellt, wird der Hauptinhalt von Axe angezeigt:

Herzlichen Glückwunsch! Im aktuellen Zustand der Seite wurden keine Verstöße gegen die Barrierefreiheit festgestellt. Nun sollten Sie Axe für jeden Zustand der Seite erneut ausführen (einschließlich des Ausklappens von Akkordeons, Modalen, Untermenüs, Fehlermeldungen und mehr). Außerdem sollten Sie manuelle Tests mit assistiven Technologien wie NVDA, VoiceOver und JAWS durchführen.

Überprüfung der Analyseergebnisse und der detailspezifischen Informationen

Verstöße nach Art auflisten

Gleich hinter dem Noch einmal laufen „link“ ist eine Liste von Links unter dem Themen Eine Überschrift der Ebene 2, die für jede auf der Seite festgestellte Art von Barrierefreiheitsverletzung einen Listenpunkt enthält. Jeder Listenpunkt enthält zudem die Gesamtzahl der Probleme unter einer Überschrift der Ebene 2.

Beispielinhalt:

• Schaltflächen müssen einen gut lesbaren Text aufweisen 5 – aktuelles Element
• Elemente müssen einen ausreichenden Farbkontrast aufweisen 5
• Bilder müssen mit Alternativtext versehen sein 3
• Formularelemente müssen mit Beschriftungen versehen sein 4

Spezifische Details zum Thema im Haupttext angeben

Auf diesen Navigationsabschnitt folgt der Hauptinhalt mit einer Überschrift der Ebene 1 Analysieren.

Der derzeit aus der Liste ausgewählte Verstoßtyp, z. B. Schaltflächen müssen einen gut lesbaren Text aufweisen wird als Überschrift der ersten Ebene 2 markiert. Eine Reihe von Schaltflächen – Zurück, Weiter, und Zuletzt werden zur Navigation durch die Liste der Fälle angezeigt, die dem aktuell ausgewählten Verstoßtyp entsprechen.

Die Zurück und Erstens Schaltflächen sind deaktiviert (werden als nicht verfügbar angezeigt), wenn der Fokus auf der ersten Ausgabe liegt. Ebenso gilt dies für die Weiter und Zuletzt Die Schaltflächen sind deaktiviert, wenn Sie den Fokus auf die letzte Ausgabe verlagern.

Zu jeder Ausgabe gibt es zwei Links:

Knoten prüfen

Die Knoten prüfen Der Link verschiebt den Fokus vom aktuellen Element auf das Element in der Entwickler-Tools-Inspektor.

Hervorhebung

Die Hervorhebung Der Link aktiviert den visuellen Hervorhebungsmodus für das Element der aktuellen Ausgabe im gesamten Browserfenster. Wenn der Hervorhebungsmodus aktiviert ist, ändert sich der Text des Links zu Hervorhebung beenden. Auswählen Hervorhebung beenden um die visuelle Hervorhebung zu deaktivieren. Der Text des Links ändert sich wieder zu Hervorhebung wenn die visuelle Hervorhebung deaktiviert ist.

Einzelheiten zum jeweiligen Themenschwerpunkt; z. B. „Punkt 2 von 5. Schaltflächen müssen einen gut lesbaren Text aufweisen.“ werden unter den folgenden Überschriften der Ebene 2 dargestellt:

• Problembeschreibung: Enthält ein Mehr erfahren Link zu einer ausführlichen Erläuterung des Verstoßes auf der Website „ Deque University“.
• Elementposition: Zeigt den Element-Selektor oder den XPath des aktuell ausgewählten Problems an, um das jeweilige Element auf der Seite programmgesteuert zu identifizieren.
• Elementquelle: Enthält den Quellcode des fehlerhaften Elements.
• Um diesen Verstoß zu beheben, müssen Sieden Abschnitt „Auflistung verschiedener Optionen zur Beseitigung der Barriere“ beachten. Die für den jeweiligen Kontext am besten geeignete Lösung sollte umgesetzt werden.
• Problem-Tags: Verweisen auf die entsprechenden Erfolgskriterien der WCAG- und Section-508-Standards. Beispielsweise bezieht sich „WCAG412“ auf das Erfolgskriterium 4.1.2 der WCAG 2.0.

Hier endet die Darstellung der Analyseergebnisse. Ein Screenreader kann die Taste Umschalt+B Um zum Navigationsbereich zurückzukehren und mithilfe der Zurück und Weiter Schaltflächen. Drücken Sie Umschalt+L um zur Hauptliste der Verstöße zu gelangen, die unter dem Themen Überschrift.

Hinweis: DiesesHandbuch richtet sich an NVDA-Nutzer; die gleichen Tastaturbefehle funktionieren jedoch auch für Nutzer des Bildschirmleseprogramms JAWS.

Über Entwicklertools

Die Entwicklertools von Firefox fassen mehrere integrierte Firefox-Inspektionswerkzeuge zusammen. NVDA kündigt die Inspektionswerkzeuge an: „Inspector“-Fenster, „DOM“-Fenster, „Konsole“-Fenster, „Stil-Editor“-Fenster, „Debugger“-Fenster, „Barrierefreiheit“-Fenster und so weiter. Die Anzahl und Reihenfolge der Werkzeuge hängt davon ab, wie die Entwickler-Toolbox angepasst wurde. Drücken SieStrg+'['oder Strg+']', um den Fokus zwischen den verfügbaren Fenstern in den Entwicklertools zu wechseln.

Die Firefox-Entwicklertools sind standardmäßig am unteren Rand des Browserfensters angedockt. Zeigen Sie die Entwicklertools in einem separaten Fenster an, um sie für Screenreader-Nutzer besser zugänglich zu machen. Nutzer können dann mitder Tastenkombination Alt+Tab zwischen dem Browserfenster und dem Fenster der Entwicklertools wechseln. Bei Bedarf können Nutzer das Erscheinungsbild und den Inhalt der Symbolleiste der Entwicklertools weiter anpassen.

Einmalige Schritte zur Einrichtung von Optionen für Screenreader

1. Auswählen Extras >Webentwickler in der Hauptmenüleiste von Firefox. Hinweis: Weitere Möglichkeiten, die Firefox-Entwicklertools zu öffnen oder zu schließen, sind unter anderem das Drücken von F12 oder Strg+Umschalt+I. Verwenden Sie dieselben Tastenkombinationen, um die Entwicklertools zu schließen.
2. Presse Abwärtspfeil um zu … zu gelangen Inspektor in der Webentwickler Untermenü und drücken Sie Eingabe. Das Entwicklertools-Fenster wird geöffnet, und der Fokus von NVDA wechselt zum Entwicklertools-Fenster.
3. Drücken Siedie TAB-TasteoderUmschalt+TAB, um den NVDA-Fokus auf die Symbolleiste der Entwicklertools zu verschieben.
4. Mit dem Fokus auf der Symbolleiste „Entwicklertools“ drücken Sie wiederholtdie Rechtspfeiltaste, um zu einer Schaltfläche mit der Bezeichnung „Entwicklertools anpassen und Hilfe abrufen – ausgeblendetes Untermenü“ zu navigieren. Hinweis: WennSie unter Windows arbeiten, schließt die Schaltfläche direkt rechts neben der Schaltfläche „Entwicklertools anpassen“ das Fenster „Entwicklertools“. Beachten Sie, dass Sie mit denPfeiltastennach linksundnach rechts durch alle verfügbaren Bereiche innerhalb der Entwicklertools navigieren können. Die Axe-Erweiterung wird nach erfolgreicher Installation in die Symbolleiste der Entwicklertools aufgenommen.
5. Presse Leertaste um die Entwickler-Tool anpassen Untermenü, navigieren Sie zu und wählen Sie die Separates Fenster Option auswählen und drücken Eingabe damit die Entwicklertools in einem separaten Fenster angezeigt werden.

Deque ist Ihr bevorzugter Anbieter für Barrierefreiheit. Rufen Sie uns unter+1 703-225-0380oder+91 9000189666an odersenden Sie uns eine E-Mail. Kunden können sich an unserenSupport-Helpdesk wenden.