Seite wählen

NETWAYS Blog

Flying blind – accessibility in the world wide web

Do you know how many visually impaired people there are out there?
I can tell you: There are roughly 188.5 million people with mild vision impairment, 1043 million have moderate to severe vision impairment, and 36 million people are blind (According to the world health organisation in 2018). When it comes to colour blindness there are approximately 300 million people affected – that’s almost as many people as the entire population of the USA! (According to the Colour Blind Awareness Community)

That’s a lot, isn’t it? And a lot of those people also use the web. Not everyone in the same way as most do though.

Have you ever used a screen reader? Or heard of the term at all? A screen reader is a tool used to have the content of your screen read out for you. They are usually used by people who have issues reading what’s presented – either because they cannot distinguish between what’s written and the background because of bad contrasts, because fonts that are too small or just because they can not read or see at all.
For anyone who is interested how it works there is a lot of material on youtube, like this video by the SLCC Universal Access channel. If you have the time you should also try it out yourself, there are a lot of free tools out in the www.

In order to make this all possible there are guidelines provided by the w3, which cover:

  • Web Content Accessibility Guidelines (WCAG) – how to make web content accessible
  • Authoring Tool Accessibility Guidelines (ATAG) – make authoring tools accessible
  • User Agent Accessibility Guidelines (UAAG) – make user agents accessible
  • Accessible Rich Internet Applications Suite (ARIA) – make web content and web applications accessible

For all of the (web) developers reading this, those are definitely worth a read! Sticking to those standards makes the web more accessible for everyone, and that’s what everyone should strive for, right?

For people who have difficulties with contrasts, there are standards set by the w3 and also high-contrast ‚themes‘ available for some tools.

People affected by some form of colour vision deficiency there are colour blind variations in some tools – often times they are just being overlooked though. I have some pictures for you, that aim to visualise the most common kinds of colour vision:

colours with different simulated vision impairments

I used ‚Color Oracle‘ for the simulated colours.

There is also a more detailed blogpost on icinga.com about our new ‚colour blind‘ theme in Icinga Web 2.

Feu Mourek
Feu Mourek
Developer Advocate

Feu verbrachte seine Kindheit im schönen Steigerwald, bevor es sich aufmachte die Welt zu Erkunden. Seit September 2016 unterstützt es Icinga zunächst als Developer und seit 2020 als Developer Advocate, und NETWAYS als Git und GitLab Trainer. Seine Freizeit verbringt es hauptsächlich damit Video-, und Pen and Paper Rollenspiele zu spielen, sich Häuser zu designen (die es sich nie leisten können wird) oder ganz lässig mit seinem Cabrio durch die Gegend zu düsen.

Icinga Web 2 – Barrierefreiheit im HTML

Nachdem der Kollege Johannes Meyer letztens über die Barrierefreiheit im Icinga Web 2 (Icinga Web 2 – Das kann Jeder) schon berichtet hat, so würde ich gerne ein paar Beispiele auf der HTML Ebene aufzeigen, was nun barrierefrei ist und was nicht.
Ein klassischer Fall sind die IMG Tags, viele bieten keine Text-Alternativen an, somit ist z.B. jemandem mit einer Sehbehinderung nicht klar, was da auf dem Bild drauf ist oder was es repräsentieren soll.
Falsch: <img src="xyz.jpg" />
Richtig: <img src="xyz.jpg" alt="Icinga Web 2 Logo" />
Perfekt: <img src="icinga_web2_logo.jpg" alt="Icinga Web 2 Logo" />
Und wenn wir auf das Thema Semantik angehen wollen, so ist z.B. allein durch die Schriftgröße nicht sichergestellt ob es sich um eine Überschrift handelt oder nicht.
Falsch: <span style="font-size: 150%;">Überschrift</span>
Richtig: <h1>Überschrift</h1>
Wie gesagt, das sind jetzt nur ein paar Beispiele und es gibt noch viele weitere Sachen wie man etwas macht und nicht macht um die Barrierefreiheit zu verbessern bzw. zu gewährleisten und genau um solche Sachen und viele weitere kümmern wir uns gerade.

Icinga Web 2 – Das kann Jeder

Das letzte mal habe ich zur Internationalisierung in Icinga Web 2 ein wenig aus dem Nähkästchen geplaudert. Heute widme ich mich einem ähnlichen, allerdings ungleich weniger beachtetem Thema:

Barrierefreiheit

Gerade im Bereich Open Source ist es nicht selten, dass Software nicht oder erst weit nach dem erstmaligen produktiven Einsatz, angesichts dem immer weiter zunehmenden Interesse und der Integration benachteiligter Individuen, überarbeitet oder erweitert wird. Zumeist liegt dies am Entwicklungsmodell. Jemand benötigt etwas oder ist unzufrieden mit den bereits existierenden Lösungen, entwickelt seine eigene Lösung und macht diese der Öffentlichkeit zugänglich welche dann durch interessierte Nutzer erweitert werden kann. In der Mehrzahl solcher Gegebenheiten ist die Zahl der tatsächlichen Anwender meist nicht oder nur bedingt absehbar, weshalb die Barrierefreiheit nicht berücksichtigt wird.
In Projekten, die von großen Unternehmen entwickelt oder in Auftrag gegeben werden, besteht allerdings meist ein spezielles Interesse an diesem Thema. Das Produkt muss entweder aus Vertrieblichen Gründen oder aus vorgeschriebenen Unternehmens-Richtlinien vollständig Barrierefrei sein, bevor es verkauft bzw. produktiv eingesetzt werden darf. Da vor einiger Zeit ein großes deutsches Unternehmen an uns heran getreten ist, wird sich das Team Web die nächsten Wochen vermehrt damit beschäftigen, Icinga Web 2 bis nur finalen Version Barrierefrei zu gestalten.
Wir werden uns an zwei bestimmten Standards orientieren, sie jedoch nicht in Gänze erfüllen. Gerade der „WCAG“ Standard beschreibt sehr viele Anforderungen, dessen Aufwand sehr hoch, die Relevanz für Icinga Web 2 wir jedoch entweder zu gering oder noch nicht einschätzen können.
Web Content Accessibility Guidelines (WCAG) sowie Teile der ISO 9241
Diese beiden Standards beschreiben die Grundzüge der Barrierefreiheit in modernen Web-Applikationen sowie die Anforderungen an eine erfolgreiche Interaktion zwischen Mensch und Maschine:

  • Farben & Kontraste
  • Dialoge
  • Bedienung
  • Navigation
  • Lesbarkeit
  • Verständlichkeit

Accessible Rich Internet Applications Suite (ARIA)
Dieser Standard erweitert HTML, sodass Bildschrimleser fehlerfrei innerhalb der Web-Applikation navigieren können und erweiterte Funktionen die sonst nur mit der Maus zugänglich wären, auch über die Tastatur vollständig nutzbar zu machen.
Außerdem werden wir sicherstellen, HTML auch semantisch korrekt zu verwenden. Das allseits beliebte <div> steht somit ganz oben auf dem Prüfstand.
Am Ende werden viele Verbesserungen direkt in das Framework eingepflegt worden sein, doch alle Anpassungen, die Icinga Web 2 in seiner grafischen Funktionalität bzw. der Vielfalt der Bedien-Elemente beschränken, werden mittels eines dedizierten Moduls realisiert.
Sobald alles fertig ist, kann sich niemand mehr raus reden, er habe die vielen kritischen, tief roten Anzeigen übersehen. Die sieht doch selbst ein Blinder, im wahrsten Sinne des Wortes. 😀

Johannes Meyer
Johannes Meyer
Lead Developer

Johannes ist seit 2011 bei uns und inzwischen, seit er 2014 die Ausbildung abgeschlossen hat, als Lead Developer für Icinga Web 2, Icinga DB Web sowie alle möglichen anderen Module und Bibliotheken im Web Bereich zuständig. Arbeitet er gerade mal nicht, macht er es sich bei schlechtem Wetter am liebsten zum zocken oder Filme/Serien schauen auf dem Sofa gemütlich. Passt das Wetter, geht's auch mal auf eines seiner Zweiräder. Motorisiert oder nicht.