Ja, "fancy" kann jeder...

Mixen Sie einfach die tollsten 28 Effekte zusammen, die Sie im Internet so gefunden haben. Dann sind sie schon "fancy", aber tatsächlich haben Sie wohl beim Design der Webseite eher ausgelassen als etwas gewonnen... Barrierefreies Webdesign ist nicht nur eine qualitativ anspruchsvolle Design-Grundlage, es führt auch zu mehr Erfolg und es muss überhaupt nicht "langweilig" aussehen.

Ein Gerücht über Accessibility

Hartnäckig hält sich ein Gerücht über das Thema "Barrierefreiheit" bzw. "Zugänglichkeit" (nebenbei gesagt ja eigentlich der Begriff, den man im Englischen damit meint). Es besagt, dass man barrierfreie Webseiten nur machen kann, wenn man auf Design verzichtet. Das ist natürlich nicht so. Aber barrierefreiheit zwingt einen zu vernünftigem Design, das ist schon so.

Das Imageproblem von barrierefreien Seiten ist bei den meisten Agenturkunden immer noch ein wenig, dass man wegen einem Gesetz bzw. wegen ein paar wenigen betroffenen Menschen jetzt auf tolle Designs verzichten müsste, die man doch so gerne hätte, weil sie marketingtechnisch so wirksam wären.

Barrierefrei ist Zugänglich und Nutzbar.

Und mit "Zugänglich" (Accessible) und "Nutzbar" (Usable) sind die beiden Begriffe Accessibility und Usability auch schon miteinander verknüpft. Wenn Sie im Netz erfolgreich ein Business starten, Ihr Unternehmen präsentieren wollen - dann sorgen Sie dafür, dass Ihre Webseite zugänglich ist und benutzbar.

Tatsache ist eher: Diese tollen Dinge sind marketingtechnisch nicht wirksam. Gar nicht. Sie stören auch nicht betroffene User und sind ein Ärgernis. Oder halten Sie auch Ihre Geschäftstür mit 45 cm Breite, wo Menschen mit Rollstuhl oder Kinderwagen nicht mehr durch können, für marketingtechnisch wirksam? Ja, wenn Sie als ewiggestriger Restaurantbesitzer keine "Behinderten" und keine kleinen Kinder bei sich haben wollen und Ihre übrigen Gäste das zu schätzen wissen... dann schreiben Sie das aber bitte auch auf Ihre Webseite und wir helfen Ihnen hier schon mal mit der englischen Übersetzung für die Überschrift auf Ihrer Startseite:
"This website is adult-only and free of people with special needs or foreigners."

Kleiner Tipp: Sie haben zusätzlich die Chance, dass Ihre Webseite generell "free of any people" ist... weil Sie mit Nicht-Barrierfrei auch gleich mal Ihre Suchmaschinen-Optimierung meistens in den Sand setzen.

Man muss dafür nicht auf die Optik verzichten. Es sind aber ein paar Dinge, die man nicht tun sollte. Beispielsweise selbst laufende Animationen mit Texten. Text und Inhalt bewegt sich, wenn der Nutzer das verlangt und steuert - nicht ohne sein Zutun. Denn dann kann der Nutzer auch entscheiden wie schnell es sich bewegt. Wie langsam oder schnell er lesen kann und wie gut oder schlecht er lesen kann. Von Kindern über Ausländer bis zu Leuten aus vielleicht niedrigeren Bildungsschichten aber auch Leuten, die einfach gerade mehr machen - möglicherweise ein wenig abgelenkt sind. Die Zugänglichkeit schaffen Sie, wenn Sie dem Nutzer die Kontrolle darüber geben. Niemand käme auf die Idee eine Tür zum Geschäft so zu konstruieren, dass sie 5 Sekunden geöffnet ist und dann 5 Sekunden geschlossen ist und sich dann wieder öffnet und dann wieder schließt... ein Gutteil der Kunden hätte Probleme mit solchen Türen. Die abgeschächte Form dieser Türkonstruktion kennen die meisten Menschen aus größeren Geschäften, es ist die aus drei oder vier Flügeln bestehende Drehtür bei der man gezwungen ist sich an den Takt zu halten und dann drin in der Tür - also im Kreisel - ein bestimmtes Tempo zu gehen.

Um ein Zitat des EU-Ratspräsidenten Donald Tusk rund um den #BREXIT zu entfremden: Man fragt sich, welcher Platz in der Hölle wohl für den Erfinder dieser Türen reserviert wurde...

Designanforderungen für Zugänglichkeit

Abgesehen von der Erfüllung von Mindeststandards in Sachen Farbkontrast bei Vordergrund und Hintergrund - wo man sich im absoluten Notfall noch mit Kontrastschaltern wie etwa dem barrierfreien Featureset easy2see (Externe Webseite) behelfen kann, wenn diese dann auch richtig eingesetzt sind.

Außerdem müssen natürlich entsprechend die Elemente in einer Größe sein, sodass sie nicht nur der geübteste Maus-Benutzer erreichen kann und anklicken kann. Selbiges gilt aber ohnehin inzwischen ganz generell, weil sonst auch die Bedienung einer Webseite auf einem Touchscreen egal ob Tablet, Smartphone oder ein sonstiges Device, darunter leiden würde. (Sie merken auch hier, dass Accessibility und Usability sich gegenseitig in die Hände spielen...) Und natürlich ist auch wichtig, dass die "Reihenfolge" im Inhalt stimmt und eventuelle Querverweise nicht auf optische Kriteren gehen. Auf diese Kriterien für barrierfreie Internetseiten gehen wir jetzt noch genauer in diesem Thema ein.

Thema fertiglesen...

Alles rund um barrierefreie Internetseiten

Barrierfreie Webseite - mit Farbkontrasten

(c) videomar.at

Farbversionen?

Die Idee ist nicht, dass man eine nicht barrierefreie Webseite macht und dann Farbkontraste benutzt um sie doch noch barrierefrei zu bekommen - es geht um mehr und das mit einem anderen Hintergedanken.

Farbkontraste

Wie Blinde das Web nutzen?

(c) videomar.at

Blinde Internet-Nutzer

Die Audioausgabe ist manchmal nervig, vor allem kann sie in einem Büro stören, weil dann viele Stimmen durcheinander sprechen. Mit der Braille-Zeile kann man aber auch im Internet unterwegs sein.

Web in Braille-Schrift

Suchmaschinen sind blind!

(c) videomar.at

SEO Barrierefrei?

Zum Thema Barrierefreie Internetseiten: Acuh Suchmaschinen sind blind, sie können nichts mit Richtungsangaben anfagen und benötigen ein funktionierendes HTML-Markup. Es hilft Ihnen, wenn es barrierfrei ist.

Optimieren für Suchmaschinen

Eine Barrierefreie Seite ist nicht altbacken!

(c) Pereanu Sebastian on Unsplash

Altbacken weil Barrierefrei?

Nein, barrierefreie Webseiten sind nicht altbacken. Sie müssen nicht daherkommen, wie eine Schreibmaschine neben einem Smartphone, denn barrierefreie Webseiten sind durchaus auch modern. Überzeugen Sie sich.

Keine Angst!

Farbkontraste im barrierefreien Web

Es gibt etliche Berechnungs-Tools um zu überprüfen, ob ein Farbkontrast zwischen Hintergrund und Vordergrund (gemeint ist die Farbe der Schrift oder des Bedienungselementes) ausreichend ist. Bei Schrift-Farben kommen die "Kontrast-Verhältnisse" leider nicht 1:1 aus dem jeweiligen Hexadezimal-Code, sondern sind sehr unterschiedlich. Lesen Sie im Segment "Farbkontaste für barrierefreie Internetseiten" dazu mehr.

Elemente und ihre Größe

Wie groß muss ein Element sein um nutzbar zu sein? Eine Grundregel könnte lauten, dass Sie auf einem Smartphone zumindest mit dem kleinen Finger flächendeckend darauf drücken können und auf einem Tablet oder auf dem Desktop (wenn es denn ein Touchscreen wäre) mit dem Daumen die Fläche zudecken können ohne dabei ein anderes Steuerungselement zu erwischen. Wenn die Steuerungselemente weit genug auseinander liegen, sind auch kleinere Buttons kein grobes Problem.

Reihenfolge und Querverweise

Ein spannendes Themengebiet, denn hier passieren immer noch Fehler. Hintergrund ist meistens ein zu "layoutorientiertes Denken" bei der Erstellung von Inhalt. Ein Online-Redakteur schreibt einen Text und verweist darauf dass man den Newsletter der Webseite mit dem Button rechts vom Text bestellen kann. Der Button ist aber gar nicht rechts vom Text sondern in Wahrheit bei 50 % der Nutzer, die inzwischen mit dem Smartphone die Seite aufrufen, unterhalb des Textes. Und auf vielen Nachrichtenportalen, die mit klassischen Print-Medien zusammengespielt sind, werden Sie oft die Erfahrung machen, dass dort steht: "Siehe Infokasten rechts". Der Infokasten ist aber auch nicht dort, wo er zu sein scheint. Zumindest nicht, wenn man die Seite responsive gebaut hat und daher die Seite mobil anders dargestellt wird.

Und auch die Angabe, dass man diese Zusatzinformation in der blauen Spalte findet oder in der roten Informationsbox ist nur dann richtig, wenn das Endgerät ein Farbmonitor ist und der Leser garantiert nicht farbenblind - nur das wissen Sie ja nicht, weil Sie darauf keinen Einfluss haben.

Wie verweist man richtig?

Lassen Sie sich von der Agentur, die für Sie eine Webseite erstellt, in eine Webseite sogenannte "Sprungmarken" einbauen. Das macht die Sache am besten und am sinnvollsten. Sie verlinken zur "Newsletter"-Bestellung per Sprungmarke auf der Webseite. So wie auf dieser Seite der Button "Thema weiterlesen..." funktioniert. Dann ist es völlig egal, wo die Webseite je nach Endgerät die Elemente anordnet.

... <a href="#newsletter">Newsletter-Bestellung</a> ...
... <div id="newsletter">
Bestellung des Newsletters
Formular: E-Mail-Adresse ...
</div> ...

Wenn Sie zusätzlich nicht den Fehler machen, dass Sie künstlich die Einrahmung unterdrücken, wird es für Ihre User noch leichter, weil der Browser dann auch die Zone highlighten kann, auf die er verwiesen wurde. Ob dieses Element mit dem ID "newsletter" nun rechts, links, oben oder unten auf dem Bildschirm ist, ist ganz egal. Wer auf den Link "Newsletter-Bestellung" drückt, wird vom Browser automatisch hingeführt. Zumeist sind das ohnehin fixe Elemente, die per Content-Management-System hinterlegt werden, daher kann man auch diese IDs von der Agentur einbauen lassen.

Startseite Inhaltsverzeichnis

Links zu digitalen Angeboten

Einladungsmanagement und Gästelistenmanagement
Einladungsmanagement

Einladungsmanagement und Gästelisten verwalten auf ganz einfache Art und Weise mit einem professionellen Tool. Keine Software muss installiert werden, einzig und allein ein Webbrowser genügt.

Einladungsmanagement

Brillen, Kontaktlinsen, Augenlaser-Technik
Sehen oder nicht sehen?

Augenkrankheiten, Brillen, Kontaktlinsen und auch Augenlaser-Technik, diesen Themen widmet sich die Online-Präsenz DER DURCHBLICK. Hier geht es auch um Barrierefreiheit von Webseiten im Netz.

Der Durchblick