Alle modernen Webbrowser verfügen über integrierte Entwicklertools, die für die Webentwicklung unverzichtbar sind. Wahrscheinlich haben Sie inzwischen auch schon von der Browser-Erweiterung „axe DevTools“ für Google Chrome, Microsoft Edge oder Mozilla Firefox gehört oder diese vielleicht sogar schon genutzt. Die Erweiterung „axe DevTools“ ist unglaublich nützlich, um Probleme bei der Barrierefreiheit zu finden und zu beheben, ohne dass man dafür ein erfahrener Experte auf diesem Gebiet sein muss.
Wenn Sie die integrierten Webentwickler-Tools mit den leistungsstarken Funktionen der axe DevTools-Erweiterung kombinieren, können Sie die Effizienz Ihrer Webentwicklung und -tests erheblich steigern. In diesem Beitrag werde ich mich vor allem auf Tipps für Google Chrome DevTools konzentrieren, aber denken Sie daran, dass die meisten dieser Tipps und Tricks auch auf andere Browser übertragbar sind.
Bevor wir beginnen, ist es wichtig zu wissen, wie man die Chrome-Entwicklertools öffnet. Es gibt sowohl Tastaturkürzel als auch Mausklick-Optionen, um das Entwicklerfenster zu öffnen. Meiner Meinung nach ist es am schnellsten, mit der rechten Maustaste an einer beliebigen Stelle auf der Website zu klicken, die Sie testen möchten, und dann im Menü „Untersuchen“ auszuwählen. Sobald die Entwicklertools geöffnet sind, können Sie zur Registerkarte „axe DevTools“ wechseln und loslegen. Weitere Details finden Sie in diesem Artikel.
Tipp Nr. 1 – Ändern Sie die Einstellungen der Browser-Erweiterung
Wenn Sie die Browser-Erweiterung „axe DevTools“ zum ersten Mal installieren, verfügt sie noch nicht über die erforderlichen Berechtigungen, um in einer Inkognito- oder privaten Browsersitzung ausgeführt zu werden. Außerdem fehlt ihr die Berechtigung, über eine Datei-URL ausgeführt zu werden. Diese Berechtigungen können Sie erteilen, indem Sie den Erweiterungsmanager (chrome://extensions/) aufrufen und dort für den Block „axe DevTools – Web Accessibility Testing“ auf die Schaltfläche „Details“ klicken. Auf der Detailseite können Sie die Optionen „In Inkognito-Modus zulassen“ und „Zugriff auf Datei-URLs zulassen“ aktivieren.
Wenn Sie nun ein HTML-Dokument öffnen, das nicht über einen Webserver bereitgestellt wird, können Sie die automatisierten und intelligent geführten Tests trotzdem ausführen! Dies ist auch im Inkognito-Modus möglich.
Tipp Nr. 2 – Geräte emulieren
In meinem letzten Artikel habe ich erläutert, wie man mit den DevTools von Chrome Geräte emulieren kann, um responsive Seiten oder Layouts zu testen. Seitdem hat sich nicht viel geändert, aber es ist erwähnenswert, dass man die Viewport-Größen für eine Vielzahl beliebter Geräte wie iPhone X, iPad Pro, Galaxy S5 usw. emulieren kann. Es gibt eine Schaltfläche, mit der man die Ausrichtung von Hochformat auf Querformat umschalten oder die Netzwerkgeschwindigkeit drosseln kann. Ein zusätzlicher Profi-Tipp: Öffnen Sie das 3-Punkt-Menü, um noch mehr Optionen und Funktionen zu erhalten.
Tipp Nr. 3 – Element-Inspektor
Dies ist ein weitreichendes Thema, da der Element-Inspector so viele wichtige Funktionen bietet.
3.1 Als HTML bearbeiten
Wussten Sie, dass sich das Frontend-Markup ändern lässt? Das ist ganz einfach und bietet Ihnen die Möglichkeit, Ihre Änderungen zu testen, bevor Sie mit der Implementierung im Quellcode beginnen. Wenn axe DevTools ein Problem feststellt, nutzen Sie den Link zum Element-Inspektor, um zur Quellcodeansicht des Elements zu gelangen.
Anschließend können Sie die bereitgestellten Lösungsvorschläge nutzen, um Ihren Markup-Code anzupassen und die Korrektur zu testen.
3.2 Stil-Editor
CSS zu lernen kann anfangs mühsam sein. Der CSS-Editor macht das Verständnis deutlich einfacher. Nutzen Sie den Bereich „Stile“ im Element-Inspektor, um Eigenschaften in Echtzeit zu ändern und neue festzulegen! Es gibt weitere hilfreiche Tools wie Widgets für „box-shadow“, „flex“ und „color“, die Ihnen bei der Auswahl der Werte für Ihr Design helfen. Dies ist auch nützlich, wenn Sie Probleme mit der Barrierefreiheit beheben müssen, die Anpassungen am Stil erfordern.
3.3 Elemente ausblenden oder löschen
Ich habe oft festgestellt, dass das Testen eines einzelnen Elements oder einer Komponente einer Seite hilfreich ist, um die Ergebnisse einzugrenzen. Es gibt jedoch Fälle, in denen ich die gesamte Seite mit Ausnahme einer bestimmten Komponente testen muss. Dies lässt sich mithilfe der Aktionen „Element ausblenden“ oder „Element löschen“ erreichen. Um diese Aktionen zu nutzen, navigieren Sie zum Element-Inspector und suchen Sie das Element, das Sie entfernen möchten. Öffnen Sie das Kontextmenü per Rechtsklick und wählen Sie die Optionen „Element ausblenden“ oder „Element löschen“. Nun können Sie die axe DevTools-Tests ausführen, und es werden keine Testergebnisse für die entfernten Elemente angezeigt.
. 
Zustand der Kraft
Ähnlich wie bei „Elemente ausblenden“ oder „Elemente löschen“ können Sie für ein bestimmtes Element einen Zustand erzwingen. Öffnen Sie erneut das Kontextmenü und suchen Sie nach der Optionsliste „Zustand erzwingen“. Dies kann für eine Reihe praktischer Zwecke genutzt werden, doch einer der häufigsten Anwendungsfälle ist das Testen des aktiven Zustands, des Fokuszustands oder des Hover-Zustands von Schaltflächen- oder Link-Elementen. Es ist wichtig, den Farbkontrast dieser Zustände zu berücksichtigen, um eine barrierefreie Benutzererfahrung zu gewährleisten. Sie können diese Funktion auch nutzen, um Tooltips oder andere Elemente einzublenden, die möglicherweise nur in diesen Zuständen angezeigt werden.
Unten sehen Sie einen Screenshot des Google Chrome-Stilinspektors mit Kontrollkästchen, mit denen Sie den Status des „Force“-Elements zwischen „aktiv“, „Hover“, „Fokus“, „besucht“, „Fokus-innerhalb“ und „Fokus-sichtbar“ umschalten können.
Fazit
Die Browser-Erweiterung „axe DevTools“ ist zwar leistungsstark, doch wenn Sie über grundlegende Kenntnisse zur Verwendung der integrierten Entwicklertools Ihres Browsers verfügen, können Sie Ihre Tests noch effektiver gestalten. Tun Sie sich selbst einen Gefallen und machen Sie sich mit diesen Tools und Funktionen der Entwicklertools Ihrer bevorzugten Browser vertraut – sie werden Ihre Produktivität exponentiell steigern, Ihnen das Leben erheblich erleichtern und gleichzeitig dazu beitragen, Ihren Nutzern eine barrierefreie Erfahrung zu bieten.
