UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Web Accessibility – Wie wir Schriftgrößenanpassung & High Contrast Switch umsetzen

Wir haben uns in letzter Zeit wieder intensiver mit dem Thema Web Accessibility beschäftigt und durften auch für ein paar unserer Kund:innen Projekte in diesem Bereich umsetzen. Unsere Insights und Erfahrungen mit Schriftvergrößerung und High Contrast Switch wollen wir gerne mit euch teilen. Ok, let’s go!

4. März 2024, von Martina Thaler

Warum ist Web Accessibility so wichtig und woran scheitert es in der Praxis?

Damit Menschen mit unterschiedlichen Fähigkeiten und Sehbeeinträchtigungen auf Websites zugreifen und sie nutzen können, sollte auf jeder Website sichergestellt werden, dass diese barrierefrei gestaltet ist. In Österreich müssen öffentliche Stellen sowie private Unternehmen mit öffentlichem Auftrag ihre Website WCAG (Web Content Accessibility Guideline) konform gestalten. Die Nichteinhaltung dieser Standards kann zu rechtlichen Konsequenzen führen. Es ist also nicht nur eine ethische Verpflichtung, sondern oft auch eine rechtliche Anforderung.

Hört sich gut an, ist in der Praxis leider trotzdem nicht die Norm. Unterschiedliche internationale Untersuchungen beschreiben die Web-Accessibility noch immer als mangelhaft. Laut einer diesjährigen Studie von WebAim sind 96 % der meistgenutzten Websites nicht barrierefrei.

Gelbe Grafik auf schwarzem Hintergrund
96,3% der Websites weisen 2023 wcag2-verstöße auf
96,3% der Startseiten wiesen WCAG-2-Verstöße auf! Über die letzten 4 Jahre hinweg hat sich der Anteil der Seiten mit nachweisbaren WCAG-Verstößen nur um 1,5% verringert, ausgehend von 97,8%.

Eine schockierend hohe Zahl. Doch warum ist das so? Die mangelnde Umsetzung von Web Accessibility kann auf verschiedene Gründe zurückgeführt werden:

  1. Fehlende Schulung und Kenntnisse: Webentwickler:innen und Designer:innen müssen Kenntnisse über barrierefreies Design haben, um sicherzustellen, dass ihre Websites für alle Benutzer:innen zugänglich sind. Diese Fachkenntnisse fehlen häufig, umso wichtiger ist die Zusammenarbeit mit Partner:innen, die wissen wie’s läuft. 🤓
  2. Zeit und Kosten: Die Umsetzung von Barrierefreiheit erfordert zusätzliche Zeit und Ressourcen. In vielen Fällen werden diese Aspekte nicht ausreichend berücksichtigt, insbesondere wenn der Fokus auf schneller Entwicklung und niedrigen Kosten liegt. Inklusion sollte aber keine Frage von Kosten und Aufwand sein!
  3. Veraltete Technologien: Einige ältere Websites basieren möglicherweise auf veralteten Technologien, die nicht standardmäßig barrierefrei sind. Die Aktualisierung solcher Websites kann zeitaufwändig und kostspielig sein. Und auch hier gilt: Accessibility is priceless.
  4. Mangelnde Priorität: Für einige Unternehmen und Organisationen mag Barrierefreiheit möglicherweise nicht die oberste Priorität haben im Vergleich zu anderen Aspekten wie Ästhetik, Funktionen oder Umsatz. Aber es ist jetzt an der Zeit, umzudenken…

Diese Gründe zeigen, dass es noch immer Herausforderungen gibt, die es zu überwinden gilt, um eine umfassende Barrierefreiheit im Web zu erreichen. Es ist wichtig, dass alle Beteiligten, von Entwickler:innen und Designer:innen bis hin zu Website-Betreiber:innen zusammenarbeiten, um die Web-Accessibility voranzutreiben.

In unserem heutigen Blogartikel wollen wir speziell auf 2 Punkte der Web Accessibility in der Praxis eingehen:

1. High Contrast Switch

Was ist das und wozu brauche ich es?

Einer der ersten Schritte zu einer barrierefreien Website ist der Einbau eines High Contrast Switchs. Doch wem genau nutzt dieser etwas? Viele Menschen mit Sehbehinderung leiden unter extremer Lichtempfindlichkeit (sogenannter Photophobie). Helles Licht macht für diese Menschen das Sehen schwierig oder unmöglich und verursacht Augen- und Kopfschmerzen. Deshalb ist für sie die normale Helligkeit eines Computerbildschirms mit hellem Hintergrund nicht lesbar und schmerzhaft. Ein High Contrast Switch auf einer Website ermöglicht es den Benutzer:innen schnell zwischen einem konventionellen Farbschema und einem High-Contrast-Modus zu wechseln.

Screenshot der Belvedere.at Startseite im nomalen Modus
(man sieht das Obere Belvedere, das Untere Belvedere und das Belvedere 21)
Belvedere.at “before”.
Screenshot der Startseite Belvedere.at im High Contrast Mode
(Schwarzer Hintergrund mit hellem Text)
Belvedere.at nachdem der High Contrast Switch im Browser aktiviert wurde.
(man sieht das Obere Belvedere, das Untere Belvedere und das Belvedere 21)
Belvedere.at nachdem der High Contrast Switch im Browser aktiviert wurde.

High Contrast Switch in der Praxis – Was gilt es zu beachten?

Gemeinsam mit der Österreichischen Galerie Belvedere durften wir dieses Jahr einen High Contrast Switch umsetzen. Hier sind unsere Top 3 Tipps für Designer:innen, die ihr bei der Umsetzung des High Contrast Switches beachten solltet:

  • Nutze kein reines Schwarz/Weiß

Rein weiße Schrift kann auf schwarzem Hintergrund für Menschen mit einer Hornhautverkrümmung schnell verschwommen bzw. unscharf wirken.

You think this is the best solution, but  it is not
Ansicht der Strasse in der Nacht mit Lichtern eines LKW
Bild mit Hornhautverkrümmung (ASTAGMATISMUS)
  • Nutze Farben alleine nicht als Alleinunterscheidung

Generell sollten Farben nicht als einziges Mittel zur Unterscheidung verwendet werden. Zusätzlich können Zeichen und Muster eingesetzt werden um z.B. den Status eines Toggles anzuzeigen.

Schwarzer Hintergrund mit Symbolen- Schieber und einem Balkendiagramm mit unterschiedlichen Strukturen
So könntest du zusätzlich zur Farbe mit Symbolen oder Strukturen Unterscheidungen schaffen.
  • Setze einen Fokus!

Ist die Fokusanzeige der Tastatur auf der Website sichtbar, gilt es folgende Punkte zu beachten: Die Umrandung sollte mindestens 2 Pixel größer sein als die nicht umrandeten Komponenten. Das Kontrastverhältnis zwischen den fokussierten und den unfokussierten Komponenten sollte 3:1 sein.

Ansonsten ist es wichtig, bei der farblichen Umstellung gründlich und umfangreich zu testen, um sicherzustellen, dass wirklich alle Elemente, Seiten und Funktionen berücksichtigt und angepasst wurden. Im Idealfall hilft auch ein kurzer Blick von Expert:innen und/oder Betroffenen über deine Seite, um mögliche Lücken aufzudecken.

2. Schriftgrößenanpassung

Was ist das und wozu brauche ich es?

Manche Menschen brauchen unterschiedliche Textgrößen, um die Buchstaben zu erkennen. Obwohl eine Vergrößerung in der Praxis am häufigsten vorkommt, bevorzugen manche Menschen mit Tunnelblick und guter Sehschärfe kleinere Buchstaben, damit sie mehr Wörter auf einmal sehen können. Den Benutzer:innen soll es möglich gemacht werden, die Textgröße (Schriftgröße) des gesamten Textes zu ändern, ohne die Benutzeroberfläche zu vergrößern (was der Fall wäre, wenn die Benutzer „heranzoomen“ oder Browserfunktionen verwenden würden). Laut den Web Content Accessibility Guidelines (WCAG) 2.0 und der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 ist eine Textvergrößerung von 200% erforderlich.

Beispiel BBRZ

Eine variable Schriftgröße ermöglicht es Menschen mit Sehbeeinträchtigungen, die Website besser zu lesen. Durch die Anpassung der Schriftgröße konnten wir auch “Reha-Billi” inklusiver gestalten.

Ansicht Grössenanpassung des BBRZ-Kundinnenportals

Web Accessibility – Zusammenfassung und Ausblick

Jeder spricht darüber, aber wenige setzen es wirklich um. (Ja, auch wir haben teilweise Nachholbedarf bei unseren eigenen Seiten und sind dran das zu verbessern).
Web Accessibility wird derzeit noch als „nice to have“ betrachtet, das man sich auch leisten können muss. Wir sind noch weit davon entfernt, einen weltweiten Standard zu haben, da es immer noch an Erfahrung, Know-how und Verantwortung mangelt. Gerade deshalb ist es so wichtig, sich in den Diskurs einzubringen, Erfahrungen auszutauschen, mit Betroffenen zu sprechen und einfach anzufangen. Auf diese Weise können wir gemeinsam einige Schritte in die richtige Richtung machen. Denn darum geht es bei Accessibility: Gemeinsam mehr zu erreichen.

Hast du Fragen oder möchtest du das Thema angehen?
Wir helfen dir gerne in der Umsetzung deiner Accessibility-Projekte.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Martina Thaler

Meine Rolle bei Liechtenecker: Account Managerin Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Gastronomin Mein Herz schlägt für: Dukatenschnitzel & Gute Laune
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Generative AI: Eine Web-App in 50 Bahn-Kilometern

18. April 2024, von stephan

Es ist früher Donnerstagabend am Wiener Franz-Josefs-Bahnhof. Schwärme an Pendlern strömen in die Züge. Die Menschen wirken erschöpft und müde. Viele nutzen die Zeit im Zug um ein Buch zu lesen oder einfach nur aus dem Fenster zu schauen. Die Zugfahrt nach dem Büro ist für mich meistens die Zeit, offene Tasks abzuschließen, Tickets zu verschieben und zu kommentieren oder E-Mails zu beantworten. Doch heute soll das anders sein.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close