Barrierefreiheit mit WordPress – Anleitung

Mein Blog basiert auf einem System, das sich WordPress nennt. Da mir Accessibility bei Webseiten ebenfalls ein großes Anliegen ist, habe ich natürlich auch bei meinem Blog darauf geachtet, dass alles barrierefrei ist. Wie Accessibility mit WordPress funktioniert, verrate ich in diesem Artikel.

Bevor ich zum Thema Barrierefreiheit (auf englisch Accessibility) mit WordPress komme, muss ich kurz die Grundlagen von WordPress erklären. WordPress ist eine Blogsoftware. Ein Blog ist eine spezielle Form einer Internetseite auf dem Artikel geschrieben werden. Es müssen nicht zwingend Fachartikel sein. Es kann auch ein „öffentliches“ Tagebuch geführt werden, es kann über Lebensfreude geschrieben werden oder ein anderes Thema. Es gibt auch Blogger (=Autoren von Blogartikeln) die Ihre Leser darüber informieren wieviel neue Kontakte sie auf der Social Media Plattform Xing gesammelt haben.

In meinem Blog finden Sie hauptsächlich Fachartikel über Accessibility, Suchmaschinenoptimierung und Social Media. Der Blog ist wie oben schon erwähnt ein WordPress-Blog.

In WordPress können Sie Seiten und Artikel erstellen. Die Links „Home“, „Wer schreibt her?“, „Referenzen“ und „Impressum“ in meinem Blog sind Seiten. Das was ich hier schreibe ist ein Artikel.

Dann gibt es Plugins. Das sind im Prinzip kleine „Programme“ welche dem WordPress-Blog neue Funktionen spendieren. So habe ich z.B. ein Plugin für Suchmaschinenoptimierung installiert, welches mir hilft bei der Onpage-Optimierung meiner Seiten und Artikel. Leider gibt es kein Plugin, welches den kompletten Blog barrierefrei(=Accessibility) macht.

Damit Sie einen Einblick bekommen was WordPress ist und was damit gemacht werden kann, hier noch ein Youtube-Video:

Barerierefreies Webdesign – Definiton

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Barerierefreies Webdesign  bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder Accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.

Barrierefreies Webdesign – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des barrierefreien Websites erstellen, erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.

International gelten die Web Content Accessibility Guidelines wcag 2

In Deutschland gilt die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz

Wenn ich eine Webseite z. B. aus Österreich frei von Barrieren machen soll, wende ich die WCAG 2 an. Bei Seiten aus Deutschland die BITV 2.0.

Barrierefreiheit bei Websites gibt es also national und international.

Hier ein Youtube-Video über barrierefreies Webdesign von mir:

Umsetzung von Barrierefreiheit mit WordPress

Selbstverständlich werde ich hier nicht sämtliche Kriterien der Barrierefreiheit besprechen, sondern nur ein paar Tipps geben, die aber schon sehr viel bewirken können.

Für Menschen die lieber gerne Video schauen als lesen, gibt es jetzt auch ein Youtube-Video zum Thema Barrierefreiheit bei WordPress:

Um Accessibility bei WordPress umzusetzen muss man Themes bearbeiten. Noch so ein komischer Begriff. Was ist ein Theme? Ein Theme ist eine Art „Kleid“ für den Blog. Ein Theme bestimmt das Aussehen Deines Blog. Eine anderes Wort für Theme wäre „Vorlage“ oder „Template“. Es gibt sehr viele fertige Themes die kostenfrei heruntergeladen werden können. Wenn Sie mehrere Themes in Ihrem Blog installiert haben, können Sie in Sekunden das komplette Aussehen Ihres Blogs verändern! Das ist eine der vielen Stärken von WordPress.

Um Ihr Theme überhaupt bearbeiten zu können, müssen Sie den zu bearbeitenden Dateien per FTP schreibrechte geben. Erst dann können Sie überhaupt die Dateien bearbeiten. Von Haus aus sind alle Theme Dateien schreibgeschützt.

Danach gehen Sie in den Admin-Zugang Ihres WordPress-Blog und klicken auf „Design“ und danach auf „Editor“.

Skalierbare Schriftgrößen

Vor Ihren Augen öffnet sich jetzt eine Datei mit Namen „style.css“. In dieser Datei können Sie wichtige Dinge für Accessibility einstellen. Wenn Sie etwa die Schriftgröße in relative Schriftgrößen statt feste Schriftgrößen ändern möchten, dann können Sie dies in der Datei style.css ändern. Suchen Sie einfach in der Datei „style.css“ nach „font-size“ und ersetzen Sie pt oder px durch relative Angaben.

Beispiel:
font-size: 0.750em;

oder

font-size: 100%;

CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben
CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben

Die skalierbaren Schriftgrößen sind für Menschen mit Sehbehinderung wichtig, damit sie im Browser die Schrift zoomen, sprich vergrößern, können.

Der richtige Farbkontrast hilft Menschen mit Farbfehlsichtigkeit

Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht den korrekten Namen zuordnen können oder Probleme haben zwischen zwei Farben einen Unterschied zu erkennen.
Wenn Sie Hintergrundfarbe und Schriftfarbe ändern möchten um den Farbkontrast Accessibilty-Gerecht einzustellen, dann können Sie dies auch in der Datei „style.css“ ändern. Suchen Sie einfach nachdem Wort „color“. So finden Sie die Hintergrund und die Schriftfarbe. Mit dem Colour Contrast Analyser können Sie überprüfen ob der von Ihnen gewählte Farbkontrast für Menschen mit einer Farbsehschwäche in Ordnung ist.

Jedes Theme hat eine Datei mit dem Namen „header.php“ . Falls in Ihrem Theme ganz oben eine Grafik eingebaut ist, dann können Sie in der Datei header.php nachschauen ob diese Grafik einen Alternativtext hat, damit der Screenreader von blinden und Sehbehinderten Menschen entsprechende Informationen bekommt.

Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht
Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht

Alternativtexte für Bilder

Wenn Sie Bilder in Artikel und Seiten einfügen, sorgen Sie dafür, dass Ihre Bilder Alternativtexte haben. Der Dialog für Bild einfügen hat ein Eingabefeld mit der Beschriftung „Alternativtext“. Hier können Sie einen Text eingeben der dem blinden oder sehbehinderten Menschen vom Screenreader übermittelt wird.

Beispiel für Alternativtexte für Bilder mit dem alt-Attribut:

<img src="barrierefreies_webdesign_banner.jpg" alt="Firmenlogo und eine Bildschirmtastatur entwickelt von Marlem-Software" style="max-width:800px;" height="162"/>

HTML Validation

Damit die Vorlese-Software von Blinden und Sehbehinderten, Screenreader genannt, keine Probleme hat bei dem Lesen einer WordPress-Webseite muss diese HTML-Valide sein. Das bedeutet, dass die WordPress-Webseite den Standards der W3.org entsprechen muss.

Eine WordPress-Webseite W3C-Valide machen, gelingt nicht immer. Wenn Sie ein Plugin einsetzen, das Sie unbedingt benötigen, dass aber W3C-Fehler in Ihre Webseite bringt, können Sie nichts dagegen tun.

Mit dem W3C-Validator können Sie testen ob ihr HTML valide ist.

Barrierefreie Formulare

Wenn Sie in Ihre WordPress-Webseite Formulare einbauen sollten auch diese barrierefrei sein. Damit der Screenreader weiß welche Beschriftung zu welchem Eingabefeld gehört, sollten Beschriftungen mit den Eingabefeldern verknüpft sein:

<label for=“vorname“>Vorname: ([Alt]+v)
<input id=“vorname“ accesskey=“v“ maxlength=“30″ name=“Vorname“ size=“30″ type=“text“ />

Das Eingabefeld Vorname bekommt einen Label. mit „for“ im Label und „id“ im Eingabefeld werden
Eingabefeld und Label verknüpft. Das ist wichtig für Screenreader.
Mit dem Attribut „accesskey“ kann dem Eingabefeld ein Shorcut zugeordnet werden.
Die Tasten alt+v aktivieren das Eingabefeld „Vorname“, alt+n das Eingabefeld „Nachname“.
Für den Nutzer des Formulars muss es erkennbar sein, dass es die Möglichkeit von Shortcuts gibt.

Für Menschen mit einer Sehbehinderung ist es wichtig, dass es gut erkennbar sein muss, welches Bedienelement aktiv ist. Meine Lieblingslösung ist, dass die Hintergrundfarbe des aktiven Bedienelements Gelb ist. Das läßt sich wie folgt mit CSS ganz einfach lösen:

/* Mit nachstehender Zeile bekommen alle aktiven Eingabefelder und Schalter eine gelbe Hintergrundfarbe */
input:focus { background-color:yellow;}

Wenn Sie Ihre Formulare so gestalten, dann sind Ihre Formulare barrierefrei.

Eingabefehler nicht nur optisch anzeigen sondern Sätze schreiben

Oft setzen Web-Entwickler beim Feedback zum Verhalten der Webseiten-Besucher, etwa bei der Nutzung des Kontaktformulares, ausschließlich auf Farbe. Beispiel: Wird ein Pflichtfeld nicht ausgefüllt, erhält es eine rote Umrandung. Wer jedoch eine Farbenfehlsichtigkeit hat, kann damit nicht viel anfangen. Derartige Fehlermeldungen sollten Sie stets zusätzlich in Worte fassen.

WP Accessibility Plugin

Es gibt inzwischen ein Plugin, das WP Accessibility Plugin mit dem Sie bestimmte Sachen per Einstellungen in WordPress barrierefrei machen können. Folgende Einstellungen und noch mehr sind möglich mit diesem Plugin:

  • Accessibility toolbar mit Schriftvergrößerung und Kontrast-Unschalter hinzufügen.
  • Füge die Sprache der Seite und Leserichtung zum HTML-Element hinzu.
  • Zu HTML 5 Elementen ARIA landmark roles hinzufügen
  • Farbkontrast-Tester zwecks Farbenblindheit nach WCAG 2.0

Barrierefreie WordPress-Themes – gibt es das?

Bevor Sie sch die Mühe machen ihr WordPress-Theme selber barrierefrei zu programmieren oder einen Programmierer zu beauftragen, können Sie nach WordPress-Themes schauen, die schon barrierefrei sind. Auf der WordPress-Seite können Sie inzwischen nach barrierefreie Themes im Filter suchen in dem Sie in der Spalte „Funktionen“ die Option „Für Barrierefreiheit geeignet anklicken. Sie bekommen dann folgendes Suchergebnis:

Anmerkung von Markus

Ich habe diese Themes ausprobiert. Sie sind nicht 100%ig barrierefrei. Beim Theme „Twentysixteen“ müssen umfangreiche Farbanpassungen gemacht werden, damit das Theme für Menschen mit Farbenfehlsichtigkeit nutzbar ist.

Barrierefreiheit bei WordPress Testen

Ein automatisierter Test gibt es nicht. Ein Test auf Barrierefreiheit kann nur von Hand mit Hilfe von oben genannten Richtlinien erfolgen.

Barrierefreiheit mit WordPress – Schlussbemerkung

Wenn Sie diese Tipps umsetzen haben Sie einiges dafür getan, damit Menschen mit unterschiedlichen Einschränkungen den Inhalt Ihres WordPress-Blogs war nehmen können. Achja, die Suchmaschine freut sich auch über barrierefreie Blogs. Google ist blind und kann nur lesen.

Wenn Sie noch Fragen haben zur Barrierefreiheit mit WordPress dürfen Sie mich gerne Anrufen 07121/504458 oder eine Mail schreiben an info@marlem-software.de .

Barrierefreies Webdesign aus Tübingen und Umgebung von Marlem-Software

Marlem-Software bietet barrierefreies Webdesign aus Tübingen und Umgebung.

Wer im Internet erfolgreich sein möchte, muss überregional bekannt sein. Das barrierefreie Webdesign ist mir ein ganz besonderes Anliegen. Deswegen möchte ich auch in der Region Tübingen Werbung für barrierefreies Webdesign machen. Barrieren im Webdesign gibt es für blinde, für Sehbehinderte und anderes körperlich eingeschränkte Menschen. Menschen im fortgeschrittenen Alter können auch Einschränkungen im Sehen oder Hören besitzen. Barrierefreies Webdesign nimmt Rücksicht auf unterschiedliche Einschränkungen von Menschen. Aufgrund von körperlchen Beeinträchtigungen nutzen behinderte Menschen und Menschen im fortgeschrittenen Alter, das Internet mehr, als andere Menschen. Behinderte Menschen kaufen oft im Internet ein, weil viele Behinderte ohne fremde Hilfe das Haus gar nicht verlassen können. Die Wahl des Online-Shops hängt zu 100% davon ab, ob er für behinderte Menschen zugänglich(=Accessibility) ist oder nicht. Also auch bei Online-Shops spielt barrierefreies Webdesign eine wichtige Rolle! Wenn Sie aus der Region Tübingen sind und einen Online-Shop besitzen den Sie auf barrierefreies Webdesign umstellen möchten, dann sind Sie bei mir richtig.

Letztes Jahr ist die BITV 2.0 in Kraft getreten. Sie ist die gesetzliche Grundlage für barrierefreies Webdesign. Ich kenne den Inhalt der BITV 2.0 und kann Sie dementsprechend kompetent beraten.

Übrigens, auch die Suchmaschnen freuen sich sehr über Webseiten mit einem barrierefreien Webdesign. Barrierefreies Webdesign ist also eine gute Vorraussetzung für eine erfolgreiche Suchmaschinenoptimierung.

Mein Unternehmen bietet barrierefreies Webdesign aus der Region Tübingen.

Sind Sie interessiert? Dann Rufen Sie mich an: 07121/504458

Barrierefreies Webdesign in Reutlingen und Tübingen

In diesem Artikel geht es um barrierefreies Webdesign in Reutlingen und Tübingen.

Wenn Sie Ihre Internetseite ohne Barrieren für behinderte und ältere Menschen Gestalten möchten, dann nennt das „barrierefreies Webdesign„. Bei einer zunehmend älter werdenden Gesellschaft sind Menschen im fortgeschrittenen Alter eine wichtige Zielgruppe für barrierefreies Webdesign. Auch sie sind oft sehr dankbar über Webseiten die nach Richtlinien für barrierefreies Webdesign erstellt worden sind. barrierefreies Webdesign bedeutet, dass eine Internetseite auf körperliche und geistige Einschränkungen von Menschen Rücksicht nimmt. Barrierefreies Webdesign ist suchmaschinenfreundlich. Deswegen bringt barrierefreies Webdesign auch mehr Besucher.

Definiton

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Behindertengerechtes Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.

In nachstehenden Video geht es um Webdesign Reutlingen – Zugänglich und barrierefrei

Barrierefreies Webdesign für Reutlingen – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des barrierefreien Websites erstellen, erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.

International gelten die Web Content Accessibility Guidelines wcag 2 .

In Deutschland gilt die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz

Wenn ich eine Webseite z. B. aus Österreich frei von Barrieren machen soll, wende ich die WCAG 2 an. Bei Seiten aus Deutschland die BITV 2.0 .

accessibility bei Websites gibt es also national und international.

Auch in der Fachliteratur wird die Bedeutung von barrierefreies Webdesign immer wichtiger. Für mich ist barrierefreies Webdesign ein Qualitätsmerkmal.

barrierefreie Webseiten in Reutlingen und Tübingen – Testen

Es gibt noch immer keine Webseite oder Software mit der es möglich ist, eine Webseite auf Barrierefreiheit automatisiert zu testen. Die
Kriterien sind so komplex dass sie nur von einem Menschen der systematisch die Richtlinien durch geht überprüft werden können. Das ist aber auch ganz gut so, weil es eingeschränkten Menschen eine Möglichkeit bietet mit ihrem behinderungsbedingtem Fachwissen Geld zu verdienen. In Deutschland wird auf behindertengerechtes Webdesign nach der BITV 2.0 getestet.

Das Bild zeigt ein Formular barrierefrei gestaltet mit Tastenkürzel und guter Anzeige des Tastenfokus
Das Bild zeigt ein barrierefreies Formular mit Tastenkürzel und gut sichtbaren Tastaturfokus.

Webdesign für Menschen mit Behinderung in der Fachliteratur

Früher wurde das Thema in der Fachliteratur nie erwähnt! Inzwischen sehe ich es mit Freude, dass Bücher die “Professionelles Webdesign” im Titel haben, ein extra Kapitel diesem Thema widmen. Websites ohne Barrieren gelten also inzwischen als professionell! Das erste Buch zu diesem Thema hat Jan Eric Hellbusch geschrieben.

Zugänglichkeit bei Internetseiten für Smartphones, Iphones, Ipads und Tablets

Viele Menschen mit Behinderung, ich auch, sind begeisterter Nutzer von Smartphones, Iphones, Ipads und Tablets. Deswegen bringt eine Webseite erstellt nach den Richtlinien der Barrierefreiheit auch hier Vorteile! Achten Sie darauf, dass Webauftritte für Mobiltelefone ebenfalls frei von Barrieren umgesetzt werden.

Der Blog von Marlem-Software angezeigt auf einem Ipad
Die Ipad-Ansicht von Marlem’s Blog

Barrierefreies Webdesign für Unternehmen aus Reutlingen

Am 12. Mai 2017 war ich in Stuttgart in der Hochschule der Medien und habe folgenden Vortrag gehalten:
Accessibility Day 2017 in der Hochschule der Medien Stuttgart. Mein Vortrag kann online angeschaut werden: Who cares. Warum sich Unternehmen jetzt um digitale Barrierefreiheit kümmern sollten

Ich biete barrierefreies Wedesign in Reutlingen und Tübingen.

Wenn Sie Ihre Webseite nach den Richtlinien für barrierefreies Webdesign gestalten möchten, sprechen Sie mit mir: 07121/504458 oder schicken Sie eine Mail: info@marlem-software.de .


Weitere Artikel zum Thema:

SEO und Barrierefreiheit – Ein Traumteam

Gastartikel von  lomali

Wie versprochen, befasse ich mich heute mit den zwei – für uns sehr wichtigen – Themen SEO und Barrierefreiheit. Ihr meint sicher, dass sowohl die Suchmaschinenoptimierung als auch die Barrierefreiheit sehr komplexe Themen sind und man für deren Beachtung viel Geld ausgeben muss.

Wenn Unwissenheit im Spiel ist, gibt es wie in vielen Bereichen im Leben Vorurteile, die gar nicht oder nur zum Teil stimmen. Auch bei diesen zwei Themen gibt es Vorurteile und oft sind das die Gleichen.

Aktualisierung bitte!
Diese zwei Themen haben nicht nur gemeinsame Vorurteile, wie Zeitintensiv, kostspielig und kompliziert, sondern müssen zusammen behandelt werden, da sie in sehr vielen Bereichen ineinander reinspielen.

Wenn man z. B. eine zwei Jahre alte Webseite für die Suchmaschinen und Barrierefreiheit optimieren möchte, ist das klar zeitintensiv und diese Zeit möchte auch bezahlt werden.

Die Ursache, dass eine nachträgliche Optimierung oftmals – muss es aber nicht sein – zeitintensiv ist, liegt nicht in der Komplexität der Themen. Eher sind die vielen selbsternannten Webdesigner schuld. Sie verfügen oftmals über altes HTML-Wissen oder meinen, man könne mit Generatoren, wie es sie zu tausende im Internet gibt, eine korrekt strukturierte Webseite basteln.

Dieser Umstand führt dazu, dass sehr viele Webseiten nicht richtig strukturiert sind und auf alten HTML-Standards aufbauen.

Der aktuelle HTML-Standard XHTML 1.0 und das neue HTML5 zwingen Programmierer dazu, optimiert für Suchmaschinen und Barrierefreiheit zu arbeiten.

Der richtige Weg
Man kann z. B. bei XHTML 1.0 den Doctype STRICT verwenden. Mit diesem Doctype sind die Regeln für das HTML-Dokument besonders streng definiert (einige tags sind z.B. nicht mehr erlaubt). Bei Regelverstoss werden die Fehler umgehend vom W3C-Validator gemeldet. Er prüft beispielsweise ob alle Bilder einen Alternativtext haben. Auch überprüft er die korrekte Codierung und Strukturierung der Webseite.

So bemüht sich der Webdesigner von Anfang an richtig und genau zu arbeiten. Dadurch werden automatisch die elementaren Grundlagen der SEO und Barrierefreiheit berücksichtigt.

Ein Tipp an alle jungen Webdesigner am Rande:
Die Struktur und die Gestaltung einer guten Webseite ist immer gut in HTML- und CSS-Definitionen aufgeteilt.

Was hat SEO eigentlich mit Barrierefreiheit zutun?
Viele Leute schauen diese zwei wichtigen Themen immer getrennt an und produzieren so gegebenenfalls mehr Kosten bei der Realisierung der Webseite.

Wenn man sich aber einmal vor Augen führt, wie die Suchmaschinen mit ihren Webcrawlers die eigene Webseite durchsuchen und analysieren, dann erkennt man, dass dieses Vorgehen sich gar nicht sehr von den Vorgehen eines Screen-Readers für sehbehinderte Besucher unterscheidet.

Ein sehr interessanter Bereich der Barrierefreiheit ist die Medienvielfalt im Internet. Seh- und Hörbehinderte können Videos bzw. Musik nicht wahrnehmen. Eine barrierefreie Webseite muss deshalb immer eine Alternative zu den Medien bieten, eine Transkription.

Wenn wir nun den Schritt zur Suchmaschinenoptimierung machen, können wir mit Transkriptionen unserer Medien unsere Platzierung in den Suchmaschinen verbessern. Bis heute können die Webcrawlers noch keine Videos und Musik auf Stichworte durchsuchen oder analysieren.

Es gibt noch viel mehr Bereiche einer Webseite in denen sich SEO und Barrierefreiheit ergänzen.

Mehr Vorbereitung, geringere Kosten
Ihr seht wie man mit geringem Aufwand gerade zwei sehr wichtige Themen einer guten Webseite umsetzen kann. Kleinerer Aufwand heisst auch tiefere Kosten bei der Realisation.

Wie schon oben geschrieben, ist die nachträgliche Optimierung sehr viel mühsamer und teuerer. Deshalb muss man schon in der Planungsphase und bei der Gestaltung bzw. Programmierung sich Gedanken machen, wie weit man in die SEO und Barrierefreiheit reingehen möchte.

Es wäre vielleicht sinnvoll mangels Kenntnisse in diesen Bereiche auch Fachleute hinzuziehen. Je nach Budget nur als Berater oder auch als Teammitglied bei der Realisation der Webseite.

Alles das muss man schon in den ersten Stunden des Projektes berücksichtigen, ansonsten kostet es unnötig viel mehr.

Und nun?
Ich hoffe, dass ihr euch ein Bild über die Verbindung und Wichtigkeit dieser zwei Themen machen könnt. Es gibt noch vieles zu entdecken und ich habe nur wenige Punkte erwähnt. Gebt uns doch ein Feedback. Mich würde interessieren, welche Erfahrungen ihr mit eurer Webseite bei der Suchmaschinenoptimierung und Barrierefreiheit gemacht habt. Vielleicht wollt ihr ja eine neue Webseite erstellen und braucht einen Fachmann. Wir helfen euch sehr gerne!

Sind barrierefreie Internetseiten teurer wie „normale“ Webseiten?

Oft hört und liest man, dass barrierefreie Internetseiten zu teuer sind und sich deswegen nicht lohnen. In diesem Artikel möchte ich die Sache etwas beleuchten und zurecht rücken.

Zuerst möchte ich ein paar Überlegungen zum Begriff „Normal“ anstellen, weil ich als Mensch mit Behinderung immer wieder darüber stolpere, dass ich nicht „normal“ bin.

Oder dass es Behindertensoftware und „normale“ Software gibt. Oder es gibt barrierefreie Internetseiten und „normale“ Internetseiten.

Was ist „Normal“? Wie definiert man „Normal“. Dieser Begriff ist so „normal“, dass es recht schwierig ist im Internet eine Definition zu finden mit der man was anfangen kann!

Im Offenen Internetlexikon Wikipedia habe ich u.a. folgende 3 Kriterien gefunden:

[1] ohne Steigerung: Vorhandenen Normen entsprechend

(gesellschaftlichen, wissenschaftlichen, medizinischen, subjektiv erfahrenen)

[2] Über längere Zeiträume ähnlich ablaufenden Ereignissen entsprechend

[3] ohne Steigerung: im rechten Winkel/orthogonal (Mathematik)

Ich weiß nicht wie es Ihnen geht, aber ich finde alle 3 Erklärungsversuche nicht wirklich griffig.

Seit 2002 gibt es ein Gleichstellungsgesetz mit einem §11 Barrierefreie Informationstechnik in dem drin steht, dass staatliche Internetseiten barrierefrei sein müssen und gewerbliche sollten barrierefrei sein. Angenommen im Jahr 2011 sind alle Internetseiten barrierefrei, dann ist es plötzlich „normal“, dass Internetseiten barrierefrei sind!

Ich hoffe, ich konnte Sie etwas ins grübeln bringen, was die Verwendung des Begriffs „Normal“ betrifft. Ich spreche deswegen lieber von barrierefreien und nicht barrierefreien Webseiten.

Nun zur eigentlichen Frage: sind barrierefreie Internetseiten teurer als nicht barrierefreie?

Hier muss man unterscheiden. Wenn es darum geht eine bestehende Internetseite barrierefrei zu machen, kostet das auf jeden Fall Geld. Wie viel Geld hängt selbstverständlich vom Arbeitsaufwand hat. Das Problem bei Internetseiten ist, dass man zunächst nur die „Oberfläche“ sieht und nicht den HTML und CSS-Code der dahinter steckt. Somit ist es für einen Laien fast unmöglich den Fachmann vom Hobby-Webseitengestalter zu unterscheiden. Viele Hobby-Webseitengestalter können mit Bildbearbeitungsprogramme und Farbe sehr gut umgehen, legen aber auf eine korrekte Verwendung der HTML-und CSS-Befehle überhaupt keinen Wert. Damit eine Webseite barrierefrei ist, ist es unabdingbar, dass die HTML bzw. CSS-Befehle korrekt eingesetzt werden.

Wenn eine Webseite neu erstellt wird und von Beginn an die Richtlinien der Barrierefreiheit mit einbezogen werden, hält sich der Mehraufwand und somit auch die zusätzlichen Kosten in Grenzen. Es gibt gewisse Richtlinien, die es bei nicht barrierefreien Webseiten und bei barrierefreien Webseiten gibt, die sich nur in der Begründung unterscheiden!

Ich mache ein Beispiel. Der Alternativtext bei Bildern soll verwendet werden, damit ein Text angezeigt wird, wenn das Bild nicht geladen oder angezeigt werden kann, aus welchen Gründen auch immer. Dies steht in den nicht barrierefreien Richtlinien.

In den barrierefreien Richtlinien steht, dass der Alternativtext bei Bildern, den Bildinhalt grob beschreiben soll, damit blinde und sehbehinderte Menschen, die mit einem Screenreader surfen, wissen, dass es sich um ein Bild handelt und was auf dem Bild zu sehen ist.

In beiden Richtlinien steht das Gleiche nur die Begründung ist anders!

Ein zweites Beispiel. In den barrierefreien Richtlinien steht dass Navigationsmechanismen übersichtlich und schlüssig zu gestalten sind. In jedem guten Buch über professionelles Webdesign liest man ganz genau das Gleiche. Es gibt also in den nicht barrierefreien und den barrierefreien Richtlinien gemeinsame Punkte. Somit ist klar, dass es nicht zwei völlig unterschiedliche Ziele(Webseiten) sind.

Ein Video, zum Beispiel, in Textform zu beschreiben kostet selbstverständlich zusätzliche Zeit und Geld. Durch dieses zusätzlich investierte Geld, steigt allerdings die Zahl der Besucher der Webseite und somit kann, zum Beispiel im Fall eines Webshops, das investierte Geld wieder rein kommen.

Fassen wir zusammen:
In den Richtlinien für nicht barrierefreie Webseiten und den Richtlinien für barrierefreie Webseiten gibt es Gemeinsamkeiten. Eine nicht barrierefreie Webseite barrierefrei zu machen kostet Geld. Wie viel Geld hängt davon ab, wie Wichtig dem Web-Entwickler die Umsetzung der nicht barrierefreien Richtlinien war. Bei einer sehr guten Umsetzung der nicht barrierefreien Richtlinien, dürften die Kosten nicht sehr hoch sein. Bei einer neu erstellten Webseite ist es sehr empfehlenswert, gleich auf barrierefreies Webdesign zu achten. Durch die Gemeinsamkeiten der nicht barrierefreien und barrierefreien Richtlinien hält sich der Mehraufwand und die damit verbunden Mehrkosten in Grenzen.

Durch die umgesetzte Barrierefreiheit steigt die Zahl der Webseitenbesucher (siehe Artikel „Barrierefreiheit – wer braucht das?“ ) und somit die Beliebtheit der Webseite und im Fall eines Webshops kommt mehr Umsatz in die Kasse!

Barrierefreie Internetseiten lohnen sich!

Wann ist eine Webseite / Internetseite barrierefrei? (BITV 1.0)

Heute schauen wir uns an, welche Kriterien erfüllt werden sein müssen, damit man von einer barrierefreien Webseite / Internetseite sprechen kann. Mit Sicherheit lassen sich nicht alle Kriterien zu 100% umsetzen. Es geht aber bei diesem Thema auch nicht um das sture Umsetzen von irgendwelchen Richtlinien, sondern es geht darum, ein Bewusstsein zu schaffen, dass es Menschen mit unterschiedlichen Einschränkungen gibt, die beim Wahrnehmen / Lesen einer Webseite auf Barrieren (=Hindernisse) stoßen.

Im folgenden Liste ich die Punkte der Barrierefreie Informationstechnik-Verordnung(=BITV) auf, die für die Umsetzung von Barrierefreiheit auf Webseiten wichtig sind.

Die Bedingungen sind in zwei Priorität-Stufen gegliedert. Eine Webseite ist erst dann Barrierefrei, wenn alle Priorität-Stufen erfüllt sind.

 

Übersicht der Anforderungen für barrierefreies Webdesign auf der BITV

 


Textäguivalente und -alternativen ( Anforderung 1 )
Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.

Priorität I
Bedingung 1.1
Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von Imagemaps, Animationen (z.B. animierte GIFs), Applets und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.

Bedingung 1.2
Für jede aktive Region einer serverseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.

Bedingung 1.3
Für Multimedia-Präsentationen ist eine Audio-Beschreibung der wichtigen Informationen der Videospur bereitzustellen.

Bedingung 1.4
Für jede zeitgesteuerte Multimedia-Präsentation (insbesondere Film oder Animation) sind äquivalente Alternativen (z.B. Untertitel oder Audiobeschreibungen der Videospur) mit der Präsentation zu synchronisieren.

Priorität II
Bedingung 1.5
Für jede aktive Region einer clientseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.


Farben und Kontraste ( Anforderung 2 )
Texte und Graphiken müssen auch dann verständlich sein, wenn diese ohne Farbe betrachtet werden.

Priorität I
Bedingung 2.1
Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.

Bedingung 2.2
Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Priorität II
Bedingung 2.3
Texte sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.


Trennung von Inhalt und Layout ( Anforderung 3 )
Markup-Sprachen (insbesondere HTML) und Stylesheets (CSS) sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden.

Priorität I
Bedingung 3.1
Soweit eine angemessene Markup-Sprache existiert, ist diese anstelle von Bildern zu verwenden, um Informationen darzustellen.

Bedingung 3.2
Mittels Markup-Sprachen geschaffene Dokumente sind so zu erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken validieren.

Bedingung 3.3
Es sind Stylesheets zu verwenden, um die Text- und Bildgestaltung sowie die Präsentation von mittels Markup-Sprachen geschaffener Dokumente zu beeinflussen.

Bedingung 3.4
Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Stylesheet-Property-Werten zu verwenden.

Bedingung 3.5
Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffener Dokumente sind Überschriften-Elemente zu verwenden.

Bedingung 3.6
Zur Darstellung von Listen und Listenelementen sind die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu verwenden.

Bedingung 3.7
Zitate sind mittels der hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.


Sprachliche Besonderheiten ( Anforderung 4 )
Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar zu machen.

Priorität I
Bedingung 4.1
Wechsel und Änderungen der vorherrschend verwendeten natürlichen Sprache sind kenntlich zu machen.

Priorität II
Bedingung 4.2
Abkürzungen und Akronyme sind an der Stelle ihres ersten Auftretens im Inhalt zu erläutern und durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.

Bedingung 4.3
Die vorherrschend verwendete natürliche Sprache ist durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.


Tabellen ( Anforderung 5 )
Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.

Priorität I
Bedingung 5.1
In Tabellen, die tabellarische Daten darstellen, sind die Zeilen- und Spaltenüberschriften mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.

Bedingung 5.2
Soweit Tabellen, die tabellarische Daten darstellen, zwei oder mehr Ebenen von Zeilen- und Spaltenüberschriften aufweisen, sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache Datenzellen und Überschriftenzellen einander zuzuordnen.

Bedingung 5.3
Tabellen sind nicht für die Text- und Bildgestaltung zu verwenden, soweit sie nicht auch in linearisierter Form dargestellt werden können.

Bedingung 5.4
Soweit Tabellen zur Text- und Bildgestaltung genutzt werden, sind keine der Strukturierung dienenden Elemente der verwendeten Markup-Sprache zur visuellen Formatierung zu verwenden.

Priorität II
Bedingung 5.5
Für Tabellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Zusammenfassungen bereitzustellen.

Bedingung 5.6
Für Überschriftenzellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Abkürzungen bereitzustellen.


Allgemeine Rückwärtskompatibilität ( Anforderung 6 )
Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent neuere Technologien nicht unterstützt oder diese deaktiviert sind.

Priorität I
Bedingung 6.1
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn die zugeordneten Stylesheets deaktiviert sind.

Bedingung 6.2
Es muss sichergestellt sein, dass Äquivalente für dynamischen Inhalt aktualisiert werden, wenn sich der dynamische Inhalt ändert.

Bedingung 6.3
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn scripts, Applets oder andere programmierte Objekte deaktiviert sind.

Bedingung 6.4
Es muss sichergestellt sein, dass die Eingabebehandlung von scripts, Applets oder anderen programmierten Objekten vom Eingabegerät unabhängig ist.

Bedingung 6.5
Dynamische Inhalte müssen zugänglich sein. Insoweit dies nur mit unverhältnismäßig hohem Aufwand zu realisieren ist, sind gleichwertige alternative Angebote unter Verzicht auf dynamische Inhalte bereitzustellen.


Dynamische Inhalte ( Anforderung 7 )
Zeitgesteuerte Änderungen des Inhalts müssen durch die Nutzerin/den Nutzer kontrollierbar sein.

Priorität I
Bedingung 7.1
Bildschirmflackern ist zu vermeiden.

Bedingung 7.2
Blinkender Inhalt ist zu vermeiden.

Bedingung 7.3
Bewegung in mittels Markup-Sprachen geschaffener Dokumente ist entweder zu vermeiden oder es sind Mechanismen bereitzustellen, die der Nutzerin, dem Nutzer das Einfrieren der Bewegung oder die Änderung des Inhalts ermöglichen.

Bedingung 7.4
Automatische periodische Aktualisierungen in mittels Markup-Sprachen geschaffener Dokumente sind zu vermeiden.

Bedingung 7.5
Die Verwendung von Elementen der Markup-Sprache zur automatischen Weiterleitung ist zu vermeiden. Insofern auf eine automatische Weiterleitung nicht verzichtet werden kann, ist der Server entsprechend zu konfigurieren.


Benutzerschnittstellen ( Anforderung 8 )
Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist sicherzustellen.

Priorität I
Bedingung 8.1
Programmierte Elemente (insbesondere scripts und Applets) sind so zu gestalten, dass sie entweder direkt zugänglich oder kompatibel mit assistiven Technologien sind.


Geräte-Unabhängigkeit ( Anforderung 9 )
Internetangebote sind so zu gestalten, dass Funktionen unabhängig vom Eingabegerät oder Ausgabegerät nutzbar sind.

Priorität I
Bedingung 9.1
Es sind clientseitige Imagemaps bereitzustellen, es sei denn die Regionen können mit den verfügbaren geometrischen Formen nicht definiert werden.

Bedingung 9.2
Jedes über eine eigene Schnittstelle verfügende Element muss in geräteunabhängiger Weise bedient werden können.

Bedingung 9.3
In Scripts sind logische anstelle von geräteabhängigen Event-Handlern zu spezifizieren.

Priorität II
Bedingung 9.4
Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks, Formularkontrollelementen und Objekten festzulegen.

Bedingung 9.5
Es sind Tastaturkurzbefehle für Hyperlinks, die für das Verständnis des Angebots von entscheidender Bedeutung sind (einschließlich solcher in clientseitigen Imagemaps), Formularkontrollelemente und Gruppen von Formularkontrollelementen bereitzustellen.


Kompatibilität mit Hilfsmitteln ( Anforderung 10 )
Die Verwendbarkeit von nicht mehr dem jeweils aktuellen Stand der Technik entsprechenden assistiven Technologien und Browsern ist sicherzustellen, soweit der hiermit verbundene Aufwand nicht unverhältnismäßig ist.

Priorität I
Bedingung 10.1
Das Erscheinenlassen von Pop-Ups oder anderen Fenstern ist zu vermeiden. Die Nutzerin, der Nutzer ist über Wechsel der aktuellen Ansicht zu informieren.

Bedingung 10.2
Bei allen Formular-Kontrollelementen mit implizit zugeordneten Beschriftungen ist dafür Sorge zu tragen, dass die Beschriftungen korrekt positioniert sind.

Priorität II
Bedingung 10.3
Für alle Tabellen, die Text in parallelen Spalten mit Zeilenumbruch enthalten, ist alternativ linearer Text bereitzustellen.

Bedingung 10.4
Leere Kontrollelemente in Eingabefeldern und Textbereichen sind mit Platzhalterzeichen zu versehen.

Bedingung 10.5
Nebeneinanderliegende Hyperlinks sind durch von Leerzeichen umgebene, druckbare Zeichen zu trennen.


W3C-Technologien ( Anforderung 11 )
Die zur Erstellung des Internetangebots verwendeten Technologien sollen öffentlich zugänglich und vollständig dokumentiert sein, wie z. B. die vom World Wide Web Konsortium entwickelten Technologien.

Priorität I
Bedingung 11.1
Es sind öffentlich zugängliche und vollständig dokumentierte Technologien in ihrer jeweils aktuellen Version zu verwenden, soweit dies für die Erfüllung der angestrebten Aufgabe angemessen ist.

Bedingung 11.2
Die Verwendung von Funktionen, die durch die Herausgabe neuer Versionen überholt sind, ist zu vermeiden.

Bedingung 11.3
Soweit auch nach bestem Bemühen die Erstellung eines barrierefreien Internetangebots nicht möglich ist, ist ein alternatives, barrierefreies Angebot zur Verfügung zu stellen, das äquivalente Funktionalitäten und Informationen gleicher Aktualität enthält, soweit es die technischen Möglichkeiten zulassen. Bei Verwendung nicht barrierefreier Technologien sind diese zu ersetzen, sobald aufgrund der technologischen Entwicklung äquivalente, zugängliche Lösungen verfügbar und einsetzbar sind.

Priorität II
Bedingung 11.4
Der Nutzerin, dem Nutzer sind Informationen bereitzustellen, die es ihnen erlauben, Dokumente entsprechend ihren Vorgaben (z.B. Sprache) zu erhalten.


Kontextuelle Hilfen ( Anforderung 12 )
Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen.

Priorität I
Bedingung 12.1
Jeder Frame ist mit einem Titel zu versehen, um Navigation und Identifikation zu ermöglichen.

Bedingung 12.2
Der Zweck von Frames und ihre Beziehung zueinander ist zu beschreiben, soweit dies nicht aus den verwendeten Titeln ersichtlich ist.

Bedingung 12.3
Große Informationsblöcke sind mittels Elementen der verwendeten Markup-Sprache in leichter handhabbare Gruppen zu unterteilen.

Bedingung 12.4
Beschriftungen sind genau ihren Kontrollelementen zuzuordnen.


Navigation und Orientierung ( Anforderung 13 )
Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.

Priorität I
Bedingung 13.1
Das Ziel jedes Hyperlinks muss auf eindeutige Weise identifizierbar sein.

Bedingung 13.2
Es sind Metadaten bereitzustellen, um semantische Informationen zu Internetangeboten hinzuzufügen.

Bedingung 13.3
Es sind Informationen zur allgemeinen Anordnung und Konzeption eines Internetangebots, z.B. mittels eines Inhaltsverzeichnisses oder einer Sitemap, bereitzustellen.

Bedingung 13.4
Navigationsmechanismen müssen schlüssig und nachvollziehbar eingesetzt werden.

Priorität II
Bedingung 13.5
Es sind Navigationsleisten bereitzustellen, um den verwendeten Navigationsmechanismus hervorzuheben und einen Zugriff darauf zu ermöglichen.

Bedingung 13.6
Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht.

Bedingung 13.7
Soweit Suchfunktionen angeboten werden, sind der Nutzerin, dem Nutzer verschiedene Arten der Suche bereitzustellen.

Bedingung 13.8
Es sind aussagekräftige Informationen am Anfang von inhaltlich zusammenhängenden Informationsblöcken (z.B. Absätzen, Listen) bereitzustellen, die eine Differenzierung ermöglichen.

Bedingung 13.9
Soweit inhaltlich zusammenhängende Dokumente getrennt angeboten werden, sind Zusammenstellungen dieser Dokumente bereitzustellen.

Bedingung 13.10
Es sind Mechanismen zum Umgehen von ASCII-Zeichnungen bereitzustellen.


Verständlichkeit
( Anforderung 14 )
Das allgemeine Verständnis der angebotenen Inhalte ist durch angemessene Maßnahmen zu fördern.

Priorität I
Bedingung 14.1
Für jegliche Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist.

Priorität II
Bedingung 14.2
Text ist mit graphischen oder Audio-Präsentationen zu ergänzen, sofern dies das Verständnis der angebotenen Information fördert.

Bedingung 14.3
Der gewählte Präsentationsstil ist durchgängig beizubehalten.

Auf meiner Webseite finden Sie auch Infos zum Thema barrierefreies Webdesign