­­A11Y ist eine Abkürzung für "Accessibility". Die Buchstaben „A“ und „Y“ umschließen 11 Buchstaben, daher die Zahl 11 in der Mitte. A11Y ist ein global gebräuchlicher Begriff, der für den Einsatz und die Entwicklung von Technologien steht, die für alle Benutzer zugänglich sind.

Die digitale Barrierefreiheit stellt sicher, dass Menschen mit unterschiedlichen Fähigkeiten das Internet gleichberechtigt nutzen können. Dies umfasst Menschen mit Seh- und Hörbehinderungen, motorischen Einschränkungen, kognitiven Behinderungen und weiteren individuellen Bedürfnissen.

Um ein Höchstmaß an Web-Acessibility zu erreichen ist eine interdisziplinäre Zusammenarbeit gefragt. Vom Wireframe, über das Design zum User-Testing und der Befragung bis hin zur Frontend-Webentwicklung und der Backend-Entwicklung, (semiautomatischen) Smoke-Tests und geschulten Redakteuren – alle müssen zwingend eingebunden sein, um Fehler und Verbesserungen schon in einer frühen Phase zu erkennen – oftmals ist aber genau das nicht der Fall!

Sprechen wir vom barriefreien Webdesign im Umfeld von TYPO3 ist es wichtig, dass sowohl der Frontend-Entwickler, als auch der TYPO3-Integrator und der Designer in der Lage sind, semantisch korrektes HTML5 & CSS zu schreiben und anzuwenden. Nur dann sind funktionierende, saubere TYPO3-Umsetzungen möglich.

Aspekte der Barrierefreiheit und Barrierearmut, die bereits im Designprozess relevant sind, sind folgende:

• Struktur und Navigation
• Farben und Kontraste (auch für funktionale Grafiken)
• Alpha-Transparenz (in Verbindung mit Text und wechselnden Hintergründen)
• Schriftgrößen (Schriftvergrößerung)
• Schriftarten und Schriftauszeichnung (Lesbarkeit)
• Pseudoklassen für die Tastatursteuerung: :hover, :focus, :active, :focus-within
• Bilder mit Bildunterschriften, Überschriften und umgebenden Text (und dessen Bedeutung für Alternativtexte)
• Reihenfolge der Inhalte (auf verschiedenen Endgeräten)
• (Übersprung-)Navigations-Mechanismen & Brotkrumenpfad
• Slider (Besonderheit zeitgesteuerter Inhalte)
• Formulare und Fehlermeldungen
• Pseudoklassen für Formularelemente: :enabled, :disabled und  :checked

1. Gesellschaftliche Verantwortung

Barrierefreiheit ist ein Menschenrecht. Es ist eine ethische Verpflichtung, sicherzustellen, dass Menschen mit Behinderungen gleichberechtigten Zugang zu Informationen und Dienstleistungen haben. Das Internet ist ein wesentlicher Bestandteil des täglichen Lebens, und der Ausschluss von Menschen mit Behinderungen von Online-Inhalten ist diskriminierend.
 

2. Gesetzliche Anforderungen

In vielen Ländern gibt es gesetzliche Vorschriften, die Barrierefreiheit im Web fordern. Zum Beispiel schreibt das Gesetz zur Gleichstellung behinderter Menschen (BGG) in Deutschland vor, dass öffentliche Einrichtungen ihre Webseiten barrierefrei gestalten müssen. Ab dem 28. Juni 2025 werden auch privatwirtschaftliche Unternehmen mit dem Barrierefreiheitsstärkungsgesetz in die Pflicht genommen.
 

3. Wirtschaftliche Vorteile

Barrierefreies Design kann die Reichweite einer Webseite erhöhen, indem es mehr Menschen die Nutzung ermöglicht. Dies kann die Nutzerbasis erweitern und die Kundenzufriedenheit verbessern. Darüber hinaus kann es die SEO (Suchmaschinenoptimierung) positiv beeinflussen, da barrierefreie Webseiten oft besser strukturiert und inhaltlich klarer sind.

Um die Anforderungen an barrierefreies Webdesign ein wenig transparenter zu machen, gehen wir auf einige der Aspekte im folgenden noch ein wenig genauer ein:

1. Struktur und Navigation

a. Semantisches HTML

Verwenden Sie semantische HTML-Elemente wie <header>, <nav>, <main>, <article>, <section> und <footer>, um die Struktur der Seite klar und verständlich zu machen. Semantisches HTML verbessert die Zugänglichkeit und die SEO.

b. Klare Navigation

Stellen Sie sicher, dass die Navigation konsistent und leicht verständlich ist. Verwenden Sie beschreibende Linktexte und vermeiden Sie vage Begriffe wie "Hier klicken". Eine Sitemap und ein Inhaltsverzeichnis können ebenfalls hilfreich sein. In der Designphase sollten bereits hier die 3 zentralen Fragen beachtet werden: Wo bin ich? Wo war ich? Und wo kann ich hingehen?" Diese 3 Fragen sind für die Startseite und inbesonere auch für die Unterseiten unbedingt zu bachten.
 

2. Wahrnehmbarkeit

a. Farben und Kontraste

Achten Sie auf ausreichende Farbkontraste zwischen Text und Hintergrund insbesondere auch für Fehlermeldungen innerhalb und außerhalb von Formularen. Dies ist besonders wichtig für Menschen mit Sehbehinderungen oder Farbenblindheit. Verwenden Sie Tools wie den Color-Contrast-Checker, um sicherzustellen, dass Ihre Farbwahl den WCAG-Richtlinien entspricht.

b. Textalternativen

Bieten Sie Textalternativen für alle nicht-textlichen Inhalte, wie Bilder, Videos und Audioaufnahmen. Verwenden Sie alt-Attribute für Bilder und bieten Sie Transkripte und Untertitel für Audio- und Videoinhalte an. Alt-Texte wie "Bild_1234" sind keine gute Bildbeschreibungen. Es gilt der Satz „Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master“ Redakteure sollten entsprechend geschult werden, gerade dann, wenn die Alt-Texte auch als Bilduntertitel verwendet werden und damit sichtbar im Font-End des Benutzers sind.
 

3. Bedienbarkeit

a. Tastaturnavigation

Stellen Sie sicher, dass alle interaktiven Elemente (wie Links, Schaltflächen und Formulare) per Tastatur bedienbar sind. Dies ist für Benutzer, die keine Maus verwenden können, entscheidend. Testen Sie die Webseite, indem Sie nur die Tastatur verwenden.

b. Fokusmanagement

Implementieren Sie ein klares Fokusmanagement, damit Benutzer immer wissen, wo sie sich auf der Seite befinden. Verwenden Sie sichtbare Fokusmarkierungen und stellen Sie sicher, dass der Fokus in einer logischen Reihenfolge durch die Seite bewegt wird.
 

4. Verständlichkeit

a. Klare Sprache

Verwenden Sie klare und einfache Sprache. Vermeiden Sie Fachjargon und komplizierte Sätze. Nutzen Sie Überschriften und Absätze, um den Text zu strukturieren und lesbar zu machen.

b. Fehlermeldungen und Hinweise

Bieten Sie hilfreiche und verständliche Fehlermeldungen und Hinweise an. Geben Sie konkrete Anweisungen, wie Benutzer Fehler beheben können.
 

5. Robuste Inhalte

a. Kompatibilität

Stellen Sie sicher, dass Ihre Webseite mit verschiedenen Browsern und Geräten kompatibel ist. Testen Sie die Webseite auf unterschiedlichen Plattformen, einschließlich mobiler Geräte und Screenreader.

b. ARIA-Attribute

Verwenden Sie ARIA-Attribute, um zusätzliche Informationen zu interaktiven Elementen bereitzustellen. Achten Sie darauf, diese korrekt, um nicht Verwirrung zu stiften.

In unserer heutigen Zeit ist barrierefreies Webdesign nicht nur ein "Nice-to-have" sondern ein wichtiges Mittel, um Menschen mit verschiedensten Einschränkungen die Teilhabe im Internet zu ermöglichen. Das Wissen um die Möglichkeiten, den Nutzern ihre Erfahrungen im Web zu erleichtern muss geteilt werden, um zukünftige Projekte von Beginn an erfolgreich zu entwickeln. Alle beteiligten Personen sind dabei kleine Puzzleteile, die am Ende das Große ganze Produkt ergeben.