Eine inklusive Initiative, zugänglich für alle!

Ein illustiertes, grünes Chamäleon auf weißem Hintergrund mit großen Augen und einem Lächeln im Gesicht

Farben sind für alle da und Gehirngerecht, ein Werte-Match made in heaven!

Die vier Maskottchen von Gehirngerecht Digital sind in einem Urwald und treffen dort auf Kami, das Chamäleon. Alle fünf sind schockverliebt!

Farben sind für alle da? Das finden wir auch! Doch nicht nur Farben sind für alle da, sondern auch das Internet! Darum haben wir es uns zur Mission gemacht, Barrieren im Netz abzubauen. Damit alle Menschen teilhaben können. Wir freuen uns also riesig Teil dieser fabelhaften Initiative zu sein und ihr den nötigen barrierefreien Rahmen geben zu dürfen! 

Barrieren abbauen – für mehr Inklusion: Was ist Barrierefreiheit eigentlich?

Falls du bisher nicht von digitalen Barrieren gehört hast, bist du nicht allein. Das Internet ist leider noch sehr voll davon: Hürden, die es Nutzer*innen schwer machen, eine Website, Software oder eine App zu nutzen.

Warum etwas eine Barriere darstellt, kann viele Gründe haben. Denk an dein*e Nachbar*in, Papa oder Tante, die vielleicht nicht wissen, wie sie online einen Termin vereinbaren können. Vielleicht hat dein*e Nachbar*in ein Kind auf dem Arm und keine Hand frei. Vielleicht hat Papa sich den Arm gebrochen und kann seine Hand eine Weile nicht nutzen. Vielleicht hat deine Tante keine Hände, um eine Website zu bedienen.

Manche dieser Gründe können situationsbedingt beeinträchtigen. Ein Kind kannst du absetzen. Ein Bruch ist temporär. Eine fehlende Hand hingegen ist eine permanente Behinderung. Egal ob für einen Moment oder permanent, all diese Situationen machen es schwieriger, am digitalen Leben teilzuhaben. Und dabei soll digitale Barrierefreiheit helfen.

Assistive Technologien – die digitalen Helfer

Knapp zehn Prozent der deutschen Bevölkerung sind schwerbehindert. Das sind ungefähr acht Millionen Menschen!

Um am digitalen Leben teilzunehmen, brauchen sie oft assistive Technologie. Sie hilft ihnen, Inhalte auf dem Sinneskanal ihrer Wahl wahrzunehmen und zu interagieren. Oftmals informieren wir uns, indem wir lesen, sehen oder hören. Für manche ist das nicht möglich: Dafür gibt es digitale Helfer!

Drei wichtige, assistive Technologien: Screenreader, Sprachsteuerung und Bildschirmlupe.

Ein sogenannter Screenreader ist beispielsweise eine Software, die Webseiten analysieren und dir den Inhalt wiedergeben kann, ohne dass du die Webseite siehst. Ziemlich nützlich, oder? Wie man sich Informationen dann ausgeben lässt, kann man sich aussuchen.

Das funktioniert allerdings nur, wenn die Seite das hat, was der Technologie alle Informationen zur Verfügung stellt: Semantik. Einfach gesagt: Digitale Inhalte müssen (technisch) sinnvoll strukturiert sein. Manche steuern Software und Co auch mit der Stimme oder zoomen sich Inhalte sehr groß, um sie besser wahrnehmen zu können. Vielfältige Behinderungen benötigen vielfältige Lösungen.

Eine barrierefreie Website ist also auf die Bedürfnisse der Menschen anpassbar. Dann ist niemand ausgeschlossen und im Idealfall können sich so alle gleichermaßen am digitalen Leben beteiligen.

Wie wir digitale Barrierefreiheit auf “Farben sind für alle da” umgesetzt haben:

Um Barrierefreiheit richtig umzusetzen, gibt es viele Regeln und Richtlinien zu beachten. Am besten denkt man sie von Anfang an mit. So entsteht ein schlüssiges Konzept und am Ende eine nutzer*innen-freundliche Seite, die gern besucht wird. Da du es bis hierher geschafft hast, kannst du wahrscheinlich schon beurteilen, ob dem so ist. (Falls nicht, lass es uns gern wissen!)

Richtiger Umgang mit Kontrasten.

Um die Inhalte gut lesbar zu machen, muss man sich bei der Farbwahl die Kontraste ansehen. Schwarze Schrift funktioniert auf hellen Hintergründen, weiße auf dunklen. Bunte Schrift und bunter Hintergrund sind besonders schwierig zu kombinieren. Das klingt logisch und recht selbstverständlich, wird aber in der Umsetzung oft vergessen.

Öffne gerne mal ein paar Seiten, die du öfter besuchst. Ich bin sicher, Du wirst nicht lange suchen müssen nach einem Beispiel für zu wenig Kontrast. Der Kontrast muss für jeden Fall individuell betrachtet und angepasst werden. Für eine Rot-Grün-Schwäche (knapp zehn Prozent der Männer sind davon betroffen!) ist rötlich auf grünlich beispielsweise unlesbar. Für Menschen, die gar keine Farbe sehen, muss die Seite auch in Graustufen funktionieren. Du siehst, es gibt einiges zu beachten.

So sehen zum Beispiel Bilder aus, wenn man gar keine Farbe sieht:

Ein Screenshot von Produktkarten. Die Farbe wurde herausgenommen und man sieht die Bilder nur in Graustufen.

Und so können Farben aussehen, wenn man Rot-blind ist:

Ein Screenshot von der Produktkartenn auf der Farben-sind-für-alle-da-Seite mit Rotblindheits-Simulation.

Überschriftenstrukturen – Ordnung muss sein.

Natürlich muss man auch gut lesbare Schriften wählen und sie immer für das Gleiche einsetzen. So ergibt sich ratzfatz Struktur. Überschriften sehen immer aus wie Überschriften, Fließtext, wie Fließtext und Listen wie Listen. Verschiedene Farbflächen ordnen die Kapitel zusätzlich. So weiß dein Auge, wie es die Information einordnen muss. Für alle, die nicht mit den Augen wahrnehmen, haben wir Füchse die optische Struktur auch semantisch hinterlegt. Alle können sich orientieren, egal, wie sie die Seite wahrnehmen. Win, win für alle!

Bilder erkennbar für alle!

Du hast bestimmt auch schon gesehen, dass auf der Seite sehr viele Bilder zu sehen sind. Aber wie macht man die für Nichtsehende wahrnehmbar? Man beschreibt sie! Für alle Bilder auf der Seite ist eine textuelle Alternative hinterlegt. So kann eine Person, die sich die Seite von assistiver Technologie vorlesen lässt, die Bilder in Worten erfahren.

Ein Beipsiel von einem Alternativtext, der das Bild eines Blog-Artikels beschreibt. Der Alttext lautet: Eine Gruppe von Kindern lernt spielerisch etwas über Musik von ihrer Erzieherin. Alle haben eine Glocke in der Hand und lauschen neugierig

Aussagekräftige Beschriftungen für mehr Verständlichkeit.

Eine barrierefreie Seite ist zudem verständlich. Hm, sollte das nicht jede Website sein, fragst du dich? Auf jeden Fall! In der Praxis sieht das leider oft anders aus. Zur Verständlichkeit zählen nicht nur klare Inhalte zur Verfügung zu stellen, sondern auch eine konsistente Nutzung zu ermöglichen. Deswegen haben wir Links und Buttons aussagekräftig benannt und mit Icons unterstützt. Ihr sollt ja wissen, was zu tun ist und welche Aktion, was auslöst. 

Gerade beim Thema Verständlichkeit ist Barrierefreiheit wieder mal für alle ein Gewinn: Ihr kennt das doch sicher, wenn Ihr ein Formular nicht absenden könnt, aber nicht wisst, wo der Fehler liegt. Ärgerlich! Oft werden die nämlich nicht ausreichend gekennzeichnet. Wir haben Eingabefehler klar dargestellt und erklärt. Denn nur, wenn man weiß, was falsch ist, kann man es beheben.

Ein Screenshot eines Formulars, in dem Fehlermeldungen angezeigt werden!

Auch die Sprache eines Textes muss ausgezeichnet werden. Ist die Website auf Englisch, ist es für Screenreader wichtig, das zu wissen, denn sonst geben die Seiten in total unverständlichem Denglisch wieder. Das Gleiche gilt natürlich für Zitate und Songtexte etc.

Je klarer Informationen im Web dargelegt sind, umso verständlicher für Mensch und Technologie. Das hilft übrigens auch mit der Suchmaschinen-Optimierung! 

Tastatur-Bedienbarkeit: Wie bedient man eine Seite ohne Maus?

Es gibt sehr viele Menschen, die weder Maus noch Touchpad bedienen können. Dafür gibt es zahlreiche Gründe, wie wir mittlerweile wissen. Warum auch immer jemand eine Alternative benötigt, wir wollen sie bieten. Deswegen ist die FSFAD-Seite Tastatur bedienbar. Ein Zeichen dafür sind Fokusrahmen. Wenn Du mit der Tabtaste über die Seite hüpfst, siehst du anhand der Rahmen immer, wo du dich befindest und kannst dich so besser orientieren.

Screenshot von zwei Blog-Übersichts-Karten. Diese Karten sind fokussierbar und man sieht um eine einen Fokusrahmen.

Inklusion geht also nicht ohne digitale Barrierefreiheit!

Ihr seht also, die Bedürfnisse von Menschen, die Websites nutzen, sind so vielfältig wie die Menschen selbst. Und das ist fabelhaft, denn wir lieben es bunt! Deswegen ist es wahnsinnig wichtig, allen den Zugang zu einem gemeinsamen digitalen Leben zu gewährleisten. Internetnutzung wird beständig zu einem noch größeren Teil unseres Lebens. Die Reservierung im Restaurant, Online-Banking oder sich über großartige Initiativen informieren: jede*r möchte diese Dinge in Anspruch nehmen. Und jede*r hat das Recht dazu.

Erfahre mehr über digitale Barrierefreiheit auf der Webseite von Gehirngerecht Digital

Weitere spannende Artikel

  • Seid Ihr bereit für Euren nächsten Ohrwurm? Dann drückt auf Play und macht Euch darauf gefasst, dass Ihr gleich singend…

    Mehr erfahren
    Bild vom Liedcover mit Senta. Auf dem Cover ist Senta im Profil zu sehen, sie wird von rotem Licht angestrahlt.
  • Ziel: Kinder lernen spielerisch verschiedene Farben kennen und verbinden diese mit positiven Eigenschaften und lernen, Geschlechterstereotype zu hinterfragen. Vorbereitung:  …

    Mehr erfahren
    Kinder und Erzieherin malen zusammen mit bunten Wasserfarben. Man sieht wie die Erzieherin sich zum Tisch beugt und interessiert die Werke der Kinder betrachtet.

Genderneutrale Spielsachen

Unser Sortiment an genderneutralen Spielsachen für eine Welt mit weniger Klischees

  • Kindsgut Kuscheltier Chamäleon

    39,99 €

    inkl. MwSt. zzgl. Versandkosten

    Zum Produkt
    Kindsgut Stofftier Chamäleon Produktbild mit Kind, das das Stofftier in die Höhe streckt
  • Kindsgut Kindertöpfchen Aquamarin

    34,99 €

    inkl. MwSt. zzgl. Versandkosten

    Zum Produkt
    Kindertöpfchen mit Kind, das den Deckel öffnet. Das Töpfchen ist in einem niedlichen Wal Design gehalten.
  • Kindsgut Holzkonfetti

    12,99 €

    inkl. MwSt. zzgl. Versandkosten

    Zum Produkt
    Kindsgut Konfetti Produktbild mit Kuchen und Geschenken
Alle Produkte von Kindsgut