Wie sich ein großartiges Design auf die Barrierefreiheit von Websites auswirkt

Sie suchen einen Einstieg in die weite Disziplin der Barrierefreiheit? Wir werden uns mit echten Praktiken und Tools befassen, die Sie in Ihren Designprozess implementieren können, um Ihre digitalen Produkte zu verbessern, indem Sie sie für mehr Benutzer zugänglich machen.

Was ist Barrierefreiheit?

Barrierefreie Websites ermöglichen es einer größeren Vielfalt von Benutzern, auf reibungslose Weise mit Inhalten auf Ihrer Website zu interagieren. Egal, ob wir uns dem Thema aus einer UI- oder UX-Perspektive nähern, der Fokus liegt darauf, ein Qualitätsprodukt zu schaffen, das einem vielfältigen Publikum gerecht wird.

Dieses vielfältige Publikum „erstreckt sich auf jeden, der eine dauerhafte, vorübergehende oder situative Behinderung hat, z Der Benutzer kann Aufgaben mit nur einer Hand erledigen.“ (Avinash Kaur, 2018).

Warum ist Barrierefreiheit wichtig?

Als Designer liegt es in unserer Verantwortung, sicherzustellen, dass wir für alle Benutzer unabhängig von ihrer Situation, ihren Fähigkeiten oder ihrem Kontext zugänglich sind. Infolgedessen kann das Web ein Raum sein, der alle einbezieht, egal ob sie eine kognitive Behinderung, eine Sehbehinderung oder eine körperliche Behinderung haben.

Für die Erstellung einer barrierefreien Website müssen keine großen Budgets oder Änderungen erforderlich sein. Da keine zusätzlichen Funktionen oder Inhalte erforderlich sind, kann die Zugänglichkeit durch Aufklärung und Sensibilisierung zu Beginn eines Designprojekts erreicht werden.

Es ist wohl auch für Unternehmen wichtig: Studien zeigen, dass barrierefreie Websites bessere Suchergebnisse haben, ein größeres Publikum erreichen, SEO-freundlich sind, schnellere Downloadzeiten haben, gute Programmierpraktiken fördern und immer eine bessere Benutzerfreundlichkeit bieten.

Wie erreichen wir Barrierefreiheit?

Sie müssen bestimmte Anpassungen vornehmen und einem Rahmen folgen, um sicherzustellen, dass Sie für verschiedene Fähigkeiten, Alter und Erfahrung mit Geräten entwerfen.

Barrierefreiheit ist eine eigenständige Disziplin, die sich ständig weiterentwickelt, um zu digitalen Produkten zu passen. Gleichzeitig wachsen aber auch Softwarelösungen. Das bedeutet, dass wir nicht alles in dem Thema behandeln können, aber wenn Sie diesen Artikel nützlich finden, können wir einen Teil 2 machen!

Wir werden tief in 5 große Bereiche eintauchen:

1. Farbkontrast
2. Alternativer Text
3. Fokuszustände
4. Formen
5. Typografie

Farbkontrast

Die Gewährleistung eines ausreichenden Farbkontrasts zwischen Text und Hintergrund hilft Benutzern, die mit dem Sehvermögen zu kämpfen haben. Dies betrifft eine höhere Anzahl von Benutzern als erwartet und wird oft als Problem ignoriert. Allerdings sind bis zu 1 von 12 Männern farbenblind und viele andere sehbehindert oder blind.

Zunächst schreiben die Richtlinien zur Barrierefreiheit vor, dass Farbe niemals die einzige Möglichkeit sein sollte, Informationen zu vermitteln. Mit anderen Worten, es muss einen zusätzlichen Hinweis für diejenigen Benutzer geben, die Farbe anders wahrnehmen und unsere farbbasierten Anweisungen möglicherweise übersehen.

Um einen anständigen Kontrast zwischen Text und Hintergrund aufrechtzuerhalten, ist ein gutes Verhältnis von mindestens 4,5 zu 1 zu beachten. Dies ermöglicht Benutzern mit Sehbehinderung oder Farbenblindheit eine klare Unterscheidung zwischen den beiden.

Das Kontrastverhältnis von 4,5 zu 1 entspricht der Konformitätsstufe AA (von den drei Stufen: A, AA und AAA), dies ändert sich jedoch je nach Schriftgröße und gewünschter Konformitätsstufe. Größere Schriftarten erfordern ein kleineres Kontrastverhältnis von nur 3 zu 1, wenn die Schrift 18 pt (oder 14 pt in Fettdruck) ist.

Diese Mindestverhältnisse gelten nicht für Text, der sich in einem Logo oder einem Markennamen befindet, aber es ist nützlich, Ihr Kontrastverhältnis mit diesem praktischen Tool selbst zu überprüfen.

Alternativer Text

Für Benutzer, die mit Screenreadern auf das Web zugreifen, werden die angezeigten Inhalte nicht immer korrekt übermittelt. Alternativer (Alt-)Text verwendet der Screenreader, um den Benutzer darüber zu informieren, welche Bilder sich auf der Seite befinden.

Dies kann durch die Umwandlung des Alternativtextes in Braille, eine Audiodeskription oder visuelles Lesen des Textes erfolgen. Dies bedeutet, dass es wichtig ist, für diejenigen, die es nicht sehen können, genau zu beschreiben, was im Bild passiert.

Manchmal ist es möglicherweise nicht erforderlich, Alternativtext hinzuzufügen. Zum Beispiel kann es genügend Kontextindikatoren geben, die das Bild umgeben, oder das Bild hat keine andere Funktion als die Ästhetik.

Fokuszustände

Sie sind wahrscheinlich bereits mit Fokusindikatoren vertraut, ohne es zu merken. Fokuszustände sind die (oft) blauen Umrisse, die erscheinen, wenn ein Element ausgewählt wird, zB Links, Menüs, Schaltflächen und Formularfelder.

Diese signalisieren, auf welches Element sich der Benutzer bei der Verwendung der Tastatur gerade konzentriert. Oft werden diese Indikatoren als unansehnlich oder zwecklos angesehen, aber sie sind eigentlich sehr wichtig. Viele Benutzer können nur die Tastatur verwenden, und sehbehinderte Menschen, die Bildschirmlesegeräte verwenden, benötigen auch Fokusindikatoren, um bei der Seitennavigation zu helfen.

Fokusindikatoren sind eine einfache Möglichkeit, Ihre Seitennavigation mit wenig Aufwand übersichtlich und zugänglich zu machen und dennoch einen großen Unterschied für den Benutzer zu machen. Sie können sich mit passenden Farben nahtlos in die Marke einfügen, sie müssen nur kontrastreich sein, damit sich die Elemente abheben.

Formen

Formulare können für jeden komplex sein, aber diejenigen mit zusätzlichen Barrierefreiheitsproblemen haben oft Probleme, wenn Formulare zu minimalistisch und unklar sind. Im Folgenden sind einige allgemeine Punkte aufgeführt, die angegangen werden müssen, um die Barrierefreiheit zu verbessern:

• Beschriftungen – Die Verwendung von Platzhaltertext als Beschriftung anstelle von Text außerhalb des Felds führt zu Verwirrung, da der Text verschwindet, wenn der Benutzer mit der Eingabe beginnt. Das Auslassen wichtiger Anweisungen für den Benutzer zugunsten von Minimalismus oder Ästhetik ist ein großer Fehler, den es zu vermeiden gilt.
• Grenzen – etwas so Einfaches wie ein Rahmen um eine Texteingabe ist für Benutzer mit kognitiven Behinderungen wichtig, damit klar ist, wo sie klicken müssen
• Zusätzliche Anweisungen – oft verwenden Formulare einen minimalistischen Ansatz, um das Design zu entwirren, dies behindert jedoch die Benutzerfreundlichkeit und damit die Zugänglichkeit.
• Fehlermeldungen – diese sollten durch mehrere Elemente angezeigt werden, üblicherweise wird Farbe verwendet, aber zusätzlich sollten Fehler durch Symbole oder Text angezeigt werden.
• Überprüfung – Formulare sollten vor der Übermittlung einen Überprüfungszeitraum einräumen, damit der Benutzer alle Informationen korrigieren kann.

Typografie

Informationen sind leichter zu verdauen, wenn sie nicht überladen und zu viel in einem Raum sind. Dies gilt auch für barrierefreie Websites. Wie bereits erwähnt, kann die Schriftgröße die Mindestanforderungen für das Kontrastverhältnis ändern, aber Schriftgrößen sollten nicht unter 10 pt gehen.

Wie Sie sehen, ist es schwierig, in 9 pt zu lesen.

Die Erhöhung des Leerraums zwischen Textzeilen und einzelnen Wörtern kann Benutzern mit Sehbehinderung oder Legasthenie helfen. Die folgenden Mindestabstände stellen sicher, dass die Anforderungen dieser Benutzer erfüllt werden:

• Buchstabenabstand : x0.12 der Schriftgröße
• Wortabstand: x0.16 die Schriftgröße
• Zeilenabstand: x1,5 die Schriftgröße
• Absatzabstand: x2 die Schriftgröße

Fazit

Überraschenderweise können diese kleinen Änderungen einen großen Unterschied in der Zugänglichkeit machen. Es erfordert keine großen Budgets und viel Zeit, um Ihre Website den Richtlinien für die Barrierefreiheit von Webinhalten anzupassen, aber es kann die Erfahrung für einen Benutzer dramatisch verändern und somit auch Ihr Geschäft voranbringen.

Diese Vorschläge in Ihren Designprozess einzufügen, kann zur zweiten Natur werden und den Weg für eine Zukunft barrierefreierer Websites ebnen – es liegt an uns als Designern.

Wenn Sie Hilfe bei Ihrem Creative benötigen, zögern Sie nicht, uns zu kontaktieren.