Accessibility: Das Was, Warum, und Wie

Der Barrierefreiheit im Internet wird in letzter Zeit glücklicherweise immer mehr Aufmerksamkeit geschenkt. Aber viele Menschen wissen immer noch nicht, was Barrierefreiheit im Web eigentlich ist und warum sie so wichtig ist.

Verschaffen wir uns einen Überblick über Barrierefreiheit, indem ich euch dieses Thema im Zusammenhang mit dem Was, Warum und Wie vorstelle: was Barrierefreiheit ist, warum sie wichtig ist und wie wir barrierefreies Design erreichen können.

Was ist Barrierefreiheit

Laut Wikipedia,

Barrierefreiheit im Internet bedeutet, dass es keine Barrieren gibt, die die Interaktion mit oder den Zugang zu Websites im World Wide Web für Menschen mit körperlichen Behinderungen, situationsbedingten Behinderungen und sozioökonomischen Einschränkungen betreffend Bandbreite und Geschwindigkeit verhindern. Wenn Websites richtig konzipiert, entwickelt und bearbeitet werden, haben mehr Nutzer gleichen Zugang zu Informationen und Funktionen. (übersetzt von Julia)

Es gibt alle Arten von Behinderungen, einige sind erkennbar, wie Menschen, die im Rollstuhl sitzen, und andere sind versteckt, wie Menschen, die gehörlos sind. Es gibt auch altersbedingte Behinderungen wie Schwerhörigkeit oder Sehschwäche und vorübergehende Behinderungen wie einen gebrochenen Arm oder sogar das Halten eines Babys.

Vielleicht hast du schon einmal den Hashtag #a11y gesehen, der die Kurzversion des englischen Wortes Accessibility (dt. Barrierefreiheit) ist. Der Grund für diese Verkürzung ist, dass zwischen dem Buchstaben „a“ und dem Buchstaben „y“ 11 Zeichen stehen. Meiner Meinung nach ist dies eine coole Art, ein Wort zu kürzen und viel einfacher als Hashtag zu verwenden.

Warum ist es wichtig

Die Macht des Internets liegt in seiner Universalität. Der Zugang für alle, unabhängig von einer Behinderung, ist ein wesentlicher Aspekt. [übersetzt von Julia]

Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Warum sollten wir also Webseiten zugänglich machen? In erster Linie ist es einfach das Richtige, um allen den gleichen Zugang zu Informationen zu ermöglichen. Außerdem bist du vielleicht [gesetzlich] verpflichtet (https://www.w3.org/WAI/policies/ 'Web Accessibility Laws & Policies'), deine Webseite zugänglich zu machen. Hier in Österreich ist der öffentliche Sektor, wie z.B. Universitäten, gezwungen, ihre Webseiten gemäß WCAG 2.1 AA (Web Content Accessibility Guidelines) zu 100% zugänglich zu machen.

Zwischen 10% und 20% der Menschheit hat irgendeine Art von Behinderung. Nicht alle von ihnen beeinträchtigen die Fähigkeit einer Person, das Internet zu nutzen, wie z.B. eine Person mit Lähmungen in den Beinen. Die wichtigsten Behinderungen im Hinblick auf die Zugänglichkeit des Internets sind Behinderungen der Augen, der Ohren, der Hände und des Gehirns.

Menschen mit Behinderungen nutzen unterstützende Technologien (Assistive Technology, AT), um mit dem Internet zu interagieren. Um sicherzustellen, dass jeder das Web mit diesen Technologien nutzen kann, ist es unsere Aufgabe, Webseiten so zu erstellen, dass sie von diesen Geräten richtig erkannt werden. Bildschirmlesegeräte funktionieren beispielsweise nicht, wenn Code nicht unter Berücksichtigung der Barrierefreiheit geschrieben wurde.

Das Internet hat eine ganz neue Welt der Möglichkeiten eröffnet, insbesondere für Menschen mit Behinderungen, vor allem in Bezug auf das Sehen. Informationen sind jetzt zu fast jedem erdenklichen Thema leicht zugänglich.

Menschen mit Sehbehinderungen müssen sich nicht mehr auf andere verlassen, um die von ihnen benötigten Informationen zu erhalten, was bedeutet, dass sie ein neues Maß an Unabhängigkeit erreichen können, das noch vor wenigen Jahren undenkbar gewesen wäre.

Und schließlich wird deine Webseiten, wenn sie für Menschen mit Behinderungen zugänglicher gemacht werden, auch für alle zugänglicher. Das bedeutet, dass eine gute Strukturierung der Webseite (die meiner Meinung nach einen guten Frontend-Entwickler überhaupt erst ausmacht) durch die Verwendung semantischer HTML-Tags, ein besseres Design, z.B. mit höherem Farbkontrast, und eine bessere Zugänglichkeit für Menschen mit Behinderungen automatisch zu einer besseren Zugänglichkeit für alle führen wird.

Darüber hinaus verbessert sich auch die Suchmaschinenoptimierung (SEO).

Wir müssen alles für jeden einzelnen Menschen mit einer Behinderung zugänglich machen [übersetzt von Julia]

Stevie Wonder, Grammy Awards Ceremony 2016. Amerikanischer Singer-Songwriter, Musiker, and Producer

Wie man barrierefrei entwickelt

Hier möchte ich einen groben Überblick darüber geben, wie du deine Website zugänglich machen kannst. In den kommenden Wochen werde ich Artikel mit ausführlicheren Informationen zu den einzelnen Kategorien schreiben.

Das W3C, ein weltweites Web-Konsortium, betreibt eine Arbeitsgruppe, die sich mit der Zugänglichkeit von Webseiten befasst und entsprechende Standards veröffentlicht. Diese Standards werden WCAG genannt, was für Web Content Accessibility Guidelines steht. Dies ist eine großartige Ressource, um weitere Informationen darüber zu erhalten, wie du Barrierefreiheit in deinen Projekten handhaben kannst.

Wie können wir das Web oder unsere Webseiten zugänglicher machen?

Gehen wir ein paar Punkte durch. Wenn du diese befolgst, wird deine Webseite nicht sofort zu 100 % zugänglich sein, aber es ist auf jeden Fall ein guter Ausgangspunkt.

Nutze semnatisches HTML wann immer möglich!

Wenn du <header>, <main>, <footer> verwendest, hast du bereits eine gute Grundstruktur deiner Website geschaffen, die es Nutzern von Screenreadern ermöglicht, sich auf deiner Website zurechtzufinden.

Die Liste von semantischen HTML tags (in Englisch) ist lang. Versuche, so viele wie möglich zu verwenden, und verwende <div> und <span> nur für Stylingzwecke, da sie nicht semantisch sind. Um bestehenden Code nicht zu zerstören, bieten aria (Accessible Rich Internet Applications) eine gute (vorübergehende) Lösung. Dann musst du deine bereits eingebauten <div>-Tags nicht durch semantische Tags ersetzen, die das Styling zerstören und somit zusätzliche Arbeit verursachen würden.

Die Aria-Rollen beispielsweise übernehmen einfach die Rolle des semantischen Tags wie im folgenden Beispiel. Interaktive Elemente wie Links und Buttons sowie Multimedia-Elemente wie Bilder und Videos erfordern eine ausführlichere Beschreibung (z. B. mit Alternativtext), damit sie von Screenreadern besser verstanden werden.

Verwende niemals Farbe allein, um bestimmte Informationen anzuzeigen, wie z. B. ein Ergebnis in einem Diagramm, und verwende einen ausreichenden Farbkontrast. Sehbehinderte Menschen können Schwierigkeiten haben, den Kontrast zwischen z. B. der Hintergrundfarbe und der Textfarbe zu erkennen.

Wie lassen sich a11y-Probleme erkennen und beheben?

Es gibt automatisierte Tools wie axe, die bereits etwa 30 % der Probleme finden. Der gebräuchlichste Screenreader, den du zur Überprüfung deiner Website verwenden kannst, ist NVDA in Kombination mit Microsoft und VoiceOver Screenreader, der bereits auf macOS vorinstalliert ist.

Andere erwähnenswerte Tools sind Wave, Taba11y und Color contrast Checker, auf die ich in anderen Artikeln noch näher eingehen werde.

Wenn du Webseiten zugänglich für Maus-, Tastatur-, Screenreader- und Braille-Benutzer machst, hast du den größten Teil der Zugänglichkeit abgedeckt. Daher sollte dies das Ziel von uns allen sein.

Fazit

Wenn wir uns alle an der Entwicklung barrierefreier Webseiten und Webanwendungen beteiligen und früh genug damit beginnen, können wir sie von Anfang an barrierefrei gestalten. Dadurch wird es für Unternehmen schwieriger, Barrierefreiheit aufgrund von Mythen und Missverständnissen wie „Barrierefreiheit bedeutet hässliches Design“ oder „ist sehr teuer“ zu vermeiden.

Zeige, dass du für inklusives Design stehst, indem du zumindest einen kleinen Beitrag dazu leistest, die Welt für Menschen mit Behinderungen zu verbessern.