Advertisement
  1. Web Design
  2. General

6 Tipps zur Verbesserung der Website-Zugänglichkeit

Scroll to top
Read Time: 10 min

() translation by (you can also view the original English article)

Idealerweise muss die Barrierefreiheit als Teil jedes Webprojekts betrachtet werden, um die Verfügbarkeit für ein möglichst breites Publikum zu erhöhen. In der wirkklichen Welt kann es jedoch leicht übersehen werden. In diesem Artikel werden einfache Möglichkeiten beschrieben, wie Sie die Zugänglichkeit Ihrer Website verbessern können, ohne drastische oder zeitaufwändige Änderungen vornehmen zu müssen.


Einführung

"Leider wird die Leistungsfähigkeit und Anpassungsfähigkeit des Webs nicht immer voll ausgeschöpft."

Das World Wide Web ist eine unglaubliche Ressource und hat aufregende neue Möglichkeiten eröffnet. Viele weitere Menschen können jetzt über traditionelle Medien auf Informationen und Unterhaltung zugreifen, die ihnen bisher nicht zur Verfügung standen. Das World Wide Web ist besonders für Menschen mit Behinderungen von Bedeutung, da die große Menge an gespeicherten digitalen Informationen manipuliert werden kann, um unterschiedlichen Anforderungen gerecht zu werden. Leider wird die Leistungsfähigkeit und Anpassungsfähigkeit des Web nicht immer voll ausgeschöpft, und Menschen mit Behinderungen können Schwierigkeiten haben, auf Websites zu navigieren, und im Allgemeinen negative Erfahrungen mit dem Web machen.

Es gibt zahlreiche Gründe, warum Sie versuchen müssen, die Zugänglichkeit Ihrer Website zu verbessern. Einer davon ist, dass dies in vielen Ländern gesetzlich vorgeschrieben ist. In Großbritannien fällt die Barrierefreiheit im Internet beispielsweise unter das Disability Discrimination Act. Wenn Ihre Website nicht den Anforderungen entspricht, können rechtliche Schritte gegen Sie eingeleitet werden. Abgesehen von rechtlichen Fragen, warum sollten Sie Ihre Website nicht für ein möglichst breites Publikum öffnen, indem Sie sie für alle zugänglich machen?

Die Web Accessibility Initiative (WAI) wurde vom W3C ins Leben gerufen, um die Barrierefreiheit im Web zu fördern. Die WAI versucht, Menschen darüber aufzuklären, wie Menschen mit Behinderungen das Web nutzen, und hat Richtlinien für Webdesigner und -entwickler erstellt, die befolgt werden müssen. Sie werden feststellen, dass viele der Richtlinien leicht zu befolgen und umzusetzen sind. Im Folgenden werden einige einfache Methoden erläutert, mit denen Sie diese Richtlinien erfüllen und die Zugänglichkeit Ihrer Website verbessern können.


Tipp 01: Berücksichtigen Sie Ihre Farben

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Schätzungen zufolge leiden in den USA rund zehn Millionen Männer an irgendeiner Form von Farbenblindheit. Die häufigsten Arten sind Protanopie und Deuteranopie. und diejenigen, die darunter leiden, haben Schwierigkeiten, zwischen roten, grünen und ähnlichen Farben zu unterscheiden. Bei einer so hohen Prävalenz dieser Erkrankung lohnt es sich wirklich, beim Entwerfen und Codieren Ihrer Website zu berücksichtigen.

Zum größten Teil müssen keine radikalen Maßnahmen ergriffen werden, wenn mit Blick auf Farbenblindheit gestaltet wird - wie dies bei den meisten Vorschlägen in diesem Artikel der Fall ist. Eine gut gestaltete Website verursacht für farbenblinde Benutzer im Allgemeinen keine größeren Probleme. Bei der Gestaltung interaktiver oder Call-to-Action-Elemente sollte jedoch besonders berücksichtigt werden. Zum Beispiel; Bei einem einfachen Textlink im roten Stil ohne andere Dekoration ist möglicherweise nicht erkennbar, ob er sich in einem grauen oder schwarzen Textblock befindet. Niemand schlägt vor, dass Sie sich an das Standard-Link-Styling halten müssen, aber es ist hilfreich, mehr als eine Art von Dekoration zu verwenden, z. B. eine underline oder eine background-color.

Ein nützliches Tool für Designer finden Sie unter colorfilter.wickline.org, das verschiedene Filter bereitstellt, die nachahmen, wie verschiedene Arten von farbenblinden Benutzern eine Website wahrnehmen würden. Geben Sie einfach die URL einer Website ein und wählen Sie den Filter aus, den Sie verwenden möchten. Das Laden dauert jedoch einige Zeit, sodass Sie geduldig sein müssen.

Beachten Sie auch den Kontrast zwischen Vordergrund- und Hintergrundelementen Ihrer Website. Ein hohes Maß an Kontrast kommt allen zugute, nicht nur Sehbehinderten. Die Richtlinien für die Barrierefreiheit im Internet schlagen ein Mindestkontrastverhältnis von 4,5:1 und ein ideales Verhältnis von 7:1 für Textkörper mit Standardgröße vor. Die sicherste Option ist natürlich immer schwarzer Text auf weißem Hintergrund oder umgekehrt.

Sie können das Kontrastverhältnis mehrerer Elemente auf einer Site mit der Firefox-Erweiterung des Color Contrast Analyzer von Juicy Studio überprüfen. Es analysiert jedes Element auf der Seite und erstellt einen Bericht darüber, ob es den Richtlinien des WAI entspricht oder nicht.


Tipp 02: Kontextbezogene Links

Diejenigen, die Screenreader verwenden, haben häufig die Möglichkeit, auf einer Webseite zu navigieren, indem sie die Links überspringen, um etwas Interessantes zu finden. Bei Textlinks würde der Benutzer das Wort einfach isoliert hören, unabhängig vom Inhalt, der es umgibt. Es ist daher äußerst wenig hilfreich, wenn der Benutzer nur "hier klicken" oder "mehr" hört. Diese Arten von Links geben keine Auskunft darüber, wohin sie den Benutzer leiten oder worauf sie sich beziehen.

Eine viel bessere Option ist die Bereitstellung eines aussagekräftigeren Links. Ein Link, der den Benutzer zum vollständigen Artikel in einem Blog führt, könnte "Erfahren Sie mehr über S.E.O" oder "Klicken Sie hier, um den vollständigen Artikel über S.E.O zu erhalten" lauten.


Tipp 03: Alternativer Inhalt

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Eines der Grundprinzipien der Web Accessibility Initiative besteht darin, Inhalte im Web allen zugänglich zu machen, unabhängig von ihrer Behinderung. Es gibt eine Reihe von Techniken, wie die in diesem Artikel beschriebenen, die zur Erreichung des WAI-Ziels beitragen. Es wird jedoch immer einige Arten von Inhalten geben, die einigen Benutzern nicht zugänglich gemacht werden können, z. B. Audio für Gehörlose. In diesem Szenario sollten Sie nach Möglichkeit immer alternative Inhalte bereitstellen.

Richtlinie zur Barrierefreiheit von Webinhalten 1.1:

Stellen Sie Textalternativen für Nicht-Textinhalte bereit, damit diese in andere Formen geändert werden können, die von Menschen benötigt werden, z. B. Großdruck, Braille, Symbole oder eine einfachere Sprache.

Wenn Sie beispielsweise ein Video eines Interviews auf Ihrer Website haben, können Sie eine Abschrift der Konversation hinzufügen, die Benutzer auf der Website herunterladen oder lesen können. Eine andere Methode ist das Hinzufügen von Untertiteln zum Video - eine Methode, mit der YouTube mithilfe der Spracherkennungssoftware experimentiert.

Ein noch vollständigerer Ansatz besteht darin, einen Link zu einer Nur-Text-Version Ihrer Website bereitzustellen. Diese Methode macht Ihre Website auch für Personen mit langsamen Internetverbindungen viel zugänglicher, z. B. für Personen, die noch eine DFÜ-Verbindung verwenden oder nach einem mobilen Gerät suchen.


Tipp 04: Registerkartenindizes

Der Registerkartenindex legt im Wesentlichen die Reihenfolge der Elemente fest, die ein Benutzer bei Verwendung der Tabulatortaste durchlaufen wird. In den meisten Fällen müssen Sie sich darüber keine Gedanken machen, wenn ein Seitendesign einer logischen Reihenfolge folgt und mithilfe von Überschriften, Unterüberschriften usw. eine starke Hierarchie erstellt. Bei der Verwendung von Formularen ist diese Funktion jedoch wirklich wertvoll.

Formulare können viele kleine Elemente wie Kontrollkästchen und Optionsfelder enthalten, die präzise Bewegungen und Mausklicks erfordern können. Jemand mit einer motorischen Behinderung verfügt möglicherweise nicht über die erforderliche Kontrolle, um solch präzise Aktionen auszuführen. Wenn ein korrekter Registerkartenindex erstellt wurde, kann ein Benutzer durch einfaches Drücken der Tastatur durch jedes Formularelement blättern und mit ihm interagieren. Ein Registerkartenindex kommt auch denjenigen zugute, die keinen Zugriff auf eine Maus haben und sich beim Navigieren auf einer Website ausschließlich auf den Benutzer einer Tastatur verlassen.


Tipp 05: Richtige Verwendung des Attributs “ alt ”

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Wir alle kennen Alt-Text. Diesen Text müssen wir den Bildern hinzufügen, damit unsere Website validiert werden kann. Jeder benutzt sie richtig? Tatsächlich gibt es viele Websites, die dies nicht tun, und solche, die sie häufig falsch verwenden. Tatsächlich wird viel über die korrekte Verwendung des alt-Attributs diskutiert.

Das alt-Attribut dient drei Hauptzwecken:

  • Unterstützende Technologien wie Bildschirmleseprogramme verwenden Alternativtext und lesen ihn dem Benutzer vor.
  • Alternativtext wird anstelle des Bildes angezeigt, wenn Bilder von Personen mit langsamer Internetverbindung oder von Benutzern, die nur Text verwenden, deaktiviert wurden.
  • Suchmaschinen verwenden auch Alternativtext, um Informationen über die Seite zu speichern, da sie den Inhalt von Bildern nicht lesen können.

"Die Wahrheit ist, dass alternativer Text für Bilder von dem Kontext abhängt, in dem er platziert ist."

Im Wesentlichen ist Alternativtext das Textäquivalent eines Bildes oder einer anderen Medienquelle und wird verwendet, wenn aus verschiedenen Gründen nicht auf das Bild zugegriffen werden kann. Welche Informationen verwenden wir genau für das alt-Attribut? Einige Personen geben detaillierte Beschreibungen des Bildes ab, während andere es mit Schlüsselwörtern laden, um ihre Suchrankings zu verbessern. Die Wahrheit ist, dass alternativer Text für Bilder von dem Kontext abhängt, in dem er platziert ist.

Beispielsweise ist es üblich, dass ein relevantes Bild einen Blog-Beitrag begleitet, z. B. eine Schreibmaschine für einen Artikel über freiberufliches Schreiben. Der Artikel selbst bezieht sich nicht auf das Bild und ist daher ziemlich überflüssig. Einige Leute geben dem alt-Attribut möglicherweise den Wert "Schreibmaschine" oder "Bild einer Schreibmaschine" oder geben den Wert des Titels des Artikels an. Alle diese Methoden sind jedoch falsch. Mal sehen warum.

Zunächst müssen wir uns vorstellen, dass wir das Bild nicht sehen können. Wenn der Wert des alt-Attributs also "Schreibmaschine" wäre, würden wir den Titel des Blogposts sehen, das Wort "Schreibmaschine" allein und dann den Haupttext des Artikels - dies macht keinen Sinn, wenn es als Text betrachtet wird und es wäre Noch verwirrender, wenn Sie einen Bildschirmleser verwenden und zufällig eine Schreibmaschine hören.

In der Regel ist es am besten, wenn Sie bei der Angabe von Alt-Attributwerten keine Ausdrücke wie "ein Bild von" oder "ein Bild von" verwenden. Das alt-Attribut kommt nur denjenigen zugute, die das Bild aus verschiedenen Gründen nicht sehen können. Wenn Sie diesen Benutzern daher mitteilen, dass es ein Bild gibt, bietet dies keinen wirklichen Wert, außer die durch die obige Methode verursachte Verwirrung zu beseitigen.

Wenn Sie dem "alt"-Attribut den Wert des Titels des Blogposts geben, wird der Titel nur zweimal als Text angezeigt oder bei Verwendung von Bildschirmleseprogrammen zweimal wiederholt. Alternativtext sollte keine Informationen wiederholen, die bereits als Text bereitgestellt wurden. Dies ist einfach unnötig und möglicherweise verwirrend.

Die beste Option in diesem Szenario besteht darin, einfach einen leeren Alt-Attributwert anzugeben. Ein leerer Wert stellt sicher, dass keine möglicherweise verwirrenden oder irrelevanten Informationen übermittelt werden und das Verständnis des Artikels nicht beeinträchtigt wird, da das Bild hierfür nicht wesentlich ist. Einige mögen argumentieren, dass das Bild, da es rein ästhetisch ist, nicht inhaltlich ist und daher nicht in den HTML-Code gehört und mit CSS angezeigt werden sollte. Es gibt jedoch unterschiedliche Ansichten dazu.

Wie Sie sehen können, kann die Bereitstellung korrekter Alt-Attributwerte schwierig sein und hängt stark von der Situation ab. Der beste Rat ist, jedes Szenario einzeln zu bewerten und zu entscheiden, ob das Bild für das Verständnis und die Verwendung Ihres besten Urteils erforderlich ist.


Tipp 06: Zugriffstasten

Improving Web AccessibilityImproving Web AccessibilityImproving Web Accessibility

Wie Registerkartenindizes sind Zugriffstasten eine wertvolle Funktion für Benutzer, die beim Navigieren auf einer Website auf eine Tastatur angewiesen sind. Leider sind Zugriffsschlüssel eines der am wenigsten verwendeten HTML-Elemente, vor allem, weil viele Menschen sie nicht kennen und diejenigen, die sie nicht implementieren, obwohl sie extrem einfach sind.

Zugriffstasten sind im Grunde Tastaturkürzel, mit denen ein Tastaturbenutzer schnell zu bestimmten Abschnitten einer Website navigieren kann. Zugriffstasten können verwendet werden, indem Sie eine Funktionstaste gedrückt halten (normalerweise Alt unter Windows oder Strg auf Macs) und eine bestimmte Buchstaben- oder Zifferntaste drücken, die einem Abschnitt der Site entspricht.

Wie bereits erwähnt, sind Access Keys unglaublich einfach zu implementieren. Es handelt sich lediglich um einen einfachen HTML-Code, der den Navigationsanker-Tags Ihrer Website hinzugefügt wird -

1
<a href="index.html" accesskey="1">Home</a>

Einfach.

Ein Problem mit Zugriffsschlüsseln besteht darin, dass es keinen universellen Satz zugewiesener Schlüssel gibt, von dem Benutzer erwarten können, dass sie verwendet werden, und dass kein wirklicher Standard zur Information der Benutzer über die tatsächlich verwendeten Schlüssel dazu führt, dass Zugriffsschlüssel ziemlich ineffektiv sind.

Die britische Regierung hat jedoch eine Reihe von empfohlenen Zugangsschlüsseln zuzuweisen, die wie folgt lauten:

  • S - Navigation überspringen
  • 1 - Homepage
  • 2 - Nachrichten/Updates
  • 3 - Sitemap
  • 4 - Suche
  • 5 - Häufig gestellte Fragen (F.A.Q)
  • 6 - Hilfe
  • 7 - Beschwerdeverfahren
  • 8 - Allgemeine Geschäftsbedingungen
  • 9 - Feedback-Formular
  • 10 - Zugriff auf Schlüsselinformationen

Abschließendes Fazit

Wie Sie sehen können, sind viele der oben genannten Methoden sehr einfach zu implementieren und erfordern nur Grundkenntnisse in HTML. Die Zugänglichkeit Ihrer Website muss nicht zeitaufwändig sein, keine massiven Änderungen erfordern oder die Attraktivität einer Website beeinträchtigen.

Ich glaube, es ist wichtig, dass sowohl Designer als auch Entwickler über die Barrierefreiheit Bescheid wissen und diese in den verschiedenen Phasen der Erstellung einer Website berücksichtigen. Je früher im Entwurfsprozess die Zugänglichkeit berücksichtigt und berücksichtigt wird, desto einfacher ist es, diese Methoden zu integrieren und bessere Ergebnisse zu erzielen.

Es ist auch wichtig zu bedenken, dass die meisten der oben beschriebenen Methoden nicht nur Menschen mit Behinderungen helfen, sondern allen Benutzern Ihrer Website zugute kommen. Einige der Tipps können sogar Ihre Platzierungen bei Suchmaschinen verbessern.

Wir haben nur einige Tipps besprochen, die den Zugriff auf Ihre Website erleichtern. Wenn Sie sich jedoch wirklich engagieren, sollten Sie prüfen, wie Sie die vollständige Liste der Richtlinien für die Barrierefreiheit von Webinhalten einhalten können.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.