Über barrierefreie Programmierung im Allgemeinen

Barrierefreie Web Entwicklung kriegen Sie schnell in den Griff

Oft gehört: “Es gibt so viel über barrierefreien Code zu lernen, ich weiß gar nicht, wo ich anfangen soll.”

Machen Sie sich keine Sorgen! Sie müssen nicht den Inhalt von Dutzenden Lehrbüchern auswendig lernen. Sie werden lernen, sich die richtigen Fragen zu stellen, wenn Sie eine Website oder einen Webshop erstellen. Die Routine in der Verwendung des richtigen Codes kommt mit der Erfahrung.

Zwei sich diagonal überschneidende Wireframe-Illustrationen mit HTML-Elementen. Auf der linken Seite ist ein Beispiel dafür, wie man es nicht machen sollte, angezeigt durch eine rote Hand mit dem Daumen nach unten. Auf der rechten Seite ist ein Beispiel für die korrekten semantischen HTML-Elemente. Dies wird durch eine grüne Hand mit einem Daumen nach oben angezeigt.

Wenn sowohl die Programmierer als auch die Webdesigner die Barrierefreiheit im Blick haben, seid Ihr ein Gewinnerteam!

Wenn es aussieht wie eine Ente, schwimmt wie eine Ente und quakt wie eine Ente, dann ist es wahrscheinlich eine Ente. Aber wenn es um die Barrierefreiheit im Web geht, ist es oft nicht wirklich eine Ente.

Für jemanden, der auf unterstützende Technologien, zum Beispiel Tastaturnavigation und/oder Screenreader angewiesen ist, schwimmt und quakt die besagte Ente nicht auf dieselbe Weise wie für Sie.

Unter der Haube beginnt eine barrierefreie Website mit sauberem, semantischem HTML

Es geht um die Basics. Frameworks sind eine wunderbare Sache. Dabei wird der Basis – den semantischen HTML5-Elementen – von den Entwicklern, die diese Frameworks verwenden, leicht vergessen. Ich würde sogar die Behauptung wagen, dass die jüngere Generation von Frontend-Entwicklern unbewusst nur unzureichend über semantische Elemente informiert ist. Das lässt sich schnell beheben.

Der Besucher kann nicht durch das Menü blättern, weil er nicht sehen kann, wo er sich befindet.

Das passiert, wenn der Fokus und der Umriss absichtlich auf Null oder none gesetzt wurden.
Ich meine die blauen Linien um Links und Elemente, die den Fokus erhalten können. Zum Beispiel Links, die als Schaltflächen gestaltet sind, Bilder, die mit einer bestimmten Stelle verlinkt sind, usw.

Es gibt eine Möglichkeit, diese Linien so zu gestalten, dass sie mit Ihrem Design harmonieren! Das Entfernen des Fokus vertreibt viele Besucher von Ihrer Website. Und zwar nicht nur diejenigen, die ständig auf Hilfsmittel angewiesen sind.

Haben Sie schon einmal versucht, mit der Tastatur durch Ihre Website zu navigieren, weil Ihre Maus kaputt war?

Der Link in der CTA erscheint nicht in der Linkliste eines Screenreaders

Das passiert, wenn ein Link in ein Button-Element verpackt ist.

Das ist an sich schon schlecht, aber es ist auch eine verpasste Verkaufschance, wenn dieser Link zu einer Produktseite führt.

Wenn Sie einen Link in ein Element packen, das nicht für einen normalen Link vorgesehen ist, wie z.B. ein div, dem die Rolle einer Schaltfläche zugewiesen wurde (role=”button”), kann dies passieren.

Der Kunde kann nicht bezahlen, weil das Formular an der Kasse immer wieder Fehler ausgibt, die nicht behoben werden können

Wenn die Fehlermeldung entweder unklar ist oder nicht richtig angekündigt wird, hauen Sie zum Beispiel jemandem die Tür vor der Nase zu.

Dabei ist es eigentlich gar nicht so schwer, gute Fehlermeldungen zu erstellen, indem Sie native HTML-Elemente verwenden und programmatische Beschriftungen einfügen.

Aufschlüsseln vereinfacht es

Wenn du erst einmal verstanden hast, wo die Rolle des Designers endet und deine Rolle beginnt und wo ihr einander in euren Prozessen unterstützen könnt, ist es überraschend einfach, ein barrierefreies Design in barrierefreie Funktionalitäten umzusetzen. Ehe du dich versiehst, wird es dir zur zweiten Natur werden.