Ratgeber

Mit 4 einfachen Kniffen zu mehr Barrierefreiheit für die eigene Website

Seite 2 / 2

Überschriften und Gliederungselemente

Verwendet eine Überschrift erster Ordnung <h1> je Unterseite – und zwar nur eine. Nur auf der Startseite darf die <h1> das Logo oder den Namen der Seite enthalten. Auf allen anderen Seiten ist <h1> idealerweise der Seitentitel. „t3n | digital pioneers – das Magazin für digitales Business“ wäre auf unserer Startseite als <h1> super, auf allen weiteren aber nicht. Bei Blogposts sollte <h1> äquivalent zum Titel sein, bei Webarchiven dem Titel des Archivs entsprechen. Die anderen Überschriften – <h2> bis <h6> – solltet ihr nutzen, um den Content eurer Seiten zu gliedern, ähnlich wie ihr das in einem Textverarbeitungsprogramm machen würdet. Das heißt nicht unbedingt, dass alle Überschriftenelemente, die ihr verwendet, zwingend eine Überschrift sein müssen. Achtet darauf, keine Überschriften-Level zu überspringen. Überschriftenelemente sind nicht dazu gedacht, Schriftgrößen anzupassen, dafür gibt es die CSS-Eigenschaft font-size. <strong> oder <em>-Tags werden von Screenreadern nicht als Gliederungshinweise interpretiert, zur Kennzeichnung neuer thematischer Abschnitte sind sie deshalb nicht geeignet.

Seit HTML5 gibt die Gliederungselemente <section>, <nav>, <header> und <footer>, die zusätzliche Orientierung bieten. Wo weitere Hinweise mittels ARIA-Attributen (steht für Accessible Rich Internet Applications) gegebenenfalls angebracht sind, gehört zu den Fragen, die euch kein Testing-Tool beantworten wird. Schaut euch euer HTML-Markup an: Ansetzen könnt ihr überall da, wo sich semantische Strukturen aus der visuellen Repräsentation eurer Website ergeben, die euch ein Blick auf den Code aber nicht verrät. Dabei helfen zum Beispiel die Bookmarklets des Accessibility Developer Guide (ADG).

Formulare

Der ADG bietet eine Menge Vorschläge, wie ihr eure Formulare barrierefreier machen könnt, alle Tipps zu beherzigen, würde aber in den meisten Fällen viel Zeit kosten. Die folgenden zwei Punkte könnt ihr mit minimalem Aufwand befolgen:

  • Sowieso Best Practice: Fügt ein <required>-Attribut zu jedem zwingend auszufüllenden Feld hinzu, um das für den Screenreader erkennbar zu machen. Das dafür gängige Symbol * erkennen Screenreader nicht.
  • Verseht eure Formelemente mit Labels <label>, die ihre Funktion beschreiben.

Listen und interaktive Elemente

Listen können unordered (Bulletpoints), ordered (nummeriert) oder description lists (Begriffe mit Beschreibung) sein. Passt auf, dass ihr keine Listen – welcher Art auch immer – in eurem Code habt, die nur ein Kindelement haben. Ihr wärt auch verwirrt, wenn euch jemand eine Liste ankündigt und dann nur ein Item vorliest.

Im Sinne der Barrierefreiheit sollten interaktive Elemente nach Möglichkeit anchors, buttons und Formelemente sein, keine Container-Elemente mit einem Click-Handler.

Die Gesetzeslage

Durch das Gesetz zur Gleichstellung behinderter Menschen (BGG) sind Behörden der Bundesverwaltung verpflichtet, ihre Internetauftritte barrierefrei zu gestalten. Grundlage dafür ist die Barrierefreie Informationstechnik Verordnung (BITV), die auf den Web Content Accessibility Guidelines (WCAG) basiert. Die WCAG sind ein internationaler Standard zur barrierefreien Gestaltung von Internet-Angeboten. In der EU ist er für öffentliche Stellen ab dem 23. September 2019 für neue, ein Jahr später für bestehende, und ab 23. Juni 2021 auch für mobile Anwendungen verbindlich. Entsprechend optimierte Anwendungen und Websites sind auch für Menschen mit sensorischen, motorischen oder (in einem begrenzten Rahmen) mentalen Einschränkungen zugänglich.

In gewinnorientierten Unternehmen hat das Thema oft wenig Priorität, viele Entscheider sehen keinen wirtschaftlichen Mehrwert darin. Entwickler glauben oft, aus zeitlichen Gründen nicht die Möglichkeit zu haben, sich mit Accessibility zu befassen.

Fazit

Eigentlich erübrigen sich viele dieser Punkte oft von selbst, wenn man darauf achtet, sauberes HTML zu schreiben. In der Praxis – vor allem, wenn mit Frameworks wie Vue, React oder Angular gearbeitet wird – ist das dann aber leider nicht mehr ganz so selbstverständlich, weil oft einfach alles in zahllose Containerelemente verpackt wird. Ob eine Website barrierefrei gestaltet ist, entscheiden am Ende sowieso immer die Nutzer. Es ist auch klar, dass so gut wie nie Kapazitäten da sind, alle Dinge zu beachten, die die Nutzer assistiver Technologien bemängeln könnten. Vielleicht helfen unsere Tipps aber, deren User-Experience – und damit auch die aller anderen Nutzer – ein bisschen angenehmer zu machen. Das bringt noch weitere Vorteile: Barrierearme Websites haben oft ein besseres Ranking bei Suchmaschinen und fördern zwangsläufig eine Kultur des Clean Codes.

Weiterlesen könnt ihr im Accessibility Developer Guide oder den Web Content Accessibility Guidelines. Auch bei Medium.com oder A List Apart gibt es viele nützliche Beiträge zum Thema.

Mehr zum Thema:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung