Skip to main content

TU MEHR: Machen Sie Ihre Website für Menschen mit Behinderungen zugänglich - 2019

Things Mr. Welch is No Longer Allowed to do in a RPG #1-2450 Reading Compilation (Dezember 2019).

Indem Sie Ihre Website für Menschen mit Behinderungen zugänglich machen, machen Sie sie für jeden zugänglich. Wenn Sie Ihre Website leichter zugänglich machen, kann dies sogar dazu beitragen, dass Ihre Website in Suchmaschinen gefunden wird. Warum? Denn Suchmaschinen verwenden einige der gleichen Signale wie Bildschirmlesegeräte, um den Inhalt Ihrer Website zu finden und zu verstehen.

Aber wie stellen Sie eine barrierefreie Website her, ohne ein Programmierer zu werden?

Hier sind einige Tipps und Tricks, mit denen fast jeder, der über grundlegende HTML-Kenntnisse verfügt, die Barrierefreiheit seiner Website verbessern kann.

Webzugänglichkeitstools

W3C verfügt über eine fantastische Liste von Tools für die Barrierefreiheit im Web, mit denen Sie potenzielle Probleme mit Ihrer Website erkennen können. Trotzdem empfehle ich immer noch, etwas mit einem Screenreader zu erkunden und es selbst zu erleben.

Bildschirmleser verstehen

Eine der wichtigsten Möglichkeiten, wie Sie die Zugänglichkeit Ihrer Website verbessern können, besteht darin, sicherzustellen, dass sie für Bildschirmleser verständlich ist. Bildschirmleser verwenden eine synthetisierte Stimme, um den Text auf dem Bildschirm zu lesen. Das hört sich ziemlich einfach an; Bildschirmlesegeräte oder andere unterstützende Technologien verstehen Ihre Website jedoch möglicherweise nicht so, wie Sie sie gerade eingerichtet haben.

Als Erstes sollten Sie einen Screenreader ausprobieren und sehen, wie er läuft. Wenn Sie mit einem Mac arbeiten, versuchen Sie es mit VoiceOver.

  1. Gehe zu Systemeinstellungen.
  2. Wählen Zugänglichkeit.
  3. Wählen Voice-over.
  4. Aktivieren Sie das Kontrollkästchen für VoiceOver aktivieren.

Sie können es mit dem Befehl-F5 ein- und ausschalten.

Wenn Sie sich auf einem Windows-Computer befinden, möchten Sie möglicherweise NVDA herunterladen. Sie können es mit der Tastenkombination + Alt + N ein- und ausschalten.

Beide Screenreader funktionieren, indem der Benutzer über die Tastatur navigiert wird (dies ist sinnvoll - wenn Sie nicht sehen können, dass die Verwendung einer Maus eine Herausforderung darstellt) und indem Sie einen Fokusbereich für die Navigation erstellen. Der Fokus liegt im Wesentlichen auf dem Punkt, an dem die Tastatur "zeigt", aber sie wird normalerweise als hervorgehobenes Feld um das Fokusobjekt anstelle eines Cursors angezeigt.

Sie können sowohl die Stimmlage als auch die Geschwindigkeit ändern, mit der die Stimme liest, wenn die Standardeinstellungen störend sind (und nach etwa fünf Minuten, wenn Sie eine normale langsame Sprachanzeige hören, ist dies normalerweise der Fall). Blinde lesen Webseiten normalerweise, wenn ihre Bildschirmleser auf hohe Geschwindigkeiten eingestellt sind.

Es kann helfen, die Augen dabei zu schließen, aber es kann auch helfen, sie offen zu halten und zu vergleichen. Einige der Dinge, die Sie beim Anhören Ihrer Website möglicherweise sofort bemerken, sind, dass der Text möglicherweise nicht in Ordnung ist. Überschriften und Tabellen können durcheinander geraten. Bilder können entweder übersprungen werden oder "Bild" sagen oder etwas, das nicht hilfreich ist. Tabellen werden normalerweise als eine Reihe von Elementen ohne Kontext gelesen.

Sie können das hoffentlich beheben.

Alt-Tags oder alternatives Attribut

Das alt-tag oder alternative (alt) -Attribut wird in HTML verwendet, um ein Bild zu beschreiben. In HTML sieht das ungefähr so ​​aus:

Dies ist, wo Ihre Bildbeschreibung geht

Selbst wenn Sie Ihre Website mit einem visuellen Tool erstellen, das Ihren HTML-Code verbirgt, haben Sie fast immer die Möglichkeit, eine Bildbeschreibung einzugeben. Sie können nichts eingeben (alt = ""), aber es wäre wirklich besser, jedem Bild eine hilfreiche Beschreibung zu geben. Wenn Sie blind wären, was müssten Sie über das Bild wissen? "Frau" ist keine große Hilfe, aber vielleicht "Frau zeichnet Flussdiagramm für Entwurf, einschließlich Zugänglichkeit, Benutzerfreundlichkeit, Branding und Design."

Titeltext

Auf Websites wird nicht immer das HTML-Titel-Tag angezeigt. Dies ist jedoch für Bildschirmleser hilfreich. Stellen Sie sicher, dass jede Seite Ihrer Website einen beschreibenden (aber nicht zu ausführlichen) Titel enthält, der den Besuchern mitteilt, worum es auf der Seite geht.

Geben Sie Ihrer Website eine gute Informationshierarchie

Brechen Sie große Textblöcke mit Kopfzeilen auf und verwenden Sie nach Möglichkeit Kopfzeilen mit der Hierarchie H1, H2, H3. Das macht Ihre Website für Bildschirmleser nicht nur einfacher, sondern auch für alle anderen. Es ist auch ein gutes Signal für Google und andere Suchmaschinen, damit sie Ihre Website besser indizieren können.

Ebenso sollten Sie sicherstellen, dass sich Ihre Website in einer logischen Reihenfolge befindet und dass keine Kästchen mit nicht zusammenhängenden Informationen angezeigt werden. Wenn Sie Anzeigen verwenden, achten Sie darauf, dass Ihre Anzeigen nicht übermäßig aufdringlich wirken und den Text auf Ihrer Website zu häufig aufbrechen.

Machen Sie bessere Tische

Wenn Sie HTML-Tabellen verwenden, können Sie Ihren Tabellen mit dem Tag Beschriftungen hinzufügen, um sie für Bildschirmlesegeräte leichter verständlich zu machen, anstatt den Titel einer Tabelle nur in Fettdruck zu erstellen. Sie können auch das "Gültigkeitsbereich" -Element hinzufügen und neue Zeilen und Spalten in Ihrer Tabelle eindeutig beschriften, sodass Bildschirmlesegeräte nicht einfach eine Reihe von Tabellenzellen abtasten, ohne einen Kontext anzugeben.

Tastaturnavigation

Im Allgemeinen sollte alles, was Sie auf Ihrer Website platzieren, etwas sein, das jemand nur mit einer Tastatur tun könnte. Das bedeutet, dass Ihre Navigationsschaltflächen keine animierten Dropdown-Schaltflächen sein sollten, wenn Sie sie nicht mit einem Bildschirmleser verwenden können (probieren Sie es aus und prüfen Sie, ob Sie sich nicht sicher sind - einige Schaltflächen sind für die Verwendung mit der Tastatur programmiert.)

Untertitel

Wenn Sie Ihrer Website Videos oder Audioelemente hinzufügen, sollten diese über Beschriftungen verfügen. HTML5 und viele Video-Streaming-Dienste (wie YouTube) bieten Unterstützung für Untertitel. Untertitel sind nicht nur für die Zugänglichkeit nützlich, sondern auch für Benutzer, die Ihre Website an einem Ort besuchen, an dem sie keine Audiodaten abspielen können, z. B. in einem Büro oder an einem lauten Ort.

Erwägen Sie bei Podcasts oder anderen Audioelementen die Bereitstellung eines Textprotokolls. Es ist nicht nur für Menschen nützlich, die das Audio nicht hören können. Durch den Text wird es für Google und andere Suchmaschinen einfacher, den Inhalt zu indizieren und Ihr Google-Ranking zu verbessern.

ARIE

Wenn Sie die erweiterte Barrierefreiheit erreichen möchten, möchten die Spezifikationen von HTML5 ARIA oder WAI-ARIA der neue Standard sein. Dies ist jedoch ein komplexes (und weiterentwickeltes) technisches Handbuch. Sie können also einen ARIA-Validator zum Scannen verwenden, um zu prüfen, ob auf Ihrer Website Probleme auftreten. Mozilla bietet auch einen ansprechbareren Leitfaden für den Einstieg in ARIA.