Archiv der Kategorie: Barrierefreiheit im Internet

Contact Form 7: endlich barrierefreie Formulare!

Wie ich in diesem Artikel vorgestellt habe, produziert das populäre Plugin Contact Form 7 so wie es ist nicht barrierefreie Formulare, da die Label-Tags fehlen und mühsam per Hand eingepflegt werden müssen. Aber Abhilfe ist in Sicht!

Das Erweiterungs-Plugin Contact Form 7: Accessible Defaults liefert  neue Templates, in denen die Labels für die Formularfelder bereits korrekt definiert sind. Leider können bereits bestehende Formulare damit nicht aktualisiert werden, die Templates wirken nur für neu erstellte Formulare. Der Autor empfiehlt eine Installation seines Plugins vor der Installation von Contact Form 7, wo das nicht möglich ist sollte man dann nur noch die neuen Templates benutzen, um barrierefreie Formulare zu erzeugen. Aber immerhin – CF7 Accessible Defaults erspart einem viel mühsame Handarbeit – das geht schon in die richtige Richtung!

 

PDF-Generatoren für WordPress: von PDF/UA keine Spur

Es ist ein beliebter Service, in einem WordPress-Blog die Konvertierung der aktuellen Seite oder des aktuellen Beitrags in ein PDF zum Herunterladen und Drucken anzubieten. Da man aber nicht jede Seite und jeden Beitrag manuell  in ein PDF konvertieren und hochladen möchte, gibt es auch jede Menge Plugins, die den Job „on the fly“ mehr oder weniger gut erledigen. „On the fly“ heißt, die Konvertierung wird auf Knopfdruck Online durchgeführt, man muß gar nicht manuell eingreifen.

Ich geh jetzt aber mal gar nicht mehr weiter ins Detail, denn eines haben alle von mir getesteten PDF-Generatoren gemeinsam:

PDF/UA – Fehlanzeige

Ob PDF & Print by BestWebSoft, Print Friendly, WP Advanced PDF oder sonst ein PDF-Plugin für WordPress, sie alle haben das selbe Problem: die erstellten PDFs sind nicht kompatibel zum PDF/UA Standard nach ISO 14289. (Informative Seite zum Thema: PDF Association)

Damit kann man – entschuldigen Sie meine Ausdrucksweise – alle diese Plugins nur in die Tonne treten, weil die erstellten PDFs alles, nur nicht barrierefrei sind. Damit kann man sie auf einer barrierfreien Seite gar nicht verwenden, da hilft kein Konfigurationstrick und kein Advanced Feature, sie können es einfach nicht.

Abhilfe: es geht auch ohne PDF

Hier bietet sich eine geradezu erschreckend einfache Lösung an: verzichten sie komplett auf die PDF-Erzeugung „On the fly“. Wenn ihre Webseiten (Oder eben auch WordPress-Beiträge) sauber strukturiert und mit Zwischenüberschriften gegliedert sind, werden sie auch über die Drucken-Funktion ihres Browsers sauber ausgegeben, dafür braucht man kein PDF.

Und für Benutzer mit Screenreader oder ähnlichen Hilfsmitteln gilt: für diese ist die PDF-Generierung komplett überflüssig. Kein Blinder oder Sehbehinderter wird sich ein PDF ausgeben lassen, wenn die betreffende Seite Online ohne Probleme zugänglich gemacht ist und mit dem Screenreader einwandfrei bedient werden kann.

Wann braucht man denn dann überhaupt ein PDF?

Das ist eine sehr berechtigte Frage. Ich gehe da einen sehr pragmatischen Weg: alles was über mehrere Bildschirmseiten erstreckt und irgendwie nach Handbuch, Manual oder Anleitung riecht ist ein Kandidat für ein PDF zum Herunterladen.

Dann muß aber über einen wohlfunktionellen PDF-Generator eine PDF/UA-kompatible Datei erstellt und hochgeladen werden. Im einfachsten Fall mache ich das mit Word 2010, lasse noch einmal das PAC-2-Tool darüberlaufen und kontrolliere ob das PDF auch sauber ist, und dann wird es zum Download bereitgestellt.

Da ich wirklich nur wenige ausgewählte Dateien als PDFs zum Download bereitstelle, hält sich der Aufwand hierfür in Grenzen, eine manuelle Pflege des PDF-Angebots ist absolut machbar. Lieber wenige, handverlesene barrierefreie PDFs als eine Flut von nicht kompatiblen und letztlich unbrauchbaren Dokumenten!

 

 

Akkordion: barrierfrei, notfalls mit Javascript

Besonders bei One-Page-Layouts werden heute gerne Akkordeons eingesetzt, also aufklappbare Elemente, deren Inhalt zunächst nicht sichtbar ist und erst durch einen Klick auf das Überschrifts-Element eingeblendet wird. Dies ist in HTML5 mit dem details-Element ganz einfach realisierbar. Es ist in allen unterstützten Browsern zugänglich, d.h. auch mit der Tastatur zu öffnen und zu schließen:

 

 

Klapp mich auf:

Das neue details-Element ermöglicht es, ganz ohne den Einsatz von JavaScript, ursprünglich verborgene Textinhalte aufzuklappen.

 

 

 

Der Pferdefuß dabei: vom IE und von älteren Firefox-Versionen wird das details-Element noch nicht unterstützt.

Und noch etwas: der Inhalt des Elements ist natürlich nicht auf den ersten Blick ersichtlich, es muss erst eine Aktion durch den Benutzer erfolgen, um die versteckten Inhalte einzublenden. Deswegen sollte man es sich gut überlegen, wann und wo man ein Akkordeon sinnvoll einsetzt.

Abhilfe: Javascript, wenns denn unbedingt sein muß

In diesem Artikel bei selfhtml ist der Sourcecode für ein barrierefreies Akkordeon extra für IE und ältere Browser  zu finden, sowie eine genaue Erklärung der Anwendung. Es werden ARIA-Elemente eingesetzt, um das Akkordeon auch für Screenreader etc. bedienbar zu machen. Ich zitiere mal kurz selfhtml:

Das Akkordeon besteht aus Buttons und einem dazugehörenden div. Um diesen Zusammenhang auch für Screenreader klarzustellen, erhalten die Buttons ein aria-controls-Attribut, dass auf die id des dazugehörenden divs verweist. Jeder Button erhält ein aria-expanded-Attribut, dass den jeweils geschalteten Zustand anzeigt, was auch mit CSS sichtbar gemacht wird.

Alles klar? Wenn man also unbedingt für ältere Browser kompatibel bleiben will, setzt man diese Lösung ein.

 

Microsoft Word 2010 als PDF speichern: die wichtigsten Einstellungen

Microsoft Word kann ja jetzt auch PDFs erzeugen, man braucht dazu keine zusätzlichen Tools wie etwa den PDF24 mehr. Damit aber die erzeugten Dokumente tatsächlich auch saubere PDFs nach dem ISO-Standard (19005-1, PDF/A) werden, gibt es dann doch einiges zu beachten. Das selbe gilt übrigens für die Erstellung barrierefreier PDFs.

Ich mache hier mal eine knappe Auflistung, was zu beachten ist, wer mehr über das Thema PDF/A wissen will ist bei Tante Google bestens aufgehoben.

Dokumentstrukturierung mit Formatvorlagen

Die Dokumentstrukturierung funktioniert in Word nicht anders, als wir es von unseren Webseiten her gewohnt sind. Statt des<h1> Tags gibt es in Word die Formatvorlage Überschrift 1, der normale Fließext kriegt statt dem Tag <p> die Formatvorlage Standard, und so weiter und so fort. Wer Word ein bißchen kennt, kennt sich da sicher bestens aus und weiß genau wovon ich spreche, alle anderen Verweise ich auf die unzähligen Word-Tutorials im Web.

Tipp: zur Schnellformatierung von Überschriftsebenen verwenden sie die Tastenkombination Alt+(Ebene), also etwa Alt+1 für Überschrift Ebene 1, Alt+2 für Ebene 2.
Word hat Standardmäßig 9 Ebenen in den Standard-Formatvorlagen vorgesehen, das sollte reichen.

Strukturieren sie ihr Dokument klar mit logisch gegliederten Zwischenüberschriften, denen sie die entsprechenden Formatvorlagen zuweisen. Das geht am Übersichtlichsten im Gliederungsmodus, da bekommen sie die Dokumentstruktur grafisch angezeigt und können Fehler sofort erkennen und korrigieren.

Alternativtexte für Bilder eingeben

Auch das funktioniert nicht viel anders als wir es von HTML her gewohnt sind, ein aussagekräftiger Alt-Text muss sein. Klicken sie mit der rechten Maustaste auf das eingefügte Bild, wählen sie im Kontextmenü unter „Grafik formatieren“ den Reiter „Alternativtext“ und geben sie ihren Text hier ein, das war’s schon.

Optionen beim PDF-Speichern richtig einstellen

Wenn sie ihr Dokument in Word fertig bearbeitet haben, wählen sie Datei/Speichern unter und wählen hier als Dateityp PDF.

word pdf speichern
word pdf speichern

Klicken sie hier auf die Schaltfläche „Optionen“ und stellen sie diese wie im nächsten Screenshot gezeigt ein:

word pdf speichern optionen
word_pdf_speichern_optionen

Das wichtigste ist hier der letzte Punkt, PDF-Optionen. der muss auf „ISO 19005-1-kompatibel“ gestellt werden.

Entfernen sie überflüssige Absatzmarken

Das Erzeugen von größeren Abständen zwischen Absätzen in Word durch mehrmaliges drücken der Return-Taste ist eine schlechte Angewohnheit, die man sich auch wieder abgewöhnen kann. Wenn sie ihr Dokument sauber mit Formatvorlagen durchstrukturiert haben, werden sie automatisch mit passenden Abständen formatiert. Und wenn ihnen das nicht reicht können sie immer noch eine Formatvorlage anpassen und einen grösseren Abstand vor oder nach dem Absatz einstellen (s. Word-Hilfe).

Für die Erzeugung eines sauberen und barrierefreien PDFs ist es notwendig, alle überflüssigen Absatzmarken zu entfernen, schmeissen sie die einfach gnadenlos raus. Wenn sie nur eine Zeilenschaltung einfügen wollen, verwenden sie die Tastenkombination Alt+Return, das erzeugt einen sogenannten „weichen“ Zeilenumbruch und wird sauber ins PDF übernommen.

Das wars – PDF nach ISO 19005-1 kann marschieren

Wenn sie sauber gearbeitet haben, ist ihr PDF jetzt auch noch so gut wie barrierefrei. Das PAC-Tool dürfte jetzt nur noch einige wenige Errors in den Metadaten anzeigen, und die sind für uns praktisch irrelevant, unser PDF ist jetzt sauber genug für den Einsatz auf barrierefreien Webseiten. Das war doch jetzt wirklich nicht schwer, oder?

 

 

 

Barrierefreie PDFs erstellen: das PAC-Tool

PDFs braucht man immer wieder mal, meistens um dem Besucher einer Webseite weiterführende Informationen (Produktbeschreibungen, Anleitungen, Infoblätter…) zum Download anzubieten. Ich biete zum Bespiel in meinem Handarbeitsblog Oddballs – anders gestrickt viele Handarbeitsanleitungen als PDFs an, die sind bei meinen Besucherinnen der Renner!

Seit Microsoft Word auch PDFs speichern kann, muss man mit der PDF-Erzeugung nicht mehr auf irgendwelche Tools wie PDF24 oder Ähnliches zurückgreifen, das geht jetzt ganz einfach in Word mit Datei/Speichern unter…, hier als Dateityp PDF anwählen, und fertig. Aber Achtung! Ein mit Word erzeugtes PDF ist nur so gut wie das Word-Dokument selbst, und hier gilt es, einiges zu beachten.

PDF heißt nicht automatisch Qualität:

Viele denken, PDF Dateien seien universell einsetzbar, weil sie von jedem mit Hilfe des Acrobat Readers oder direkt im Browser gelesen und ausgedruckt werden können. Das stimmt so leider nicht ganz. Ein PDF-Dokument enthält neben dem Text und den Bildern noch Struktur-Informationen oder Tags, ganz ähnlich wie ein HTML-Dokument. Es gibt Gliederungsebenen, Meta-Informationen, Alt-Texte und noch vieles mehr. Diese Informationen muss man gezielt und korrekt einsetzen. Eine knackige Infoseite zu dem Thema finden sie bei der Schweizer Stiftung „Zugang für alle“.

Der PDF/UA Standard

Für barrierefreie PDFs gibt es mit dem PDF/UA ganz klare Richtlinien, ich zitiere mal von der Stiftung :

PDF/UA (Universal Accessibility) ist der internationale Standard für zugängliche PDFs. Der ISO-Standard 14289-1 soll für PDF-Dokumente das sein, was heute die WCAG 2.0 für Webangebote sind.
PDF/UA wendet die WCAG-2.0-Konzepte auf PDF an und basiert auf dem ISO-Standard PDF 1.7 (ISO 32000-1).

Die Seiten der Stiftung sind sowieso fantastisches Lesefutter für jeden, der sich mit dem Thema barrierfreies Internet befasst, schauen sie sich da mal näher um, es gibt wertvolle Informationen und tolle Tips jede Menge.

Das PAC-Tool zur PDF-Validierung

Zur Überprüfung von PDF-Dokumenten auf Konformität mit dem PDF/UA-Standard hat die Stiftung Zugang für alle ein einfach zu handhabendes, aber absolut professionelles Tool entwickelt, und bietet es kostenlos zum Download an:

PDF Accessibility Checker (PAC 2)

Es gibt eine umfangreiche Dokumentation sowie viele Tipps und praktische Hilfestellungen zum Thema auf den Seiten der Stiftung. Das Tool ist simpel zu bedienen und hat eine sehr gut strukturierte Benutzeroberfläche. Man lädt einfach das zu prüfende PDF, klickt auf PDF/UA-Check Start, und bekommt sofort eine Übersicht über das Prüfergebnis angezeigt:

PAC screenshot
PAC screenshot

Nützlicher Link: hier beim axes PDF Help Center sind die meisten gängigen Fehler dokumentiert, und es wird ausführlich erklärt wie man sie behebt. Eine prima Seite zum Nachschlagen!

Es würde hier den Rahmen absolut sprengen, die weiteren Features und Funktionen des PAC-Tools aufzuführen, aber es ist ja auf den Seiten der Stiftung Zugang für alle sehr gut dokumentiert, das kann jeder selber nachlesen.

Ich möchte hier nur noch kurz sagen: wenn schon PDF, dann kann man es auch gleich barrierefrei machen. Das ist auch gleich noch eine Massnahme zur Qualitätssicherung, Konformität der PDF-Dokumente mit dem PDF/UA-Standard  ist auf jeden Fall eine Qualitätsmaßnahme die sich lohnt, und mit der man auch Werbung machen kann. Und das wiederum wird auch ihren Kunden gefallen!

Contact Form 7: Nützling, aber leider erstmal nicht barrierefrei

Der praktische WordPress-Formulardesigner mit vielen Features

Wer in WordPress mit Formularen zu tun hat, wird in den meisten Fällen das Plugin Contact Form 7 einsetzen. Es bietet einen sehr praktischen Formulareditor, in dem sie ihre Kontaktformulare und Anmeldungen und Bestellungen und was man halt so alles an Formularen brauchen kann in wenigen Schritten zusammenklicken. Eine komplette E-Mail-Response Verwaltung ist auch im Funktionsumfang enthalten und nimmt einem ebenfalls viel Handarbeit ab. Dazu kommen noch ein paar sehr praktische Erweiterungen für Hidden Fields und zum Speichern der Formulardaten in der Datenbank. Insgesamt ein rundes Paket, mit dem sie ihrem Kunden schnell und effizient eine komplette Formularabwicklung anbieten können.

Mit über 5 Millionen Installationen dürfte es auch eins der erfolgreichsten WordPress-Plugins aller Zeiten sein. Da verwundert es mich um so mehr, daß Contact Form 7 mit den Default-Einstellungen Formulare produziert, die nicht barrierefrei sind und im WAVE-Tool haufenweise Errors anzeigen. Wie kommts? Da wurde beim Programmieren geschlampert.

Da fehlen bei den Labels die id’s!

Dabei ist es eigentlich ganz einfach.  Nach WCAG 2.0 braucht jedes Formularfeld ein identifizierendes Label, das es dem Screenreader erlaubt, das Formular gezielt zu bedienen. Das sieht dann ganz einfach so aus, ich zeig hier mal ein Formular mit zwei Feldern:

<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"><br> 

<input type="checkbox" name="subscribe" id="subscribe"> <label for="subscribe">Subscribe to newsletter</label>

Jedes Formularfeld kriegt eine id, und die wird mit dem label-for-Tag logisch verknüpft, das wars schon. Eigentlich HTML für Anfänger.

In Contact Form 7 siehts so aus – keine id!

<label> Ihr Name (Pflichtfeld)
 [text* your-name] </label>

Da muss man per Hand nacharbeiten, wenn man barrierefreie Formulare haben möchte, und das finde ich ehrlich gesagt unmöglich für ein so verbreitetes Tool mit Millionen Installationen.

Jede Menge Extensions

Über die interessantesten Extensions für Contact Form (CF7 DTX, CF7 Datenbank Plugins) gibts dann später noch  jeweils eigene Artikel, da warten noch interessante Features auf sie!

Wo WordPress richtig gut ist: so wenig SEO wie nötig

Wir hatten uns ja dafür entschieden, die neue Webseite unseres Kunden mit WordPress zu realisieren. Wir haben uns zusätzlich um die Barrierefreiheit gekümmert, und die Seite steht jetzt soweit. Jetzt wollen wir natürlich auch, dass sie von Tante Google auch gefunden wird, wenn der Benutzer die richtigen Stichworte eingibt, und wir wollen natürlich im Ranking ganz oben stehen. Ja, ich hör’s schon: Zeit für SEO-Massnahmen! Und dafür, liebes Publikum, brauchen wir kein SEO-all-in-one-Pack und keine ausgefeilten Strategien, das machen wir mit Bordmitteln.

Unsere besten SEO-Werkzeuge

Wir haben nämlich schon eine ganze Menge Futter für die Suchmaschinen angehäuft, und das ging quasi nebenbei. Ich sags ihnen mal ganz genau:

  • Adresse, Ort und Firmenname des Kunden stehen sowieso ganz oben auf der Seite
  • Wir haben aussagekräftige Überschriften mit den richtigen Stichworten für alle Themen auf unserer Seite
  • Wir haben aktuelle Beiträge mit kundenspezifischen Themen
  • Wir haben aussagekräftige Alt-Texte bei unseren Bildern

Was können wir jetzt noch tun? WordPress bietet da zwei wirklich gute Werkzeuge, die sehr gut programmiert sind und sehr einfach zu bedienen, nämlich:

Kategorien und Schlagwörter

Wann man das eine und wann das andere verwendet, darüber gibt es viele gescheite Artikel im Web, und die geben so viele unterschiedliche Ratschläge mit, dass man auch nicht schlauer wird wenn man sie alle liest. Ich halte es auf meinen Seiten so:

  • die Kategorien sind für die Besucher meiner Seiten, damit können sie sich einen guten Überblick verschaffen, zu welchen Themen ich gebloggt habe.
  • die Schlagwörter sind bei mir für die Suchmaschinen, da gebe ich Stichworte ein, die zwar für den betreffenden Artikel zutreffend, aber für meine Besucher nicht so interessant sind.

Ein Beispiel aus der Praxis

Ich mach hier mal ein Beispiel, dann wird es vielleicht klarer. Auf meiner Webseite über meine Landschaftsaquarelle schreibe ich für jedes Bild, das ich hochlade, einen eigenen Beitrag. In den Beitragstitel kommt der Titel des Bildes und das Datum, wann ich es gemalt habe, da steht dann z.B.:

Erster Herbststurm über Deining 20.9.2003

Hier sind für die Suchmaschinen die beiden Stichwörter „Herbststurm“ und „Deining“ interessant.

Erste Wahl: die Kategorien

Der Beitrag bekommt dann seine passenden Kategorien zugeordnet. Ich habe vier Kategorien für die Jahreszeiten angelegt, logischerweise heissen die „Frühling, Sommer, Herbst, Winter“. Das Bild kriegt die Kategorie „Herbst„, wieder ein Stichwort für die Suchmaschinen.

Dann habe ich mir noch ein paar Kategorien für die verschiedenen Orte und Landstriche angelegt, in denen die reisende Malerin unterwegs ist. Siehe da, es gibt eine Kategorie „Bad Tölz/Wolfratshausen„, und da gehört der kleine Ort Deining nahe Bad Tölz hin.  Noch eins für die Suchmaschinen.

Sehen sie, wie das funktioniert? Mit dieser Logik bin ich im Google-Ranking auf der ersten Seite mit dabei, wenn ein Suchender zum Beispiel „Deining Bad Tölz Herbst Aquarell“ eingibt. Das Stichwort „Aquarell“ holt sich Tante Google schon mal aus dem Titel meiner Seite, die heißt nämlich „Aquarell – malen mit Licht und Luft“

Die Schlagwörter – nicht ganz so effektiv

Aus dem Kontext der Seite ist es allen meinen Besuchern klar, daß sie hier Aquarelle von bayrischen Landschaften zu sehen bekommen und daß es sich um handgemalte Kunstwerke handelt, und zwar um handsignierte Originale. Das will und muss ich nicht zu jedem Beitrag mit dazuschreiben, ich will ja meine Leser nicht mit endlosen Wiederholungen langweilen.

Aber Tante Google hat keine Ahnung vom Kontext, und deswegen müßte man ihr hier die relevanten Begriffe einzeln einfüttern .  Das habe ich mal ausgetestet, und so steht jetzt bei etlichen Beiträgen die folgende oder eine ähnliche Schlagwortliste:

„Aquarell, Bild, Original, signiert, handgemalt, Bayern, Kunst, Landschaft, Berge“

Eine Suche nach „Flaucher Original signiert“  bringt mich zumindest so etwa an fünfter Stelle. Das Problem bei diesen Schlagwörtern ist, dass sie auch von vielen anderen Seiten verwendet werden, die irgendwie mit Kunst und Bildern zu tun haben, da streuen die Suchergebnisse halt ziemlich breit.

Wenn’s Google nicht gleich schnallt

Es kann sein, dass sie den Erfolg dieser Optimierungen  in der Google-Suche erst nach längerer Zeit (auch schon mal Wochen bis Monate) sehen, weil ihre Seite vom Google-Crawler noch nicht neu indexiert worden ist. Dem kann man nachhelfen, indem man die Seite mit allen Unterseiten manuell bei der Google Search Console anmeldet. Aber das sprengt jetzt hier den Rahmen, dazu ein andermal mehr.

Der Tipp mit dem Cache

Nur noch ein kurzer Tipp, wie man herausfindet wie aktuell Google ihre Webseite gespeichert hat: Geben sie im Browser die URL der Seite ein, von der sie die Cache-Informationen abrufen möchten, und stellen sie dem ein „cache:“ voran, also z.B. „cache:evileu.de“. Dann bekommen sie das Datum angezeigt, an dem Google ihre Webseite das letzte Mal aktuell indexiert hat. Das kann bis zu mehrere Monate her sein, eventuell ist dann doch ein manuelles Anstossen bei der Google Search Console fällig.

Und das wars dann aber auch schon mit den SEO-Massnahmen.

Sie hatten mehr erwartet?

Ist aber gar nicht notwendig! Einige gut überlegte Kategorien und sinnvolle Texte und Überschriften mit den richtigen Schlüsselwörtern, und sie sind bestens ausgestattet und werden auch gefunden. Vorausgesetzt, sie haben sauber gearbeitet und die Seite so aufgebaut, wie ich es am Beginn dieses Artikels nochmal aufgelistet hatte.

Ich hab’s glaub ich schon ein paar mal gesagt, aber ich wiederhole es gerne: was gut ist für die Barrierefreiheit, ist auch gut für die Suchmaschinenoptimierung. Ich hoffe, dass ich das in diesem Beitrag noch ein wenig klarer gemacht habe.

Das WAVE-Tool: unverzichtbarer Helfer bei der Erstellung barrierefreier Webseiten

WAVE heißt Web Accessibility Evaluation Tool und wird von webaim.org kostenlos zur Verfügung gestellt.

Die Bedienung ist simpel, man ruft folgenden Link auf: http://wave.webaim.org/, dort gibt man die URL der Webseite ein, die man prüfen möchte. Dann bekommen sie die Prüfergebnisse sehr detailliert angezeigt, ich mach hier mal einen Screenshot:

screenshot wave
screenshot wave

Links das Fenster mit dem Titel „Summary“ zeigt ihnen im Überblick, ob und welche Fehler noch auf der Seite sind. Das Ziel ist, möglichst auf 0 Errors, möglichst wenige Alerts und wenns geht auch möglichst wenige Contrast Errors zu kommen. Ich möchte jetzt nicht weiter ins Detail gehen, zum WAVE-Tool werde ich sicher später noch mehr zu erzählen haben. Es reicht hier fürs Erste zu wissen, dass es dieses Tool gibt und dass es ein wertvolles und nahezu unverzichtbares Hilfsmittel bei der Erstellung barrierefreier Webseiten ist.

Hilfe, ich kriege XYZ Errors und Alerts angezeigt!

Keine Panik! Es gibt ein paar ganz typische Fehlerquellen in WordPress, bei  Formularen zum Beispiel geht gern mal was schief, und Contrast Errors sind bei manchen Themes auch erstmal zuhauf drin, wenn man an dem vorgegebenen Farbschema nichts ändert. Das ist aber alles relativ leicht zu bereinigen, dazu später mehr.

Was das WAVE-Tool nicht kann

Das WAVE-Tool ist ein mechanisiertes Werkzeug und kann keinesfalls Inhalte erkennen und prüfen, es würde keinen Grund zum Meckern finden, wenn sie in ihren Texten totalen Quatsch oder unverständliche Sprache schreiben. Es kann auch nicht erkennen, ob ihre Alt-Texte gut sind, sondern nur anmeckern wenn irgendwo einer ganz fehlt.

Und es kann auch nicht entscheiden, mit welchen Alerts man durchaus leben kann. Ein beliebter Alert ist zum Beispiel „Adjacent Links…“, das heißt dass zwei nebeneinander liegende Links zur selben Zieladresse führen. Das ist bei manchen WordPress-Themes einfach ein Design Feature, damit kann man aber im Zweifelsfall leben, wenn auf der Seite sonst keine groben Fehler sind.

WAVE ersetzt nicht die fachmännische Beratung

Solche Zweifelsfälle wie den eben genannten gibt es öfter, und am Anfang tut man sich schwer zu entscheiden, wo man nun korrigierend eingreifen muss und wo nicht. Dafür gibt es aber solche Informationsquellen wie den Erstberatungsdienst der Architektenkammer Bayern.

Die werden ihnen nicht die Arbeit abnehmen, die oben in unserer Vier-Punkte-Liste genannten Grundvoraussetzungen für barrierefreie Webseiten umzusetzen. Aber die werden sie kompetent beraten, wenn sie schon mal so weit gediehen sind, daß das WAVE-Tool nur noch einige wenige Errors und Alerts anzeigt. Dann werden sie wertvolle Tipps bekommen, wie man diese Fehler ausmerzt und wo man auch vielleicht gar nichts machen muß.

Ein Wort in eigener Sache

Und da sind wir jetzt sauber bei mir und dieser Beitragsreihe gelandet: ich versuche hier, meine Erfahrungen und mein in Zusammenarbeit mit den Fachleuten von der Pfennigparade erworbenes Know-How in Sachen barrierefreie Webseiten zu dokumentieren und allgemein verständlich aufzubereiten.

Ich bin bei meinem ersten Barrierefrei-Projekt, dem Inselfisch-Kochbuch, viel auf die Nase gefallen und habe mir einen Haufen  Arbeit machen müssen, die nicht nötig gewesen wäre, wenn ich es von Anfang an richtig gemacht hätte. Alleine das nachträgliche  Einpflegen von vernünftigen Alt-Texten für meine Illustrationen hat mich tagelang aufgehalten!

Barrierefreie Webseiten für alle – kein unerreichbares Ziel

Damit es ihnen nicht so geht, damit sie vom Start weg die richtigen Prioritäten setzen und die wichtigsten Regeln von Anfang an beachten, dafür ist dieses Blogthema hier gedacht. Barrierefreie Webseiten für kleine und mittlere Unternehmen und sogar für private Hobby-Blogger sind kein unerreichbares Ziel, sie sind mit vertretbarem Aufwand zu realisieren, wenn man ein paar Grundregeln beachtet und bereit ist, sich etwas in die Materie einzuarbeiten.

Und das ist ein guter Schlußgedanke, deswegen mach ich hier mal einen Punkt.

Barrierefreie Webseiten mit WordPress: wir haben’s schon fast geschafft!

Gehen wir mal davon aus, der Kunde hat sich für eine Realisierung seiner Webseiten mit WordPress entschieden. Die Inhalte der Webseiten sind soweit abgeklärt, die Menüstruktur steht auch schon, jetzt geht es an die Umsetzung.

Gehen wir weiter davon aus, dass er das Thema Barrierefreiheit ernst nimmt und ihnen den Auftrag gegeben hat, das bei der Erstellung seines Webauftritts zu zu berücksichtigen. Na dann, legen wir mal los.

Bestandsaufnahme in Sachen Barrierefreiheit

Also, wir machen mal eine kleine Bestandsaufnahme. Was haben wir bisher in Sachen Barrierefreiheit erreicht? Schon ganz schön viel, ich mach mal eine Liste.

  • wir haben uns zu allen Bildern und Grafiken auf der Webseite vernünftige, aussagekräftige Alt-Texte überlegt
  • wir verzichten ganz auf zappelige Animationen und legen stattdessen eine schöne Galerie-Seite mit kurzen Beschreibungstexten zu jedem Bild an
  • wir haben uns eine vernünftige Strukturierung aller Seiten und Beiträge überlegt (Stichwort Sitemap) und wenden die entsprechenden HTML-Tags sachgerecht an – besonders die Überschriften!
  • wir haben alle Texte gut redaktionell bearbeitet, so daß sie aussagekräftig und leicht verständlich sind

Fällt ihnen an dieser Liste etwas auf? Das sind eigentlich Selbstverständlichkeiten, auf die ein guter Webdesigner immer achtet, auch wenn es jetzt nicht speziell um barrierefreie Webseiten geht. Das ist nämlich ein nicht zu unterschätzender Vorteil, wenn man die WCAG-Richtlinien beachtet: man wird automatisch sauberer arbeiten, und das verbessert wiederum das Suchmaschinen-Ranking.

Was fehlt jetzt noch? Ein Theme!

Da muss man ein bisschen aufpassen, bei weitem nicht alle frei erhältlichen WordPress-Themes sind für die Erstellung barrierefreier Webseiten geeignet. Aber da gibt es praktischerweise bei wordpress.org eine umfangreiche Auflistung von Themes, die definitiv gut sind in Sachen Barrierefreiheit, da ist sicher etwas dabei mit dem ihr Kunde einverstanden ist. Schauen sie mal selber rein ins Theme-Verzeichnis mit dem Filter „für Barrierefreiheit geeignet“, da sollte wirklich für jeden etwas dabei sein.

Theme steht –  und jetzt?

Jetzt legen sie los und füllen ihre neue Webseite mit Leben, pflegen Texte und Überschriften ein, laden Bilder hoch, basteln Menüs und sortieren Widgets nach ihren Vorstellungen, machen ihre Anpassungen im Configurator… was man halt so der Reihe nach macht, wenn man eine neue Webseite mit WordPress erstellt. Da ist gar nichts weiter dabei, nur immer schön unsere 4-Punkte-Liste von oben beachten. Und wenn sie damit fertig sind, wird’s spannend:

Are you ready for the WAVE?

WAVE steht für Web Accessibility Evaluation Tool und ist ein Online-Werkzeug, mit dem sie sehr akkurat und aussagekräftig überprüfen können, wie gut ihre neu erstellte Webseite in Sachen Barrierefreiheit nun letztendlich ist.  Aber dazu gibt es einen neuen Beitrag.

Wenns blinkt und zoomt und zappelt: Animationen auf Firmen-Webseiten

Seit einigen Jahren ist die ohnehin schon unüberschaubare Bilderflut im Internet noch um eine Dimension unübersichtlicher geworden: die bewegten Bilder, alle unter dem Oberbegriff Animationen zusammengefasst. Da gibt es Diashows und Videos, Überblendungen und Jalousie-Effekte, Zoom-In und Zoom-Out und was nicht noch alles, Hauptsache es bewegt sich und zieht die Aufmerksamkeit der Besucher auf sich. Das hatte einen gewissen Statuswert, als bewegte Bilder im Web noch teuer und aufwendig in der Herstellung waren, aber heute kann jeder Hobby-Bilderbastler seine eigenen Animationen kreieren und ins Web stellen, das hat definitiv etwas von Verramschung an sich.

Meistens ist es eh nur Werbung

Mir gehen animierte Bilder eher auf den Wecker, als dass sie mich zum Bleiben und genauer Hinsehen veranlassen.  Ich suche auf Webseiten meistens  Informationen zu einem bestimmten fachlichen Thema, und wenn es da erstmal blinkt und flimmert, bin ich abgelenkt und irritiert, und klicke im Zweifelsfall ganz schnell wieder weg, weil es eh bloß wieder Werbung ist, die mich da so nervtötend anmacht.

Für sowas gibt es Ad-Blocker

Der Informationswert der Animationen geht in den meisten Fällen sowieso gegen Null, sie sollen wirklich nur die Aufmerksamkeit des Besuchers erregen und irgendwas verkaufen, das mit dem gesuchten Thema in den meisten Fällen rein gar nichts zu tun hat. Deswegen verwende ich in meinem Firefox auch einen sehr effektiven Ad-Blocker, und bleibe in den meisten Fällen von Blinkerbildchen verschont, aus die Maus. Webseiten, die von mir die Deaktivierung meines Ad-Blockers verlangen, haben Pech gehabt, die sehen mich nicht wieder.

Auch für Animationen gilt: Qualität gibts nur vom Profi

Die richtig gut gemachten Animationen, wie man sie z.B. auf den Werbeseiten richtig grosser Firmen sieht (BMW hat da tolle Sachen)  werden aufwendig von Profis produziert und kosten dementsprechend auch echt viel Geld. Die kann man sich dann schon mal anschauen, das sind halt gut gemachte Werbefilme, sowas lasse ich mir gerade noch eingehen.

Für den kleinen und mittleren Betrieb aber gilt, ähnlich wie für den Einsatz von Fotos: selbst Gebasteltes wirkt immer dilettantisch. Eine Diashow ist nur so gut wie die Fotos, die sie zeigt, und da kann man Amateurschnappschüsse aus der Digicam oder vom Handy einfach nicht für eine Firmenwebseite verwenden. Für eine gut gemachte Animation müssen sie also Geld hinlegen und einen Profi beauftragen, und selbst dann ist noch die Frage: brauchen wir das wirklich? Oder tut es auch eine Extra-Seite mit einer schön aufgemachten Fotogalerie, die sich der Besucher in aller Ruhe ansehen kann?

Ich möchte an dieser Stelle ein Argument in die Waagschale werfen, das ein ganz anderes Thema in die Diskussion einbringt:

Barrierefrei und Animationen – das geht gar nicht!

Oder nur sehr eingeschränkt, um es genau zu sagen. Sie müssen sich das mal so vorstellen: wenn sie z.B. als Sehbehinderter auf einen Screenreader angewiesen sind, können sie mit Bildern nur anhand der hoffentlich vom Webdesigner gut gepflegten Alt-Texte etwas anfangen. Der Alt-Text oder auch Alternativtext ist nämlich genau dafür da, Informationen über das jeweilige Bild zu liefern, wenn ein Benutzer es nicht sehen kann.

Wenn jetzt in einer Animation z.B. zehn oder zwanzig Bilder durchlaufen, muß der Screenreader zehn oder zwanzig mal den Alt-Text zu jedem Bild vorlesen, so er denn vorhanden ist. Meistens wird bei der Erstellung von bewegten Animationen nämlich glatt vergessen, zu jedem Bild den Alt-Text vernünftig einzugeben!

Typischerweise heißt das dann so ähnlich wie  picture001, picture002… picture100, einfach weil der Animationsprogrammierer geschlampt hat, und damit hat der Alt-Text keinerlei Aussagekraft für den Screenreader-Benutzer. Ganz davon abgesehen, dass es ewig dauert, bis man mit dem Screenreader durch alle Bilder durch ist.

Also gar keine Animationen auf barrierefreien Webseiten?

Habe ich die Problematik klar dargestellt? Ich hoffe schon, denn das Thema ist mir sehr wichtig. Mir hat der Fachmann von der Pfennigparade, mit dem ich wegen der barrierefreien Gestaltung meines Inselfisch -Kochbuchs zusammengearbeitet habe, die Sache so auf den Punkt gebracht:

Animationen auf barrierefreien Webseiten gehen nur, wenn sie sich nach kurzer Zeit (wenigen Sekunden) selbst abschalten oder vom Besucher direkt abgeschaltet werden können, damit eine störungsfreie Arbeit mit dem Screenreader gewährleistet ist.

Na, das ist doch eine klare Aussage.

Wie habe ich diese Anforderungen umgesetzt?

Wissen sie, was ich gemacht habe? Leichten Herzens sämtliche Diashows und Blinkerbildchen und Überblendungen und was nicht noch alles aus meinen privaten Webseiten rausgeschmissen habe ich. Mich stattdessen lieber auf selbstgemalte Illustrationen und ausgesucht schöne Fotos konzentriert, und auch ein bißchen mehr Aufmerksamkeit auf gute Alt-Texte gelegt.

Ich habe auch wesentlich mehr Zeit in die sorgfältige Bearbeitung der Bilder für meine Webseiten investiert, in die Wahl des richtigen Bildausschnitts, in die bildschirmgerechte Farbdarstellung, Kontrastverbesserung, Weißabgleich und dergleichen professionelle Tricks mehr, das kann man alles prima mit GIMP machen, der steht dem Photoshop da in nichts nach.

Und soll ich ihnen was sagen? Meine Seiten sind viel schöner geworden, ruhiger, gepflegter, dem Auge einfach angenehmer. Ich vermisse die bewegten Bildchen null die Bohne, und meine Besucher auch nicht, sonst hätte ich nicht steil steigende Besucherzahlen, seit das Inselfisch-Kochbuch barrierefrei geworden ist und komplett auf Animationen verzichtet.

Das ist vielleicht ein Denkanstoss für sie, wenn sie am Thema Barrierefreiheit interessiert sind.