Share
Die Herausforderung, eine barrierefreie Website zu erstellen, oder eine vorhandene Website zugänglich zu machen, kann manchmal eine schwierige Aufgabe sein. Es kann umständlich sein, genau zu verstehen Wie Ein Benutzer mit Sehschwäche kann beispielsweise eine Website verwenden. Natürlich kann es für uns schwierig sein, mit der Erreichbarkeit unserer Websites zufrieden zu sein.
In diesem Beitrag zeige ich Ihnen, dass das Testen der Zugänglichkeit keine schwierige Aufgabe sein muss. Ich werde Sie durch die Tools und Prozesse führen, die wir bei Envato einsetzen, um unsere Plattformen für alle mit allen Könnensstufen nutzbar zu machen und sicherzustellen, dass die Zugänglichkeit bei der Bereitstellung neuer Funktionen im Vordergrund steht.
Dieser Artikel ist Teil von Web Accessibility: Der Complete Learning Guide, in dem wir eine Reihe von Tutorials, Artikeln, Kursen und E-Books zusammengestellt haben, um Ihnen das Verständnis der Web-Zugänglichkeit von Anfang an zu erleichtern.
Eines der wichtigsten Tools, das wir zur Beurteilung unserer Erreichbarkeit verwenden, ist Google Lighthouse. Lighthouse ist ein Tool, mit dem Sie beurteilen können, inwieweit eine Website den bewährten Methoden der Branche entspricht - ob Leistung, SEO oder in unserem Fall die Zugänglichkeit.
Lighthouse kann entweder über die Online-Schnittstelle oder über die Chrome-Entwicklerwerkzeuge ausgeführt werden. Ein wesentlicher Vorteil der Verwendung von Lighthouse besteht darin, dass wir genau wissen, worauf Google bei der Entscheidung, wie zugänglich ist, angewiesen ist Sie glauben Sie unserer Website zu sein.
So greifen Sie über die Chrome-Entwicklertools auf Lighthouse zu:
Lighthouse über Chrome-Entwicklertools ausführen.Einmal gestartet, erhalten wir eine Übersicht darüber, wo unsere Website verbessert werden könnte, um besser zugänglich zu sein. Die Ergebnisse der ThemeForest-Suchseite sehen beispielsweise folgendermaßen aus:
Leuchtturm-Ergebnisse für die ThemeForest-Suchseite.Lighthouse gibt uns eine Liste der Bereiche, in denen sich unsere Seite befindet nicht als zugänglich erachtet, sowie eine Liste von manuellen Prüfungen, die wir durchführen können, um sicherzustellen, dass die Zugänglichkeit die beste ist, die es sein kann. Wenn eine bestimmte Prüfung nicht sinnvoll ist, bietet Lighthouse Inline-Links an, um mehr darüber zu erfahren, was zu tun ist.
Aus dem obigen Bericht kann ich ersehen, dass wir unseren Farbkontrast verbessern sollten, um besser auf Personen mit eingeschränktem Sehvermögen eingehen zu können. Ich kann auch sehen, dass ich in der Lage sein sollte, die Seite auf eine Weise zu durchsuchen, die im Kontext sinnvoll ist, sowie verschiedene andere Überprüfungen.
Ein weiteres fantastisches Werkzeug, das wir bei Envato verwenden, ist pa11y (benannt nach der Abkürzung, die allgemein für die Barrierefreiheit angegeben wird, „a11y“. Mit Pa11y können Sie eine vordefinierte Spezifikationsebene für Barrierefreiheit festlegen - Abschnitt 508, WCAG 2.0 A, AA oder AAA - und eine Webseite testen, mit der Sie testen können diese Spezifikationen.
Wenn es läuft, gibt pa11y eine Liste der Spezifikationen für die Barrierefreiheit, die wir erfüllen, und die, die wir noch nicht erfüllen, sowie eine Empfehlung, wie die Einhaltung der Standards erreicht werden kann. Der Vorteil des Einsatzes von pa11y ist, dass wir absolut sicher sind, dass die WCAG-Spezifikationen eingehalten werden, und dass wir konkrete Schritte unternehmen, um die Compliance zu erreichen.
pa11y Ergebnisseite.Bei Envato führen wir pa11y automatisch aus, bevor jedes neue Code mit pa11y-ci auf unseren Plattformen bereitgestellt wird. Pa11y kann jedoch auch mit der Desktopanwendung Koa11y ausgeführt werden.
Koa11y-Schnittstelle.Ein Bereich, in dem Firefox-Entwicklertools herausragende Eigenschaften bieten, ist die Überprüfung des Zugriffs auf den Inhalt unserer Website. Auf diese Weise können wir uns ein Bild davon machen, wie ein Bildschirmleser einem Benutzer unsere Inhalte vorliest.
So aktivieren Sie den Accessibility-Inspector in Firefox:
Aktivieren des Bedienfelds "Eingabehilfen" in Firefox-Entwicklertools.Nach der Aktivierung steht uns eine Registerkarte für die Barrierefreiheit zur Verfügung. Auf diese Weise können wir unsere Website so sehen, wie ein Bildschirmleser sie laut vorlesen könnte.
Firefox-ZugänglichkeitsinspektorDas Arienrolle ist in diesem Fall entweder links aufgeführt Sektion, Verknüpfung oder Grafik. Nicht jedes Element sollte einen Namen haben, aber das Attribut ist eine gute Möglichkeit, einem Benutzer etwas anzuzeigen. Wir können einen Namen angeben, indem Sie sicherstellen, dass der Inhalt, das Bild, der Inhalt ist alt tag oder eine Aria-Label Attribut ist vorhanden. Wir können auch über die Rolle fahren und Firefox das entsprechende Element im Markup hervorheben.
Das Durchsuchen dieses Baums ist für sich allein nützlich, um zu verstehen, wie unsere Website aussieht, ohne uns vom Inhalt abzulenken. Dies ist auch eine hervorragende Möglichkeit, um zu verstehen, wie eine neue Funktion für unsere Benutzer aussehen kann.
Eine weitere nützliche Ebene von Überprüfungen, die wir beim Ausschreiben von Code verwenden, erfolgt über Code-Linting. Durch das Fusseln können wir automatisch auf Codeteile aufmerksam gemacht werden, die garantiert unzugänglich sind. Wir verwenden eine Teilmenge der Microsoft TypeScript-Linting-Regeln, um unser TypeScript zu fassen. Wir verwenden auch das Paket eslint-plugin-jsx-a11y, um unser JavaScript zu fetten.
Ein Linter könnte mich beispielsweise warnen, dass ich vergessen habe, eine alt Tag auf dem folgenden Bild:
Ein anderes Beispiel könnte eine Warnung für die Aufnahme eines Elements sein, das die Benutzer von Bildschirmlesegeräten ablenken könnte:
Linting bietet sofortige Rückmeldung, damit wir schnell Änderungen vornehmen können, um sicherzustellen, dass das Endprodukt so zugänglich wie möglich ist.
Wir verwenden eine Reihe von Browsererweiterungen, um ein besseres Gefühl dafür zu bekommen, wie ein Benutzer unsere Website bei der Erstellung sieht. Auf diese Weise können wir jederzeit Anpassungen vornehmen. Dies sind ein paar herausragende Erweiterungen, die wir als besonders hilfreich gekennzeichnet haben.
Mit Spectrum können Sie Ihre Website auf die gleiche Art und Weise anzeigen, wie dies bei verschiedenen Formen der Farbenblindheit der Fall ist. Hiermit können wir Teile unserer Website sehen, die möglicherweise einen schwachen Kontrast zum Hintergrund haben, oder Links, deren aktive Zustände ihren passiven Zuständen zu ähnlich sind.
ThemeForest-Startseite für jemanden mit Achromatopsie.Mit dunklem Hintergrund und hellem Text können Sie Ihre Website im kontrastreichen Modus anzeigen. Dieser Modus wird häufig von Benutzern verwendet, die ein hohes Maß an Barrierefreiheit benötigen. Damit können wir sehen, ob Teile unserer Website entweder zu unübersichtlich oder zu klein sind, um in diesem Modus effektiv gesehen zu werden.
ThemeForest-Homepage in umgekehrter Farbe.Dies ist nur für Mac-Benutzer verfügbar, aber es macht einen guten Weg, eine Site als Benutzer mit Sehbehinderung zu erleben. VoiceOver liest auf Befehl den ausgewählten Text vor. Es ist gewöhnungsbedürftig, aber wenn man es einmal gelernt hat, ist es einfach zu bedienen. Im Internet bietet VoiceOver die beste Unterstützung für Safari, kann jedoch mit dem gesamten Mac OSX-Betriebssystem verwendet werden.
Aktivieren Sie VoiceOver mit CMD + F5. Einmal aktiviert, können einige praktische Funktionen, die Sie einschalten können, gefunden werden:
Es ist absolut lohnenswert, sicherzustellen, dass Ihre Website zugänglich ist. Es wird oft als eine Aufgabe betrachtet, die entweder zu schwierig ist oder zu spät gelassen wurde. Keines davon ist wahr und sicherlich nicht das, was wir bei Envato gefunden haben. Die Verwendung von Techniken und Werkzeugen wie den oben beschriebenen erfordert viel Aufwand für die Erstellung einer barrierefreien Website. Dies gibt uns die Sicherheit, dass das Endprodukt freundlich ist alles unsere Benutzer.
Accentsconagua