Beratung für barrierefreies Coding

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 von 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. Links das Beispiel, wie man es nicht machen sollte, gekennzeichnet durch eine rote Hand mit dem Daumen nach unten. Rechts sehen Sie ein Beispiel für die richtigen semantischen HTML-Elemente. Diese ist durch eine grüne Hand mit erhobenem Daumen gekennzeichnet.

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 wie zum Beispiel Tastaturnavigation und/oder Screen Reader 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.

“Mach mal die blaue Linien weg”

Diese Anfrage ist ein Klassiker. Im ersten Beispiel unten erfahren Sie, warum. Die Beispiele unten sind übrigens meist in Fachchinesisch. Wenn Sie möchten, dass ich Ihnen das in der Umgangssprache erkläre, zögern Sie nicht, ein kostenloses Einführungsgespräch mit mir zu vereinbaren.

Buchen Sie ein
kostenloses Einführungsgespräch

Der Link führt Sie zu meiner Calendly-Seite. Wenn Sie unverhofft Probleme mit der Terminplanung haben, schicken Sie mir bitte eine E-Mail.

Termin direkt buchen

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.