10 Tools zur Verbesserung der Website-Zugänglichkeit
Es besteht kein Zweifel, dass Sie verstehen, dass Ihre Website für so viele Benutzer wie möglich zugänglich sein muss. Das Lesen aller Richtlinien und Standards kann jedoch etwas überwältigend sein. Die neuesten W3C-Empfehlungen finden Sie hier. Müssen Sie jedoch jedes Wort kennen und jede Richtlinie befolgen?
Heute werden wir versuchen, alles mit einigen Tools und Ressourcen ein wenig einfacher zu gestalten, um die Zugänglichkeit der Website zu verbessern (und vielleicht sogar einige Überprüfungen, die nicht auf Ihrem Radar stehen!).
Egal, ob Sie sicherstellen möchten, dass Sie genügend visuellen Kontrast haben, eine Website, auf die Bildschirmleser zugreifen können, oder sogar barrierefreie E-Mails erstellen möchten, wir haben alles für Sie!
1. Farbsicher
Mit Color Safe können Sie zugängliche Farbpaletten basierend auf den WCAG-Richtlinien auf Text- und Hintergrundfarbkontraste überprüfen (und sogar erstellen). Das Tool und die Standards verwenden eine verhältnisbasierte Formel, um Farbkombinationen zu bestimmen, die von allen gelesen werden können.
Die WCAG-Richtlinien empfehlen ein Kontrastverhältnis von 4, 5 für kleinen (Text-) Text und 3 für großen Text (alles über 24 Punkte).
Geben Sie einfach Ihre Farben ein - basierend auf dem HEX-Code - Schriftauswahl und -größe und erstellen Sie eine Palette. Sie erhalten ein sofortiges Verhältnis, mit dem Sie vergleichen können, und können andere ähnliche Farben sehen. Überprüfen Sie, ob etwas Ähnliches je nach Schriftart und Größe eine bessere Option ist.
2. NoCoffee
NoCoffee ist eine Google Chrome-Browsererweiterung, mit der Sie Ihr Design so visualisieren können, wie es jemand mit Sehbehinderung möglicherweise sieht. (Nichts unterstreicht die Bedeutung der Barrierefreiheit so sehr wie die Betrachtung auf diese Weise.)
Es kann Folgendes überprüfen und anzeigen:
- Geringe Schärfe mit kleinen Text- oder Klickzielen
- Probleme mit geringem Kontrast bei Text- und Hintergrundelementen
- Farbenblindheit
- Visueller Schnee, Blendung, Geisterbilder und Katarakte
- Nystagmus, bei dem es sich um eine schnelle unwillkürliche Bewegung der Augen handelt
- Verstopfte Gesichtsfelder
3. Kontrastprüfung
Mit der Kontrastprüfung können Sie Hintergrund- und Vordergrundfarben auf dem Bildschirm eingeben und mit einem sofortigen, farbcodierten Bestehen / Nichtbestehen sofort eine Überprüfung anhand mehrerer visueller Standards durchführen.
Zu den nützlichen Funktionen des Tools gehört die Möglichkeit, zwischen Farb- und Graustufenoptionen zu wechseln, Muster Ihrer Schecks auszutauschen und Farben aus Bildern zu ziehen. Sie können auch ein PDF-Beispiel speichern. Es ist ein einfaches Tool mit vielen Funktionen, die jeder schnell nutzen kann.
Außerdem wird das Farbverhältnis angegeben, wie in den WCAG-Richtlinien beschrieben.
4. Tota11y
Tota11y ist eine JavaScript-Datei, die eine winzige Schaltfläche in der unteren Ecke von Dokumenten platziert. Es wird um eine Symbolleiste erweitert, die mehrere Plugins für verschiedene Eingabehilfen enthält.
- Überschriften und Verstöße gegen die Überschriftenreihenfolge
- Kontrast (oder dessen Fehlen)
- Linktext, der fehlt oder verwirrend ist
- Beschriftungen, die in Eingaben fehlen
- Bilder ohne Alt-Text
- Etiketten sind ARIA-Wahrzeichen
- Bildschirmleser "Zauberstab", damit Sie die Site wie ein Bildschirmleser "lesen" können
5. WELLE
WAVE (Web Accessibility Evaluation Tool) ist eine zuverlässige Sammlung von Überprüfungen an einem Ort.
Das Tool verwendet eine visuelle Überlagerung von Symbolen, die sich auf Informationen in der Seitenleiste beziehen, um Details zu allem bereitzustellen, vom Farbkontrast über redundante Titel bis hin zu Links zu HTML und Strukturelementen.
Der kostenlose Checker bietet Ihnen fast alles, was Sie über eine einzelne Seite wissen müssen. WAVE enthält jedoch auch kostenpflichtige Tools auf Unternehmensebene für Eigentümer mehrerer Websites oder Benutzer, die jeweils nur eine Seite benötigen. Es enthält auch Chrome- und Firefox-Browsererweiterungen, mit denen Intranet-, kennwortgeschützte, dynamisch generierte oder vertrauliche Webseiten in einer privaten Umgebung überprüft werden können.
6. 508 Checker
Der 508 Checker testet URLs, um festzustellen, ob eine Website den Richtlinien für die Einhaltung der US-amerikanischen 508-Richtlinien entspricht, die gesetzlich für jede Organisation vorgeschrieben sind, die Bundesmittel erhält.
Während dieses Tool kostenlos ist, müssen Sie sich registrieren, um die vollständigen Ergebnisse des Scans anzuzeigen.
Die Website enthält auch andere Tools und Ressourcen, einschließlich eines Quiz, mit dem Organisationen herausfinden können, ob sie der 508-Konformität unterliegen, sowie spezifische Ressourcen für Hochschulbildung, gemeinnützige Organisationen und Regierungsstellen.
7. HTML_CodeSniffer
HTML_CodeSniffer ist ein clientseitiges Skript, das den Quellcode überprüft und nach Verstößen gegen definierte Standards sucht. Es überprüft sowohl die Richtlinien für die Barrierefreiheit von Webinhalten 2.0 als auch den US-Abschnitt 508.
Fügen Sie den Code zur Überprüfung direkt in die Website ein oder verwenden Sie das Lesezeichen.
Es ist einfach zu bedienen und Sie können auswählen, welche Art von Informationen angezeigt werden sollen - Fehler, Warnungen oder Hinweise - und einen Bericht anzeigen, in dem alle Bedenken aus der Prüfung aufgeführt sind.
8. Zugängliche E-Mail
Accessible Email ist ein Online-Checker und HTML-Editor, mit dem Sie den Code eines E-Mail-Newsletters verbessern können, bevor Sie ihn versenden. (Sie können auch vergangene / gesendete Kampagnen überprüfen.)
Bei so viel digitaler Kommunikation und Lead-Generierung aus E-Mails sollte dies nicht eines der vergessenen Website-Elemente in Bezug auf die Barrierefreiheit sein, ist es aber häufig. Die gleichen Regeln für die Barrierefreiheit im Web gelten auch für E-Mail-Sendungen.
Das Tool ist kostenlos und wurde entwickelt, um die Zugänglichkeit und Benutzerfreundlichkeit von E-Mail-Marketing zu fördern.
9. Amara
Amara ist ein Tool zum Erstellen von Untertiteln und Untertiteln für Videos.
Wenn Sie eine Möglichkeit bieten, eine Verbindung ohne Ton oder in einer anderen Sprache herzustellen, können Sie Ihre Designelemente für mehr Personen öffnen, insbesondere wenn Video ein Schlüsselelement des Designs ist.
Dieses Tool enthält kostenlose und Unternehmensoptionen, mit denen die Sprache auf einfache Weise in einem lesbaren Format auf dem Bildschirm angezeigt werden kann, das auf Websites und Video-Streaming-Plattformen wie YouTube funktioniert.
10. MobiReady
MobiReady bietet einen mobilen Barrierefreiheitstest in einem visuellen Format und mit einem Ergebnisbericht, damit Sie sehen können, wo Ihre Website auf den kleinsten Geräten möglicherweise zu kurz kommt.
Sie können Ihre Website mit der Alexa 1000 vergleichen, einem Ranking der besten Websites der Welt. Erhalten Sie detaillierte technische Ergebnisse mit Empfehlungen und sehen Sie die Renderings Ihrer Website auf verschiedenen Bildschirmen, einschließlich High-, Mid- und Low-Tier-Geräten.
Einer der besten Teile dieses Tests ist, dass er in Dutzenden von Bereichen bewertet wird und es Verbesserungsvorschläge für alle „Fehler“ gibt.
Fazit
Wenn es um die Barrierefreiheit von Websites geht, ist es wichtig, die Benutzerfreundlichkeit und Lesbarkeit für alle Arten von Benutzern zu berücksichtigen. Denken Sie an Farbe, Größe und Platzierung von Elementen, Beschriftungen und Untertiteln, geeignetem HTML und Struktur sowie an E-Mails, damit Sie möglichst vielen Menschen die bestmögliche Erfahrung bieten.
Es ist auch wichtig, nach regionalen oder nationalen Compliance-Regeln zu suchen, die für Ihre Projekte gelten könnten, wie z. B. die oben genannten 508-Compliance-Standards.
Und wenn es Zweifel gibt, ist es besser, auf der Seite der Zugänglichkeit zu irren. Es ist in Ordnung, eine Farbe aus einer Palette zu optimieren oder die Schriftgröße zu erhöhen, damit mehr Benutzer problemlos verstehen können, was auf dem Bildschirm angezeigt wird.
