Was ist Ally und wieso geht es uns alle an?

Barrierefreiheit im Internet

Wir meinen an dieser Stelle die Barrierefreiheit im Internet. Deren Ziel ist es, Anwendungen und Webseiten so zu gestalten, dass sie von wirklich allen Nutzer*innen auch genutzt werden können.

Alle Nutzer*innen, meint also nicht nur die Anwender*innen, die alle Sinne uneingeschränkt einsetzen können, sondern umfasst auch Personen, die körperlich oder geistig eingeschränkt sind.

Eine weitere Schreibweise ist auch "a11y". Die Zahl 11 bezieht sich hierbei auf die Anzahl der mittleren Buchstaben des Wortes "Accessibility". Es folgt damit einer Konvention aus der Informations- und Kommunkationstechnologie, in der wiederkehrende wichtige Begrifflichkeiten nach diesem Schema abgekürzt werden. Ein weiteres Beispiel ist der Begriff "Internationalisierung" mit "i18n".

Wenn die Benutzung anstrengend wird

Betroffen sind viele von uns - einige mehr und andere weniger.

Ein paar Beispiele:

• Eine Freundin empfiehlt uns einen Blog, der sich mit veganer Ernährung befasst. Begeistert klicken wir auf den Link, nur um dann festzustellen, dass alles in weißer Schrift auf hell beigem Hintergrund verfasst wurde. Nach ein paar Minuten bekommen wir Kopfschmerzen und verlassen die Seite. Das Lesen hat angestrengt.
• Wir möchten die nächste Bahnreise buchen und stellen erfreut fest, dass es wenige Tickets zu einem reduzierten Preis gibt. Bei dem Versuch schnell zu sein, klicken wir aus Versehen auf die Zugverbindung da drunter. Die Buttons liegen aber auch eng beieinander! Frustriert warten wir, bis sich die Seite aufgebaut hat und klicken zurück. „Das Formular kann nicht erneut gesendet werden“. Argh! Dann suchen wir eben neu - nur um festzustellen, dass die vergünstigte Verbindung nicht mehr verfügbar ist.
• Unser Großvater reicht uns sein Handy: „Was steht da? Das ist viel zu klein geschrieben.“ Ein Zoomen ist nicht möglich und die Schriftgröße lässt sich auch nicht einstellen.
• Auf einer Webseite, zu der wir zu Recherche-Zwecken unterwegs sind, öffnen sich immer wieder nervige Popup-Fenster. Auch beim Verlassen der Seite öffnet sich wieder Werbung.

Wir alle kennen solche und ähnliche Situationen aus unserem Alltag, die vermeidbar wären, wenn zum Beispiel Kontraste von Schriften richtig gesetzt oder Buttons weit genug auseinander liegen würden.

Die wenigsten von uns können nachvollziehen wie es ist, aufgrund einer körperlichen Einschränkung, die Maus nicht nutzen zu können.

Durch fehlende Feinmotorik nicht dort zu klicken, wo man eigentlich hin wollte.

Oder sich von einem Screenreader alle Inhalte vorlesen zu lassen.

Beispiele für Barrieren:

Physiologische Barrieren

Physiologische Barrieren treten auf, wenn die Motorik eines Menschen gestört ist. Zu unterscheiden ist zwischen fehlender Feinmotorik, also der Schwierigkeit auf kleine Links und Buttons zu klicken und einer körperlichen Beeinträchtigung. Letzteres kann dazu führen, dass zum Beispiel die Maus und/ oder die Tastatur nicht benutzt werden kann.

Auditive Barrieren

Eine weitere Barriere ist das eingeschränkte oder fehlende Hörvermögen. Videos und Audiospuren können dann nicht einfach abgespielt und verstanden werden. Auch Benachrichtigungstöne können nicht wahrgenommen werden.

Visuelle Barrieren

Es gibt eine Vielzahl an visuellen Barrieren. So gibt es Menschen, die an einer Rot-Grün Sehschwäche leiden und Inhalte auf Webseiten anders wahrnehmen. Menschen mit Farbenblindheit sehen Grafiken und Bilder anders. Menschen mit fehlendem Sehvermögen benutzen Screenreader, um durch das Internet zu navigieren und sich Inhalte vorlesen zu lassen.

Welche Anpassungen kann mein Unternehmen jetzt schon umsetzen

Es gibt viele Optionen, die eigene Webseite oder App möglichst barrierefrei zu gestalten. Möchten Sie es richtig angehen, steht zu aller erst ein Test der eigenen Seite an. Darauf folgt eine individuelle Beratung mit geschulten UX-Designer*innen und einem a11y-Team.

Die Handlungsempfehlungen sind dabei so individuell wie jede Anwendung selbst. Ein paar Wiederholungsfaktoren gibt es allerdings.

UX-Designer*innen müssen beim Erstellen einer Anwendung auf die Farben achten. Ein besonders kontrastreiches Design und eine gut leserliche Schriftgröße und -art, helfen bei der Lesbarkeit.

Bilder sollten immer mit ein einem ALT-Tag versehen werden. So können Screenreader sie erfassen und auslesen.

Bei Audiowiedergaben muss auf alternative Lösungen zum Ton gesetzt werden. Bei Videos kann ein Untertitel eingeblendet oder auf "Closed Captions", die erweiterte Form der Untertitel, zurückgegriffen werden. "Closed Captions" verschriftlichen nicht nur das gesprochene Wort, sonder auch andere Informationen wie Hintergrundgeräusche.

Motorisch eingeschränkte User*innen profitieren von gut klickbaren Flächen. Links und Buttons sollten dafür nicht zu eng beieinander liegen und auch nicht zu klein sein. Es geht darum die Klickfläche so groß zu halten, dass sie auch ohne feinmotorische Maus-Bewegungen getroffen werden kann. Auf Hover-Links sollte weitestgehend verzichtet werden.

Eine weitere Hilfe ist die Skalierbarkeit von Schriftgrößen. Ist diese einstellbar freuen sich Nutzer*innen mit einer Sehbeeinträchtigung. Positiver Sideeffect: Die Bounce Rate wird sich auch verringern.

Um Menschen die Nutzung einer Webseite zu erleichtern sind Tastaturkürzel von großer Bedeutung. Auch bei unbeschränkten Menschen kann die Tastaturbedienung die Usability erhöhen, da Interaktionen auf der Webseite auch für sie einfacher und zeitsparender werden können.

Good to know: a11y für besseres SEO

Barrierefreiheit ist nicht nur für Menschen bereichernd. Auch Suchmaschinen und ihre Crawler freuen sich über möglichst barrierefreie Webauftritte.

So kann eine klare inhaltliche Struktur einer Webseite mit Überschriften von H1 bis H6 und gelegentlichen fetten und kursiven Textpassagen die Crawler auf wichtige Inhalte aufmerksam machen.

Sind auf allen Seiten die Meta Descriptions, Title Tags und ALT-Tags gesetzt, können Inhalte besser eingeordnet und bewertet werden.

Von einem sauberen Quellcode profitieren am Ende nicht nur Benutzer*innen eines Screenreaders, sondern auch die Webseite selbst mit einem verbesserten Ranking in den Suchergebnissen.

Wir helfen bei der Umsetzung einer barrierefreien Anwendung

Sind Sie an einer Umsetzung auf Ihrer Webseite interessiert und planen Sie in nächster Zeit ein neues Projekt? Unsere ally-geschulten UX-Designer*innen und Entwickler*innen begleiten Sie gerne auf dem Weg. Unterstützt werden sie zusätzlich von unserem eigens gegründeten A11y-Squad.

Ob durch individuelle Beratung, Erstellung erster Mock-Ups oder die konkrete Umsetzung von Design und Entwicklung - wir sind der passende Partner.

Sprechen Sie uns an und vereinbaren Sie ein erstes unverbindliches Beratungsgespräch.