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 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
Klicken sie hier auf die Schaltfläche „Optionen“ und stellen sie diese wie im nächsten Screenshot gezeigt ein:
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?
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:
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
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!
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:
<labelfor="firstname">First name:</label><inputtype="text"name="firstname"id="firstname"><br><inputtype="checkbox"name="subscribe"id="subscribe"><labelfor="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!
Ich bin wahrlich kein Microsoft-Fan, aber Microsoft Access ist meiner Ansicht nach das am meisten unterschätzte fantastische kleine Datenbankpaket auf dem Markt. Es begleitet mich seit Mitte der 80er Jahre und hat sich seitdem nicht grundlegend geändert. Warum auch, denn die zugrundeliegende Datenbankengine Jet ist ein vollwertiges SQL-Paket mit allem drum und dran und hat sogar einige Features, von denen sich das heute allgegenwärtige MySQL eine Scheibe abschneiden könnte. Ich nenne hier nur beispielhaft Kreuztabellen (Pivot-Tabellen) und voll integrierte referentielle Integrität, das kann MySQL nicht bzw. nur mit den umständlichsten Verrenkungen.
Eine der ersten Windows-Datenbanken
Microsoft Access war eine der ersten Datenbanken mit einer voll grafischen Windows-Oberfläche und damit damals wirklich bahnbrechend, man war ja noch dBase für DOS und Clipper gewohnt. Und da kam Access mit einer anschaulichen und intuitiven Bedienoberfläche und machte damit die bisher so exklusive Kunst der Datenbankerei auch für Endanwender zugänglich.
Bedienkomfort und Funktionalität
Was war – und ist – so toll an der Windows-Oberfläche? Drei Module finde ich auch heute noch ungeschlagen in Funktionalität und Bedienkomfort:
den Abfrageeditor
die Beziehungsverwaltung
den Formulardesigner
Dazu kommt eigentlich noch die integrierte Programmiersprache VBA(Visual Basic, die Microsoft-Makrosprache), aber es kommt wirklich ganz, ganz selten vor dass man in Access etwas programmieren muss, die meisten Aufgaben lassen sich über die grafische Oberfläche lösen.
Wieso rede ich hier ständig von der Oberfläche?
Weil MySQL sowas nicht hat. MySQL per se ist eine „nackte“ Datenbank, und wenn man z.B. ein Formular haben möchte um Daten benutzerfreundlich optisch aufbereitet anzuzeigen, muss man sich eins in PHP und HTML programmieren. Sicher, es gibt Entwicklungsumgebungen und jede Menge Tools, die einem da das Leben leichter machen, aber einen integrierten Formulardesigner wie ihn Access hat – nee nee, den sucht man bei MySQL vergeblich.
Der Abfrage-Editor
Das gleiche gilt für den Abfrage-Editor. So etwas wie ein SQL-Editor ist zwar sehr rudimentär im phpmyadmin enthalten, aber meilenweit entfernt von der ausgefeilten grafischen Oberfläche, wie es Access hier bietet. Mit ein paar Klicks bindet man in Access seine Tabellen ein, definiert Beziehungen, wählt Felder und Bedingungen aus, gruppiert und sortiert Daten nach Belieben – und das ohne eine einzige Zeile SQL schreiben zu müssen.
Und wissen sie, was das allergeilste (‚tschuldigung) daran ist? Wenn man mit dem Abfrageergebnis zufrieden ist, kann man in den SQL-Modus schalten, sich das Statement herauskopieren und ohne großartige Änderungen in MySQL weiterverwenden. Meistens muss man nur ein paar einfache oder doppelte Hochkommata austauschen, und das Jet-SQL läuft auf der MySQL-Datenbank genau so fehlerlos wie es auf Access gelaufen ist. Das nenne ich Arbeitserleichterung allererster Sahne!
Die Beziehungsverwaltung
Mehrfache Joins über vier, fünf, zehn Tabellen? Hab ich in ein paar Minuten zusammengeklickt. m:n-Beziehungen mit Zwischentabelle? Ebenso. Visualisierung der Beziehungen innerhalb der Datenbank? Erstklassig, das kann man per Screenshot rauskopieren und sich gerahmt an die Wand hängen, so übersichtlich ist die grafische Oberfläche des Beziehungseditors. Ich zeig mal ein Beispiel mit importierten WordPress-Tabellen:
beziehungen in access
Das nenne ich übersichtlich! Sowas kann man auch mit zum Kunden nehmen, oder in Arbeitsbesprechungen mit den Kollegen als visuelle Gedächtnisstütze verwenden. Von sowas kann MySQL nur träumen!
Ja aber – unsere Daten stecken doch in MySQL!
Wo ist das Problem? Export der Tabellen als CSV im phpmyadmin, Import externer Daten nach Access, Beziehungen zusammenklicken und durchstarten, fertig und aus die Maus. Oder man geht gleich via ODBC direkt auf die mySQL-Tabellen, geht auch einwandfrei.
Gerade bei so unübersichtlichen Tabellenkonglomeraten wie sie in WordPress zusammengeschustert worden sind, ist Access mein Mittel der ersten Wahl, um den Überblick zu behalten.
So, jetzt habe ich aber genug geschwärmt. Access ist mein Arbeitspferd und zuverlässiger Entwicklungshelfer, wann immer es um Datenbanken geht, und ich kann ihnen nur ans Herz legen, sich auch mal damit zu befassen, es spart nämlich unheimlich Zeit und Nerven.
Wenn Access so toll ist, warum ist es dann nicht weiter verbreitet?
Weil Microsoft mit dem rasend erfolgreichen MS SQL-Server die Konkurrenz im eigenen Haus forciert, und weil Access nicht wirklich für Mehrbenutzer-Umgebungen geeignet ist. Aber am Einzelarbeitsplatz als Entwicklertool, da ist es einsame Spitze!
Ich habe mir eine neue Beitragskategorie überlegt, sie heisst „Der Werkzeugkasten“. Da kommen alle Tools, Hilfsprogramme, Tipps und Tricks rein, die ich in vielen Berufsjahren angesammelt habe und die ich für die tägliche Arbeit an meinen Webseiten nicht missen möchte.
Ich habe als allererstes mal das WAVE-Tool hineingesteckt, das wir für die Erstellung barrierefreier Webseiten so gut gebrauchen können.
Aber es gibt in meiner Sammlung noch viel mehr, vom lokalen Webserver (XAMPP) über den genialen Editor(Notepad++) bis hin zum kompletten professionellen Grafik- und Designprogramm (The GIMP), und noch vieles mehr. Die werde ich der Reihe nach in loser Folge vorstellen, und handfeste Tipps aus der Praxis zu ihrer Anwendung geben. Schließlich muss ein guter Webdesigner auch ein bisschen ein Universalgenie am PC sein, da sind gute Werkzeuge in vielfältiger Auswahl einfach unverzichtbar.
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
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.
