Designer-Handbuch zu den Grundlagen von Web Accessibility Design

Das Web sollte ein Ort sein, an dem jeder von überall auf die gleichen Inhalte zugreifen kann. Responsive Techniken haben einen langen Weg zurückgelegt geräteunabhängige Designs. Aber was ist mit Zugänglichkeitsunabhängige Designs?

Die Zugänglichkeit von Web-Diensten gibt es schon seit Jahren, aber ihre Implementierung erfordert neue Fortschritte in der Technologie- und Web-Entwicklung. Viele Entwickler möchten helfen, aber es ist schwer zu verstehen, wie man Barrierefreiheit gestaltet, weil es so viele bewegliche Teile gibt. Dazu gehören kontrastreicher Text, Audioseiten für Blinde, optimierte Medien und Fallbacks für Nicht-JS / CSS-Browser.

In diesem Beitrag werde ich die Grundlagen des Entwurfs von Barrierefreiheit erläutern, was es ist, was es zu lösen gilt und Schritte, die Sie ergreifen können, um zu beginnen. Beachten Sie, dass dies ein unglaublich detailliertes Thema ist, und es wird Monate oder Jahre der Übung dauern, um es vollständig zu verstehen. Die Vorteile sind jedoch die Mühe wert und alle Ihre Webprojekte werden jedem Besucher einen bleibenden Eindruck von barrierefreiem Inhalt vermitteln.

Einführung in die Zugänglichkeit

Barrierefreiheit ist im Allgemeinen die Idee, Inhalte so zu erstellen es kann von jedermann konsumiert werden. Dies kann blinde Menschen einschließen, die nicht lesen können, und es können Menschen mit körperlichen Behinderungen sein, die keine Maus oder Tastatur bedienen können (oder eine der beiden)..

Es kann aber auch Personen mit einschließen leichte Mängel in der Vision. Es könnte Leute mit einschließen Legasthenie oder Fragen zum Leseverständnis. In der Tat die Idee von “Webzugänglichkeit” beinhaltet jede mögliche Beeinträchtigung, die sich darauf auswirken kann, wie jemand mit einer Website interagiert oder diese konsumiert.

Wichtiger ist vielleicht, was Web-Barrierefreiheit bieten kann, wie hier in einer Wikipedia-Definition beschrieben:

Anne Gibson argumentiert jedoch in ihrem Post-Listen-Beitrag, dass die Definition von Wikipedia zu vage ist und nicht gerade über Menschen mit Behinderungen. Es geht wirklich darum jeder im Internet aus aller Welt das hat möglicherweise keinen optimalen Zugang zum Internet.

Viele Entwickler glauben, dass die Zugänglichkeit nur für Blinde gedacht ist, die nicht lesen können. Es gibt jedoch vier Hauptkategorien der Webzugänglichkeit:

1. Visuell - Sehschwäche oder schlechte / keine Sicht
2. Auditory - hörgeschädigt oder taub
3. Kognitiv - Schwierigkeiten beim Verstehen oder Konsumieren von Informationen
4. Motor - Probleme mit der physischen Zugänglichkeit, die möglicherweise spezielle Eingabegeräte wie Tastaturen oder Sprachbefehlsprogramme erfordern

Diese Kategorien haben jeweils umfangreiche Techniken, die sind ebenso schnell wie Webstandards. Es gibt jedoch ein Gefühl der Stabilität, wenn diese Standards in die WCAG (Web Content Accessibility Guidelines) aufgenommen werden..

Einige Websites wie Regierungsinstitutionen sind gesetzlich verpflichtet, diese Richtlinien zu befolgen. Sie gelten international über das W3C.

Werfen wir einen Blick auf die Bürokratie hinter der Barrierefreiheit von Web und schauen wir uns dann einige anwendbare Design-Tipps an.

Das W3C & barrierefreies Design

Es gibt einige Akronyme im Zusammenhang mit der Barrierefreiheit. Diese können kompliziert sein, wenn Sie das Thema noch nicht kennen, aber ich hoffe, sie werden nach Vereinfachung sinnvoller.

• W3C (World Wide Web Konsortium) - Eine internationale Gruppe, die Webstandards für Protokolle, Sprachen und Vorschriften definiert. Alle offiziellen Richtlinien zur Barrierefreiheit fallen unter diese Organisation.
• WAI (Web Accessibility Initiative) - Ein offizielles Programm, das alles über Barrierefreiheit abdeckt. Dieser Oberbegriff enthält alle Regeln, Richtlinien und Techniken für moderne Zugänglichkeit.
• WCAG (Richtlinien für barrierefreie Webinhalte) - Eine Gruppe von Standards und Regeln, die Designern dabei helfen, ihre Websites anhand der Zugänglichkeitsebene zu bewerten.
• ARIE (Zugängliche Rich-Internet-Anwendungen) - Ein spezieller Standard, der definiert, wie zugängliche Rich-Anwendungen erstellt werden können, die JavaScript / Ajax und ähnliche Technologien verwenden. Lesen Sie mehr dazu in diesem Beitrag von Anna Monus.

Andere Richtlinien bestehen unter dem Dach der WAI, einschließlich UAAG für Benutzeragenten und EINE MARKIERUNG für Web-Authoring-Tools. Für den Moment sollten Sie am meisten an den Vorschlägen der WAI und den Richtlinien des WAI-Regelsatzes unter dem Namen WCAG interessiert sein.

Eine großartige Ressource, um mehr darüber zu erfahren, ist dieser Beitrag des W3C zu Behinderungen, in dem Geschichten darüber veröffentlicht werden, wie Behinderte auf das Internet zugreifen. Es kann schwierig sein, all die komplizierten Probleme zu verstehen, ganz zu schweigen von deren Lösung. Aber Die beste Quelle stammt von Menschen, die täglich mit diesen Problemen konfrontiert sind.

Ein weiteres wichtiges Thema, das Sie verstehen sollten, ist die WCAG-Konformität. Dies bezieht sich auf die Zugänglichkeit einer Website eine Vielzahl von Faktoren abdecken. Die Stufen basieren auf der Konformität mit ein Bewertungssystem von A, AA und AAA. Sie können dies mit einem Web Accessibility Checker überprüfen. Das beste Ergebnis ist AAA.

Weitere Informationen zu diesen Richtlinien finden Sie im W3C-Artikel Einführung in das Verständnis der WCAG 2.0. Schauen Sie sich auch diese verwandten Links für weitere Details an:

• WCAG 2.0 vereinfacht
• § 508 WCAG Performance

Schritte zum barrierefreien Design

Ich empfehle den Besuch der A11Y-Projektwebsite für praktische Zugänglichkeitstipps. A11Y ist ein kostenloses Open Source-Projekt, das auf GitHub gehostet wird, Anbieten von Techniken für barrierefreies Webdesign.

Sie können die Checkliste der Eingabehilfen oder sogar eine Reihe von Entwurfsmustern nach Elementen wie Dropdowns, Registerkarten, Akkordeons, Schaltflächen und modalen Fenstern (unter anderem) durchsuchen..

Es ist schwierig, all das zu lernen und gleichzeitig umzusetzen. Gehen Sie Schritt für Schritt vor und seien Sie bereit, mehr zu recherchieren, wenn Sie verwirrt werden.

Sehen Sie sich die Anleitungen und Tipps des A11Y für den Einstieg an. Sie werden auf bestimmte Vorschläge stoßen, wie beispielsweise Links zum Springen zu Inhalten und kontrastreiche Farbschemata. Diese Techniken verfügen jeweils über einen eigenen Detaillierungsgrad, sodass bei der Implementierung hauptsächlich getestet wird, um zu sehen, was funktioniert.

Betrachten Sie blinde Benutzer, die möglicherweise einen automatisierten Inhaltsleser verwenden. Sie können auch einen Audio-Übersetzer oder sogar eine spezielle Tastatur zum Navigieren im Web mit Tasten statt mit einer Maus haben. Deshalb richtiges semantisches HTML (Schauen Sie sich diesen Artikel an) ist so wichtig bei Eigenschaften wie tabindex und Zugangsschlüssel.

Wenn Sie eintauchen möchten, sollten Sie ein barrierefreies Thema in Betracht ziehen. Sie können die Architektur studieren und das Design an Ihr Projekt anpassen.

Tools für die Barrierefreiheit

Wenn Sie loslegen möchten, wählen Sie einfach einen Bereich aus, in dem Sie erreichbar sind, und probieren Sie es aus. Dann können Sie Test-Tools verwenden, um Ihren Erfolg zu messen.

Es ist erwähnenswert, dass dieser Prozess kann frustrierend sein. Es gibt so viel zu beachten, und die WCAG-Richtlinien sind so schwer zu verstehen, dass es zu Informationsüberflutungen kommen kann.

Das Wichtigste ist, einfach weiterzumachen. Wählen Sie einen Bereich der Barrierefreiheit aus und stellen Sie ihn in den Mittelpunkt. Verwenden Sie diese Tools, um Ihre Arbeit zu optimieren und zu optimieren.

Sie können beispielsweise versuchen, mit den Kontrastangaben der WCAG zu arbeiten Lesbarkeit verbessern. Sobald Sie Ihre Farben ausgewählt haben, können Sie mit diesem kostenlosen Kontrastprüfer prüfen, ob sie zusammenarbeiten.

Leider sind die WCAG 2.0-Richtlinien so verwirrend, dass Sie Schwierigkeiten haben, die Anforderungen zu verstehen. Aber je mehr Sie versuchen, desto mehr lernen Sie und desto mehr verstehen Sie.

Zum Testen einer Website, die bereits online ist, besuchen Sie WAVE. Es ist ein kostenlose visuelle Kontrolle Hier werden Fehler, Warnungen, Kontrastprobleme und andere Besonderheiten einer Website angezeigt. Sie erhalten eine visuelle Ansicht und eine Liste der Probleme in der Seitenleiste.

Es gibt eine weitere kostenlose App auf der Cynthia Says-Website, die das kann Überprüfen Sie die Websites auf WCAG-Erfolgsbewertungen von A, AA, AAA, und Abschnitt 508 zur Einhaltung der staatlichen Vorschriften.

Und wenn Sie sich für Open Source interessieren, schauen Sie sich diese an Kostenlose Tools zum Testen der Barrierefreiheit auf GitHub.

• HTML CodeSniffer
• Automatisiertes Tool zum Testen der Barrierefreiheit
• WCAG-Validator

Browser-Add-Ons

Browser-Add-Ons bieten wahrscheinlich die schnellsten und einfachsten Methoden für den Zugriffstest. Sie können diese von jedem Computer auf jeder Website ausführen, um wirklich nützliche Ergebnisse zu erhalten.

AInspector for Firefox gilt als ein Muss für die Zugänglichkeit. Dies prüft alles und ist viel gründlicher als der WAVE-Tester.

Mozilla-Benutzer könnten auch den WCAG Contrast Checker mögen, der ebenfalls ein kostenloses Add-On ist.

Chrome-Benutzer verfügen nicht über den AInspector, jedoch über die offiziell von Google erstellten Accessibility Developer Tools. Dadurch werden im Inspektorfenster zusätzliche Tools zum Überprüfen der Richtlinien für die Barrierefreiheit hinzugefügt.

Benutzer von Chrome verfügen außerdem über Helligkeitsprüfungen für den Farbkontrast und einige andere kostenlose Erweiterungen.

Leider habe ich nicht viel für Safari-Benutzer gefunden, aber ich habe eine Erweiterung für Opera gefunden, die die Einhaltung der WCAG 2.0-Richtlinien überprüft. Wenn Sie bereit sind, Google hart genug zu durchsuchen, finden Sie möglicherweise weitere Tools.

Lesen Sie weiter

Wenn Sie die Webzugänglichkeit ernst nehmen möchten, sollten Sie auf einen langen Weg vorbereitet sein. Es ist nicht einfach, aber es ist sehr erfüllend.

Inzwischen sollten Sie mehr über die tatsächliche Definition der Webzugänglichkeit, über die Gründe für deren Verfügbarkeit und über kleinere Details darüber, was Entwickler zur Verbesserung ihrer Websites tun sollen, verstehen. Der nächste Schritt ist weitere Forschung und Praxis, um diese Prinzipien in Ihren Arbeitsablauf zu integrieren.

In den folgenden Beiträgen finden Sie weitere Informationen. Beachten Sie die WCAG-Richtlinien, wenn Sie Wissen direkt von der Quelle erhalten möchten.

• So verbessern Sie den Zugriff auf HTML-Tabellen mit Markup
• Barrierefreies Design für Benutzer mit Behinderungen
• 6 Tipps zur Verbesserung der Barrierefreiheit von Websites
• Stellen Sie sicher, dass Ihre Website für Sehbehinderte zugänglich ist