Im Jahr 2022 hat sich die Barrierefreiheit zu einem immer wichtigeren Thema entwickelt. Mit der Einführung zahlreicher neuer Vorschriften zur Barrierefreiheit wird das Internet zwangsläufig freundlicher für Nutzer mit Beeinträchtigungen werden. Und das Ziel dieser Blogserie ist es, Ihnen dabei zu helfen, sich der Familie der barrierefreien Weblösungen anzuschließen.
Wenn Sie unseren vorigen Beitrag über Barrierefreiheit gelesen haben, wissen Sie jetzt, wie Sie einfache Barrierefreiheits-Elemente hinzufügen können, die eine sichtbare Wirkung entfalten können (Wortspiel beabsichtigt).
Dieses Mal nehme ich Sie mit auf eine Reise durch einige der größten Barrierefreiheitssünden im Internet - alte und neue. Einige sind längst verschwunden, andere verfolgen noch immer Internetnutzer, die auf Barrierefreiheit angewiesen sind. Viele von ihnen haben das Internet für immer verändert - aber alle waren (sind) ein Horror für Menschen mit Behinderungen.
Lassen Sie uns gleich loslegen. Der erste Platz auf der Liste führt uns in die bunten 80er Jahre.
Denn leider waren vor einem Jahr noch 98% der Webseiten nicht zugänglich.
Animierte GIF-Banner
GIFs waren einer der Pioniere bei der Unterstützung von Dateitransparenz. Sie ermöglichten es, Animationen einfach hinzuzufügen - als winzige Dateien. Diese großartige Eigenschaft entpuppte sich jedoch schnell als ein Problem.
Webentwickler begannen, GIF-Dateien übermäßig zu verwenden, um Leerräume auf ihren Websites auszugleichen. Und das Ergebnis war in der Regel weder zugänglich noch responsiv.
Da GIFs so einfach zu verwenden sind, wurden sie schnell zu einem beliebten Werbeformat. Sie waren allgegenwärtig; ich bin mir sicher, dass Sie vor ein paar Jahren (täglich) über Hunderte von ihnen gestolpert sind. Da GIFs jedoch nur 256 Farben in einer Datei unterstützten, sahen sie auf hochauflösenden Bildschirmen (die schon damals ein Marktstandard waren) hässlich aus.
Dieses Problem hat Werbetreibende und Webentwickler nicht davon abgehalten, ihre Plattformen mit allen möglichen GIF-Bannern vollzupacken. Heute würden diese GIFs zumindest gegen einige WCAG-Richtlinien verstoßen.
GIFs können jedoch tatsächlich ein zugängliches Website-Element sein - aber sie müssen einige WCAG-Regeln befolgen:
- 1.1.1 Nicht-Text-Inhalt
- 1.4.1 Verwendung von Farbe
- 1.4.3 Kontrast (Minimum)
- 1.4.5 Bilder von Text
- 2.2.1 Timing einstellbar
- 2.2.2 Pause, Stopp, Ausblenden
Aber da diese Richtlinien GIF-Animationen in statische Bilder umwandeln, ist dieses Format heute nicht mehr populär. (Oder besser gesagt, es ist es - aber nur als Meme).
Macromedia (Adobe) Flash
Flash wurde 1996 entwickelt, um skalierbare, interaktive Bilder und Animationen erstellen zu können. Es war weit verbreitet; einige nutzten es, um ganze Webanwendungen zu schreiben. Sogar YouTube nutzte es - um Videos auf der Plattform anzusehen, benötigten Sie Flash.
Doch im vergangenen Januar wurde das allgegenwärtige Flash nach 24 Jahren endgültig abgeschafft. Für Nicht-Techniker überraschend, hatte die Technologie einige große Schwachstellen.
- Zunächst war Flash alles andere als zugänglich. Nach einiger Zeit begann Adobe schließlich, die Unterstützung für Barrierefreiheit hinzuzufügen, aber es war zu spät. Die Branche, die daran gewöhnt war, Lösungen wie bisher zu entwickeln, nahm die Zugänglichkeitsoptionen nicht an.
- Außerdem war Flash nicht sehr kompatibel. So stürzte Firefox bei Websites, die Flash enthielten, immer wieder ab - auch wenn es sich dabei nur um kleine Elemente handelte.
- Schließlich hatte die Technologie auch einige Sicherheitsprobleme. Der Stecker musste praktisch jeden Monat gepatcht werden.
SVG und Font Awesome
Die beiden Hauptnachfolger von Flash - Scalable Vector Graphics und Font Awesome - sind großartig, wenn es um skalierbare Grafiken und Icons geht. Sie bringen jedoch eine schwierige Herausforderung für die Zugänglichkeit mit sich.
Wenn nicht Teil von Stil aber direkt in den HTML-Code eingefügt, werden sie nicht zugänglich. In beiden Fällen sind ARIA-Attribute erforderlich, um Alt-Inhalte zu erzeugen. Und diesen Teil vergessen die Entwickler meist! Glücklicherweise gibt es zwei nützliche Dokumente, die Ihnen helfen können: Font Awesome Barrierefreiheit undBarrierefreies SVG.
Captcha
Captcha-Bilder sind wohl das größte Problem bei der Barrierefreiheit im Internet und eignen sich nicht nur hervorragend, um Bots fernzuhalten, sondern auch Menschen mit Behinderungen.
Diese Funktion wurde 1997 entwickelt, um zu überprüfen, ob die Person, die eine Webformel ausfüllt, ein Mensch oder nur eine KI ist (sogenannter Turing-Test). Gleichzeitig wurden sie aber auch zu einer unüberwindbaren Herausforderung für bestimmte Benutzer - zum Beispiel für Menschen mit Sehschwäche.
Bildschirmleser sind keine Hilfe - sie können keinen Text auf Bildern erkennen. Um dieses Problem zu lösen, wurde ein Sprachcaptcha eingeführt. Leider funktioniert es nur auf Englisch - was es für viele, viele Menschen unbrauchbar macht.
Gegenwärtig gibt reCAPTCHA 3 Hoffnung für die Zukunft - denn zum jetzigen Zeitpunkt ist keine Captcha-Lösung vollständig zugänglich.
E-Mail-Software
Das Erstellen und Versenden von bildreichen Nachrichten wurde populär, sobald E-Mail-Software begann, HTML-Dokumente zu interpretieren. Derzeit schreiben die Standards für Barrierefreiheit vor, dass Mails klar und verständlich sein müssen. E-Mail-Software - wie z.B. Microsoft Outlook - macht dies jedoch nicht gerade einfach.
Haben Sie schon einmal versucht, eine E-Mail-Vorlage zu erstellen, die nicht nur responsive ist, sondern auch den WCAG-Richtlinien entspricht? Wenn nicht - viel Glück! Sie werden nicht nur gezwungen sein, das alte HTML 4.01 zu verwenden - die E-Mail muss auch als... Tabelle erstellt werden (was gegen die WCAG-Richtlinien verstößt). Und das ist nur die Spitze des Eisbergs.
Selbst das neueste Office 365 oder 2021-Paket ist nicht in der Lage, eine barrierefreie, auf HTML5 basierende E-Mail anzuzeigen.
Platzhalter
Meine persönlichen Anti-Barrierefreiheits-Champions. Platzhalter gibt es seit Anbeginn der Zeit (oder besser gesagt, des Internets), und da sie einfach zu entwerfen und zu implementieren sind, werden sie häufig (über)genutzt.
Was macht sie so unzugänglich?
- Erstens sollten Platzhalter keine Alternative zu einer Beschreibung sein - andernfalls werden sie von Screenreadern als Inhalt angesehen (auch wenn noch nichts eingefügt wurde).
- Ein Platzhalter verschwindet, sobald der Benutzer mit dem Schreiben beginnt - er verliert also die Anweisung.
- Der Standardstil bietet nicht den minimalen Kontrast für Text unter 18px.
- Die Schriftart des Platzhalters ist klein, so dass sie schwer zu lesen ist. Ein Platzhalter wird nicht automatisch von einer Übersetzungssoftware übersetzt.
- Und schließlich sagen Top-Designservices wie Smashing Magazine oder Nilsen Normal Group - verwenden Sie keine Platzhalter.
Parallaxe
Der erste Parallaxen-Effekt wurde im Jahr 2007 entwickelt, aber die Technologie wurde erst in der Ära von HTML5 und CSS3 populär.
Animierte Hintergründe auf Webseiten ermöglichten es, Webseiten einen einzigartigen Charakter zu verleihen. Auch heute noch sind Parallaxen visuell ansprechend - allerdings nicht ohne Auswirkungen auf die Zugänglichkeit.
Vor allem aber können Parallaxen Menschen betreffen, die an einer vestibulären Neuritis leiden. Insbesondere können sie anhaltenden Schwindel verursachen. Deshalb ist es nicht empfehlenswert, Websites mit Parallaxen zu versehen. Die WCAG-Anforderung 2.3.3: Animation von Interaktionen besagt dies sogar direkt.
Lesen Sie mehr, lernen Sie mehr, und... mehr!
Call-to-Action-Schaltflächen können zugänglich sein, wenn sie richtig kodiert sind. Das ist jedoch oft nicht der Fall und verursacht Probleme für Menschen, die Bildschirmlesegeräte verwenden.
Leider werden diese Schaltflächen oft ohne den richtigen Kontext eingefügt. Infolgedessen sind Screenreader nicht in der Lage, die Idee hinter Aufrufen zum Handeln und Textkorrelationen darzustellen. Das ist natürlich nicht ideal für Menschen mit Sehschwäche.
Glücklicherweise sind die ARIA-Attribute bereit zu helfen. Aber da sie noch nicht allgemein bekannt sind, sind sie auch kein perfektes Allheilmittel für die Barrierefreiheit.
ARIA
ARIA ist vor allem dort hilfreich, wo es an Codesemantik mangelt. Es ermöglicht unterstützenden Technologien zu verstehen, wozu ein bestimmtes Element auf einer Website dient.
ARIA selbst ist kein Problem für die Zugänglichkeit. Theoretisch ist es eine Lösung, die Zugänglichkeitsprobleme einschränkt oder Zugänglichkeitselemente hinzufügt, wo HTML dies nicht kann. Aber...
Jemand sagte einmal, wenn es ARIA nicht gäbe, gäbe es auch viele Probleme mit der Barrierefreiheit nicht. Leider ist eine falsche Verwendung von ARIA noch schlimmer als ein Fehlen von ARIA.
Wenn Sie sich also nicht mit ARIA auskennen, sollten Sie es nicht verwenden. Stattdessen - lesen Sie dies WAI-Tutorial zur Verwendung von ARIA.
CMS - Inhaltsverwaltungssysteme
Content Management Systeme sind keine gute Umgebung für Barrierefreiheit. Dafür gibt es viele Gründe - wie Kosten, Benutzerfreundlichkeit und Arbeitsgeschwindigkeit. Oft werden Content Management Systeme in sehr einfachen Formen veröffentlicht und später um weitere Funktionen ergänzt.
Leider umfasst dies nicht die Standards für Barrierefreiheit. Barrierefreiheit ist kein Plugin, das nachträglich hinzugefügt werden kann. Wenn ein CMS nicht von Anfang an auf Barrierefreiheit ausgelegt ist - bevor Daten eingefügt werden - wird es höchstwahrscheinlich nie barrierefrei werden. Es wäre ein unglaublicher Aufwand, dies zu erreichen, was oft den geschäftlichen Prioritäten zuwiderläuft.
Im Jahr 2021 war keines der CMS-Systeme, die ich gesehen habe, mit den WCAG 2.1 konform. Ich hoffe, dass die Zukunft eine deutliche Veränderung bringen wird.
Anklickbare Divs
Im Zeitalter von Programmier-Frameworks, statischen Code-Analysen, Validatoren und anderen Tools sollten Zugänglichkeitsprobleme in dieser Hinsicht so gut wie nicht mehr vorhanden sein. Aber, wie Sie wahrscheinlich schon vermutet haben, gibt es alles andere als das.
So können Sie zum Beispiel immer noch über HTML-Code stolpern, wie eine div Tag mit onClick(), der kein Link ist, sondern nur eine Simulation eines solchen Links oder einer Schaltfläche. In diesem Beispiel, div oder span sind keine fokussierbaren Elemente, so dass sie niemals zugänglich sind.
Natürlich können Sie sich mit ARIA und anderen HTML5-Attributen wirklich Mühe geben und diese Elemente zugänglich machen. Aber warum sollten Sie sich die Mühe machen, wenn Sie es auch nach Vorschrift machen können?
In diesem Fall ist die div selbst ist nicht das Problem. Das Problem liegt in der Art zu denken - Abkürzungen zu nehmen.
Fazit
Waren Sie von einigen der Beispiele in dieser Liste überrascht? Einige von ihnen sind recht beliebt. Heißt das, dass Sie sie verwenden sollten?
Nicht unbedingt.
Der entscheidende erste Schritt erfordert ein größeres Bewusstsein. Wenn Sie einige der Zugänglichkeitsprobleme in den wichtigsten Tools oder Lösungen verstehen, können Sie zumindest versuchen, deren Auswirkungen zu begrenzen. Und mit ein wenig Glück machen Sie den digitalen Raum zumindest ein bisschen freundlicher für Menschen, die auf Barrierefreiheit angewiesen sind.
Contact