Ist Ihre Website barrierefrei?

Veröffentlicht: 2021-07-19

Immer mehr Unternehmen verlagern sich auf das Internet, was großartig ist, aber nicht, wenn ein ganzer Teil der Bevölkerung die Website nicht nutzen kann. Barrierefreiheitsprobleme treten auf vielen Websites häufig auf und verursachen viele Probleme, die relativ einfach gelöst werden können - es bedeutet nicht, dass Sie eine ganz neue Website benötigen!

Laut dem Bericht der WHO über Behinderungen von 2011 leiden weltweit mehr als 1 Milliarde Menschen an einer Form von Behinderung. Dies entspricht etwa 15 % der Weltbevölkerung. Diese Zahl wird nur zunehmen, wenn die Bevölkerung altert und ältere Menschen ein höheres Risiko/Anteil von Behinderungen haben.

Im Jahr 2018 hat es die britische Regierung gesetzlich vorgeschrieben, dass die Websites der Zentralregierung, lokaler Regierungsorganisationen, einiger Wohltätigkeitsorganisationen und anderer Nichtregierungsorganisationen die WCAG2.1-Richtlinien erfüllen.

2019 wurde dann das Europäische Barrierefreiheitsgesetz geschaffen. Bereits 1990 deckte der American Disabilities Act Themen ab, die heute auf Websites angesprochen werden. In einigen Situationen werden Unternehmen jetzt vor Gericht gestellt und verlieren, wie zum Beispiel im Fall Domino's Pizza.

Die Leute würden nicht zögern, sicherzustellen, dass ein Veranstaltungsort physisch zugänglich ist. Warum ist es also anders, Ihre Website zugänglich zu machen? Es war noch nie so wichtig wie jetzt, da immer mehr Unternehmen überwiegend online gehen.

Behindertengerechtes Zugangszeichen

Zweck

Unser Ziel ist es, integrative Websites zu erstellen, denn Barrierefreiheit ist ein Menschenrecht.

Die Website wird nicht nur für alle einfacher zu bedienen sein, sondern wir werden dem Kunden möglicherweise auch mehr Leads bringen. Click away Pfund erklärte: „Das Versäumnis, barrierefreie Verbraucher-Websites bereitzustellen, kostete britische Einzelhändler im Jahr 2016 11,75 Milliarden Pfund.“

Probleme

Das Hauptproblem besteht darin, wie wir über Inklusivität oder sogar Behinderungen selbst denken. Ich bin ein großer Fan von Adrian Roselli und seiner Art, dies über die egoistische Zugänglichkeitsmethode anzugehen. Hier ist ein Video von Adrian von einer kürzlich durchgeführten Konferenz. Ich empfehle dringend, es aus einer anderen Perspektive auf Behinderungen und allgemeine Probleme zu betrachten, mit denen Menschen möglicherweise konfrontiert sind.

Im Wesentlichen bezieht er allgemeine Probleme der Barrierefreiheit von Websites auf alltägliche Situationen, die jeder erlebt, nicht nur Menschen mit Behinderungen. Zum Beispiel die Kontrastprobleme, erklärt er einfach, dass dies auch ein Problem ist, wenn die Person einen Laptop in der Sonne oder einem hell erleuchteten Bereich verwendet. Wir können also sehen, dass es in unserem besten Interesse ist, sicherzustellen, dass unsere Website auch für die breite Bevölkerung zugänglich ist.

Wie Sie seinem Video und den Statistiken entnehmen können, sind Menschen mit Barrierefreiheit viel häufiger als Sie vielleicht denken.

Häufige Probleme mit der Zugänglichkeit

Daher haben wir beschlossen, dass es für alle von Vorteil ist, unsere Websites inklusiv zu machen (hoffe ich!). Das erste, was den Leuten in den Sinn kommt, wenn es um Barrierefreiheit geht, ist, dass wir zusätzliche Features oder Funktionen einbauen müssen, deren Implementierung teuer und zeitnah ist, oder dass dies die Designs einschränkt.

In Wirklichkeit ist dies nicht der Fall und viele davon lassen sich mit ein wenig Überlegung, Planung und Anwendung der egoistischen Barrierefreiheitsmethode von Adrian Roselli sehr einfach lösen.

Farben und Kontrast

Ungefähr 8% (1 von 10) ALLER Männer auf der Welt sind farbenblind, also wählen wir eine Farbpalette, die diesen Anforderungen entspricht.
Wenn die Website des Kunden Farben verwendet, die nicht zugänglich sind, fragen Sie ihn, ob er damit einverstanden ist, möglicherweise 8 % seiner Leads zu verlieren. Ich bin sicher, sie werden die Farben überdenken, wenn du ihnen das erzählst.

Achten Sie bei der Auswahl dieser Farben auch auf ein gutes Kontrastverhältnis zwischen ihnen, damit Ihre Links nicht ausgeblendet werden, wenn sie sich auf einem kontrastarmen Hintergrund befinden (Laptop in der Sonne…). Dies ist ein 5-Minuten-Job mit etwas wie dem Online-Kontrastprüftool oder wenn Sie auf Ihre Links spezifisch sein möchten, verwenden Sie das Linkprüftool.

Bunte Farbe

Schriftgröße und Auswahl

Enthält Ihre Website Informationen, die die Leute verstehen sollen? Ich würde vermuten, ja. Stellen wir also sicher, dass eine der wichtigsten Zutaten Ihrer Website für die Augen verdaulich ist, bevor sie auf die Zurück-Taste drücken.

Fast 1 von 10 Personen, die Ihre Website aufrufen, hat ein Problem mit ihren Augen (ohne Farbenblindheit). Im Alter von 40 Jahren gelangt nur noch die Hälfte des Lichts auf die Netzhaut wie im Alter von 20 Jahren. Bei Menschen über 60 sind es 20 %.

Die Standardschriftgröße des Browserkörpers beträgt normalerweise 16px oder 1rem, dies ist auch die empfohlene Mindestschriftgröße, aber seien wir ehrlich, das ist einfach zu klein! Das häufigste Argument hier ist, dass „die Leute einfach hineinzoomen können, wenn sie den Text größer haben wollen“. Das Problem dabei ist, dass die meisten Menschen, die von diesem Problem betroffen sind, wahrscheinlich nicht wissen, wie man zoomt, daher sollten wir nicht davon ausgehen, dass dies eine Option für sie ist.

Es gibt keine "beste" Größe oder Schriftart, aber ich würde eine Körperschriftgröße näher an 18px oder 1,125rem empfehlen, mit einer angemessenen Zeilenhöhe, einer geeigneten Schriftart und dem Nötigsten an enthaltenen Schriftbibliotheken. Webaim hat einen guten Artikel über Schriftarten und sagt: „Jedes Mal, wenn Sie auf eine neue Schriftart, Schriftart oder Schriftartvariation stoßen, muss Ihr Verstand eine Karte oder ein Modell der Zeichen und Muster erstellen, um Wörter schneller zu analysieren und Bedeutungen zu verarbeiten. Dies erfordert kognitive Anstrengung und Zeit. Ist die Schrift bereits bekannt, reduziert sich dieser Aufwand.“

Gill Andrews hat einen umfassenderen Beitrag zu Typografiefehlern, der es wert ist, gelesen zu werden, wenn Sie sich mit viel Typografie beschäftigen.

Frau mit Lupe

Bilder

Hier nicht zu viel zu erwähnen, aber um sicherzustellen, dass Ihr Bild ein Alt-Tag hat. Die meisten CMS haben jetzt die Möglichkeit, beim Hochladen ein Bild-Alt-Tag hinzuzufügen. Stellen Sie sicher, dass Sie das Bild tatsächlich beschreiben, wenn es wichtig ist. Dieser Hubspot-Artikel enthält einen guten Bericht über die Verwendung von guten und schlechten Alt-Tags.

Wenn ein Bild nicht wichtig ist und rein dekorativ ist, wie ein Hintergrundmuster, lassen Sie die Tags leer. Stellen Sie nur sicher, dass es im Markup tatsächlich leer ist: alt="" oder es wird als fehlendes Alt-Tag gekennzeichnet.

Es ist wichtig, sich daran zu erinnern, dass Sie keine Bilder für wichtigen Text (wie Überschriften) verwenden sollten, da sie für Screenreader und Google unlesbar sind. Achten Sie auch beim Platzieren von Text über Bildern darauf, dass er aufgrund des Hintergrunds unlesbar werden kann.

Struktur

Eine Sache, die normalerweise übersehen wird, selbst wenn Sie die obigen Grundlagen befolgt haben, ist die eigentliche semantische Struktur der Seite. Viele Leute verfangen sich in der Größe einer Schriftart oder Überschrift und verwenden diese für Styling-Zwecke, anstatt die Informationshierarchie der Seiten zu definieren.

Dies wirkt sich nicht nur darauf aus, wie Ihr Inhalt von Google interpretiert wird, sondern Benutzer, die Screenreader verwenden, verwenden Ihr strukturelles Markup als Navigation. Yoast hat einen großartigen Artikel über Überschriften, den Sie ein bisschen lesen sollten. Ein einfacher Rat wäre, ein <h1>-Element auf Ihrer Seite und dann <h2> für Ihre nächsten wichtigen Abschnitte zu haben. Wenn Sie ein untergeordnetes Element eines Unterabschnitts haben, verwenden Sie ein <h3> und so weiter:

<h1>Normalerweise Ihr Seitentitel</h1>

<p>Hier ein Absatztext</p>

<h2>Der nächste wichtige Abschnitt Ihrer Seite</h2>

<p>Hier ein Absatztext</p>

<h3>Etwas nicht so Wichtiges, aber mit dem h2 oben zu tun</h3>

<p>Hier ein Absatztext</p>

<h2>Der nächste wichtige Abschnitt Ihrer Seite</h2>

Zusammenfassen

Ich hoffe, Sie können sehen, dass Sie durch die Befolgung dieser einfachen Regeln Ihre Website zugänglich machen und für alle Besucher zu einem angenehmeren Erlebnis werden. Darüber hinaus verbessern Sie auch Ihr Ansehen bei Google, sodass es für alle eine Win-Win-Situation ist.

Wenn Sie sich nicht sicher sind, ob Ihre Website diesen Standards entspricht, oder einfach nur helfen möchten, die Barrierefreiheit Ihrer Website zu verbessern, setzen Sie sich mit uns in Verbindung.