Die heutige Weblandschaft hat sich seit ihren bescheidenen Anfängen stark weiterentwickelt. In den meisten Fällen greifen Nutzer über ein mobiles Gerät wie ein Tablet oder Smartphone auf Webinhalte zu. In diesem Artikel werden wir uns mit den Grundlagen der Nutzung automatisierter Barrierefreiheitstests für mobile Webauftritte befassen.
Zunächst sollten wir uns darüber im Klaren sein, was das mobile Web ist und welche Rolle die Barrierefreiheit dabei spielt. Wenn wir von „mobilem Web“ sprechen, meinen wir eine browserbasierte Website, auf die über ein tragbares, drahtloses Gerät zugegriffen wird – nicht native mobile Anwendungen. In den meisten Fällen findet die Nutzung des mobilen Webs auf einem Smartphone, Tablet oder vielleicht sogar einem tragbaren Spielgerät statt. Unabhängig von der Plattform sollte ein digitales Erlebnis den Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, kurz WCAG) entsprechen, um sicherzustellen, dass alle Zielgruppenmitglieder gleichermaßen erreicht werden.
Warum ist die Barrierefreiheit im mobilen Internet wichtig?
Wenn es Ihnen wie mir und Millionen anderer Menschen geht, werden Sie vielleicht feststellen, dass Sie den Großteil Ihrer Internetnutzung auf einem mobilen Gerät erledigen. Statistiken zeigen, dass mehr als 50 % des Web-Traffics von mobilen Geräten stammt. Interessant ist außerdem, dass 39 % der Smartphone-Nutzer eher dazu neigen, bei Anbietern zu stöbern oder Produkte zu kaufen, die ein hochwertiges mobiles Web-Erlebnis bieten.
Mobile Geräte werden so schnell nicht verschwinden, im Gegenteil: Sie scheinen immer beliebter zu werden und immer häufiger genutzt zu werden. Dies ist ein äußerst wichtiger Aspekt für Unternehmen, die ihre Zielgruppe effektiver erreichen möchten. Ein barrierefreies mobiles Web-Erlebnis stellt sicher, dass jeder, der ein mobiles Gerät (und gegebenenfalls assistive Technologien) nutzt, gleichberechtigten Zugang zu den Inhalten hat.
Automatisierung: ein wirkungsvoller und einfacher erster Schritt
Auf die Automatisierung im Bereich Barrierefreiheit entfallen rund 50 % der gemeldeten Fehler, in manchen Fällen sogar mehr. Um vollständige Konformität zu erreichen, sind zwar immer manuelle Tests erforderlich, doch die Automatisierung ist ein hervorragender Einstieg. Der einfachste Weg, diesen Weg einzuschlagen, ist die Verwendung der Browser-Erweiterung „axe“ für Chrome, Firefox oder Edge. Falls Sie diese noch nicht installiert haben, sollten Sie dies jetzt tun. Die Browser-Erweiterung „axe“ ist ein kostenloses und benutzerfreundliches Entwicklertool, das eine Webseite mit nur einem Klick auf eine Schaltfläche auf Barrierefreiheitsfehler analysiert.
GENUG GEREDET. LOS GEHT’S MIT DEM TEST!
Nachdem Sie axe installiert haben, führen Sie bitte die folgenden Schritte aus:
- Öffnen Sie die Website, die Sie testen möchten, bzw. navigieren Sie dorthin.
- Öffnen Sie die Entwicklertools und klicken Sie auf die Funktion „Geräteemulation umschalten“. Ihre Anwendung sollte nun in den Abmessungen eines Mobilgeräts angezeigt (bzw. an die Größe angepasst) werden.
- Öffnen Sie die Axe-Erweiterung in den Entwicklertools Ihres Browsers und führen Sie einen Scan durch.
Mit diesem Tool können Sie mit sehr geringem Aufwand automatisierte Barrierefreiheitstests auf Ihrer Website durchführen. Wenn axe Probleme feststellt, teilt es Ihnen mit, um welche Probleme es sich handelt, wo auf der Seite sie auftreten und wie Sie sie beheben können.
Profi-Tipp: Nutzen Sie Axe Beta, um Tests durchzuführen, die über das hinausgehen, was die Automatisierung allein leisten kann. Axe Pro verfügt über „Intelligent Guided Tests“ – eine assistentenbasierte bzw. halbautomatische Funktion, die die Abdeckung erhöht, indem sie die Tabulatorreihenfolge, Schaltflächen und Links, den Alt-Text von Bildern und vieles mehr überprüft, ohne dass Sie ein Experte für Barrierefreiheit sein müssen. In Kombination mit der Automatisierung erhöht „Intelligent Guided Tests“ die Abdeckung bei Barrierefreiheitstests auf 76–84 %.
Noch mehr Automatisierung: „ axe-core “ und „Puppeteer“!
Gehen wir einen Schritt weiter und probieren wir Open-Source-Tools aus, um den Automatisierungsprozess noch weiter voranzutreiben. Hier steht Ihnen eine Vielzahl von Tools zur Verfügung, aber in meinem Beispiel werde ich Puppeteer verwenden. Wir werden die axe-core Bibliothek nutzen, um die automatisierten Barrierefreiheitstests durchzuführen.
Im folgenden Beispiel habe ich die in Puppeteer integrierte Emulationsfunktion verwendet. Das ist einfach nur eine raffinierte Methode, um die Größe des zu testenden Browsers im Hochformat auf die Abmessungen eines Mobilgeräts anzupassen (ja, so einfach ist das tatsächlich).
const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setBypassCSP(true);
// Emulate a mobile device
await page.emulate(puppeteer.devices['Pixel 2']);
await page.goto('https://www.deque.com');
// Run the accessibility tests and gather the results
const results = await new AxePuppeteer(page).analyze();
console.log(results);
await page.close();
await browser.close();
})();
Sie können die Einstellungen ändern, um den Querformatmodus zu testen, oder vielleicht sogar mit ganz anderen Geräten testen.
Warum funktioniert das?
(siehe die nachstehenden Hinweise zu den Annahmen)
Moderne assistive Technologien interagieren mit dem vom DOM gerenderten HTML. Im mobilen Web unterscheidet sich die Interaktion zwischen mobilen assistiven Technologien und dem vom DOM gerenderten HTML nicht davon.
Aus Sicht der Automatisierung prüft „ axe-core “ die Gültigkeit Ihres DOM-gerenderten HTML-Codes und stellt so unter anderem Folgendes sicher:
- Formularelemente, Bilder und Schaltflächen verfügen über barrierefreien Text
- Gültige ARIA-Attribute und -Werte
- gültige Tabellenstrukturen
Es sind zwar noch weitere Schritte erforderlich, um ein hochwertiges und barrierefreies Erlebnis zu gewährleisten, doch der Einstieg in die Automatisierung ist ein einfacher und skalierbarer Weg, um ein inklusiveres mobiles Web-Erlebnis für Nutzer mit Behinderungen zu schaffen.
Profi-Tipps
- Achten Sie unbedingt auf Seiteninhalte, die sich auf User-Agents stützen. Das mag zwar altmodisch sein, kommt aber immer noch vor. Eine einfache Lösung besteht darin, sicherzustellen, dass Ihr Testcode einen User-Agent für mobile Geräte festlegt.
- Nutzen Sie zusätzlich zur End-to-End-Abdeckung auch Tests auf der Ebene der UI-Komponenten. Dadurch maximieren Sie die Abdeckung, die Sie erzielen können, und können die zahlreichen Varianten einer einzelnen Komponente oder einer zusammengesetzten Ansicht testen.
- Testen Sie Ihre Website mit verschiedenen Bildschirmformaten. Tablet im Hochformat, Tablet im Querformat, Smartphone im Hochformat, Smartphone im Querformat usw.
- Führen Sie manuelle Tests auf einem echten Gerät durch und nutzen Sie dabei die integrierten Hilfsmittel. Beispiel: Safari + VoiceOver unter iOS.
Wie geht es nun weiter?
Leider sind Ihre Inhalte für Menschen mit Behinderungen noch nicht vollständig barrierefrei. Automatisierung allein reicht nicht aus, um eine vollständige Abdeckung zu gewährleisten – es sind weiterhin manuelle Tests und Validierungen erforderlich. Die gute Nachricht ist, dass die Browser-Erweiterung „axe“ über die notwendigen Tools verfügt, um diesen Prozess zu vereinfachen. Probieren Sie „axe Beta“ aus und nutzen Sie die Funktion „Intelligent Guided Testing“. Diese führt Sie durch acht verschiedene manuelle Tests und trägt dazu bei, eine höhere Abdeckung zu erreichen (zwischen 76 und 84 % in Kombination mit Automatisierung).
Das volle Potenzial entfalten
Deque bietet Unternehmen noch mehr Vorteile. Nutzen Sie die gesamte Bandbreite an Funktionen mit dem axe DevTools HTML-Testkit, das Ihnen Folgendes bietet: benutzerdefinierte Regeln, Sprach- und Framework-Integrationen, erweiterte Berichterstellung sowie Support für Unternehmen.
Hinweise
Diese Techniken setzen voraus, dass Ihre Website unter Verwendung moderner Funktionen des responsiven Webdesigns entwickelt wurde und nicht mit den (mittlerweile veralteten) Methoden, bei denen die User-Agent-Zeichenfolge überprüft und/oder auf dem Server unterschiedlicher HTML-Code generiert wird. Falls Sie diese Methoden verwenden, können Sie zwar einige der hier genannten Techniken weiterhin nutzen, müssen jedoch möglicherweise zusätzliche Maßnahmen ergreifen, damit sie konsistent funktionieren.
