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!
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!
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!
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.:
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:
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.
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.
Ein Dokument ist im üblichen Sprachgebrauch ein Schriftstück, allenfalls wird noch ein Word-Dokument so genannt. Im Internet-Sprachgebrauch heißt eine Webseite auch ein Dokument, und es gibt ellenlange theoretische Abhandlungen über das sogenannte DOM (Document Object Model), hier bei Wiki kann man es ganz genau nachlesen.
Man kann es aber auch ganz einfach ausdrücken: eine Webseite ist nichts anderes als ein HTML-Dokument, das nach festen Regeln erstellt ist und bestimmte Elemente enthält, die in der HTML-Definition festgelegt sind. Diese Elemente sind standardisiert und werden von ihrem Web-Browser interpretiert und grafisch dargestellt.
Der heutige Standard ist HTML 5, eine sehr gute Dokumentation der Sprachelemente findet man hier bei selfhtml.
Beispiel für ein HTML-Element: eine simple Tabelle
Eine Tabelle in HTML sieht im einfachsten Fall so aus:
Das erzeugt eine zweispaltige Tabelle mit den Spaltenüberschriften „Vorname“ und „Name“, und einer Tabellenzeile mit den Werten „Evi“ und „Leu“. Im Browser sieht das dann so aus:
dom tabelle
Das ist schon alles. Was die einzelnen Tags wie <table>, <tr>, <td> usw. bedeuten lernt man in HTML für Anfänger 1, erstes Semester, und das kann auch jeder selber googlen.
Es soll hier mal reichen, wir wollten ja nur ein Beispiel dafür haben, wie ein DOM-Element aussehen kann.
Wer braucht das – wir machen doch unsere Webseiten mit WordPress (oder InDesign oder…)
Natürlich programmiert heute niemand mehr HTML „zu Fuß“, dafür gibt es grafische Bedienoberflächen und WYSIWYG-Editoren zuhauf, die einem die lästige Arbeit mit den ganzen Tags abnehmen und es in komfortablen grafischen Editoren erlauben, HTML-Dokumente so einfach zusammenzustellen wie man einen Brief in Word schreibt.
Trotzdem sollte man als Webdesigner seine HTML-Elemente genauestens kennen und richtig einsetzen, und das ist beileibe nicht selbstverständlich, da wird im Web geschlampert und geflickschustert, was das Zeug hält. Jeder kennt die Regeln zumindest theoretisch, kaum jemand wendet sie richtig an. Für Überschriften sind h1..h6 vorgesehen, eine Tabelle formatiert man mit Hilfe des <table>-Tags, es gibt nummerierte Listen, es gibt Image-Tags für die Bilder… das sind viele, aber doch nicht endlos viele. Eine hübsche komplette Liste aller HTML5-Tags findet ihr hier bei MDN Web Docs
DOM sauber umgesetzt: Trennung von Text und Formatierung
Die Idee dabei ist, Text und Formatierung sauber zu trennen, und so wohlstrukturierte Dokumente zu erstellen.
Ein einfaches Beispiel: eine Hauptüberschrift soll fett, in Arial und in 30 Punkt Größe angezeigt werden. Was macht der WYSIWYG-Webdesigner? Er markiert den betreffenden Textabschnitt, drückt auf das Icon für „fett“, wählt in der Dropdownliste für die Schriftart „Arial“ und scrollt in der Schriftgrößen-Zahleneingabe rauf bis 30. Das erzielt zwar den gewünschten Effekt, aber es ist technisch nicht sauber.
Wie gehts richtig? Die Überschrift erster Ordnung kriegt die Tags <h1>…</h1>, und wenn man es nicht dem Browser überlassen will wie eine Überschrift erster Ordnung dargestellt wird, legt man es in seiner CSS-Datei fest. Hierhin kommen unsere Textattribute, wenn man es richtig machen will.
Das ist erstens weniger Arbeit bei der Formatierung, und zweitens hat es den unschlagbaren Vorteil, daß ich bei Änderungswünschen – der Kunde hätte jetzt doch lieber eine andere Schriftart für die Überschriften – nicht alle Überschriftszeilen einzeln anfassen muß, sondern die Änderung einmal zentral in der CSS festlege, und fertig.
Saubere Gliederung
Das habe ich bei der Umarbeitung meiner Webseiten auf barrierefrei neu lernen müssen, bei mir hatte sich da über die Jahre auch eine gewisse Schlamperei eingeschlichen. Ich schreibe ja sehr viel Text, und lange Textwüsten auf einer Webseite sind absolutes Bildschirmgift, die liest kein Mensch. Also, umdenken, Text in kürzere logische Einheiten unterteilen, Zwischenüberschriften einfügen, wo es Sinn macht, Listen und Tabellen verwenden. Das erhöht die Lesbarkeit und hält den Besucher bei der Stange, weil er nicht von unstrukturierten Endlostexten gelangweilt wird.
Einfaches Beispiel: Rezepte mit Struktur
Ich hätte da wieder das einfache Beispiel: alle meine Rezepte im Inselfisch-Kochbuch haben die selbe logische Gliederung:
Einleitung
Zutaten
Zubereitung
Tipps
Diese Elemente sind als h2-Überschriften formatiert. H1 kriegt der Titel des jeweiligen Rezepts, das ist einfach der Beitragstitel aus WordPress. Der Text dazwischen ist einfach <p> wie Absatz. That’s all, nach diesem Muster schreibe ich alle meine Rezepte. Ich muß nicht drüber nachdenken wie ich es mache, und es hat bei meinem Publikum einen hohen Wiedererkennungswert und dient der allgemeinen Übersichtlichkeit und Verständlichkeit. Mehr ist nicht dran an der Strukturierung – machen muß man es halt!
Übrigens: Suchmaschinen lieben klar strukturierte HTML-Dokumente (Stichwort Sitemap). Benutzer mit Handicap (Screenreader & Co.) lieben sie auch, weil sie so klar durch das Dokument navigieren können. Deswegen ist eine gute Textstrukturierung auch eine der wichtigsten Voraussetzungen der Barrierefreiheit nach WCAG.
Von Anfang an richtig machen, dann ist das ganz leicht!
Ich habe für die Umstellung des Inselfisch-Kochbuchs auf barrierefreie Strukturierung etwa 200 Rezepte nachträglich mit einer sauberen HTML-Auszeichnung versehen, und glauben sie mir, das war einen Sysiphos-Arbeit, da bin ich tagelang gesessen!
Wenn ich von Anfang an mit sauberen Zwischenüberschriften und klaren Gliederungsebenen gearbeitet hätte, wäre der Weg zur Barrierefreiheit wesentlich kürzer gewesen.
Deswegen kann ich für neue Webseiten-Projekte nur empfehlen: machen sie es von Anfang an richtig. Überlegen sie sich gut, wie sie ihre Seite in logische Elemente gliedern, und halten sie sich an diese Logik. Es wird ihnen bald wie mir gehen: das Gliedern längerer Texte mit Zwischenüberschriften ist mir inzwischen in Fleisch und Blut übergegangen, das mache ich mittlerweile ohne groß darüber nachzudenken. So macht klares, strukturiertes Webdesign richtig Spaß, und meine Besucher lieben es, ob mit Handicap oder ohne.
Ich habe im vorigen Beitrag angesprochen, wie wichtig es ist, auf seiner Webseite immer wieder Neues zu bieten. Das hält die Besucher bei der Stange, sie kommen wieder weil sie neugierig sind und gern aktuelle Beiträge lesen. Es gefällt auch den Suchmaschinen, Seiten die öfter aktualisiert werden haben ein besseres Ranking. Man muss sich also ständig was Neues einfallen lassen, und das ist manchmal gar nicht so einfach. Es ist aber auch gar nicht in jedem Fall notwendig, ständig umfangreiche Änderungen und Neuerungen vorzunehmen.
Für wen reichen kleinere Aktualisierungen?
Für den Friseurladen, für den Arzt oder Anwalt, für den Installateur und für die kleine Kneipe an der Ecke, und für viele kleinere Betriebe mehr, die nur ihre Visitenkarte im Web stehen haben. Für die reicht es völlig, wenn man darauf achtet dass so Sachen wie Öffnungszeiten und Betriebsferien aktuell eingepflegt werden, mehr brauchts nicht. Ihren Kunden reicht das völlig, die müssen nur wissen wann sie erreichbar sind oder wann ihr Geschäft geschlossen ist. Punkt, fertig. Dabei kann man es belassen.
Wer braucht ein bißchen mehr, und woher nimmt man die neuen Inhalte?
Das ergibt sich ganz logisch aus der Art und Weise, wie sie ihr Geschäft führen. Wenn sie ihren Kunden regelmäßig über ihre Aktionen informieren wollen, gehört das aktuell auf ihre Webseite. Ein paar Beispiele:
Die Metzgerei hat wöchentliche Sonderangebote und ein täglich wechselndes Mittagsgericht,
der Steuerberater schickt einmal im Monat ein Mandantenrundschreiben mit aktuellen Steuerinformationen hinaus,
das Schuhgeschäft macht Sommerschlußverkauf oder eine Sonderaktion für günstige Kinderschuhe
der Jägerwirt bringt immer Montags die Wochenkarte heraus
die kleine Ferienpension in Königsdorf informiert vierteljährlich über für Touristen interessante Veranstaltungen im Landkreis Bad Tölz/Wolfratshausen
der Lebensmittelladen an der Ecke hat diese Woche italienische Spezialitäten im Angebot
Sie sehen, es ist gar nicht so schwer, stets aktuelle Inhalte für ihre Webseiten zu finden. In den meisten Fällen haben sie so etwas nämlich schon, es muss nur noch ins Internet gestellt werden.
Wer stellt die aktuellen Inhalte dann ins Web?
Ich. Zum Beispiel. Ihr Webdesigner macht das für sie, und dafür gibt es sogenannte Wartungsverträge, die entweder pauschal oder nach Aufwand abgerechnet werden.
Es wird zwar immer wieder gesagt, dass zum Beispiel mit WordPress gestaltete Webseiten so einfach zu bedienen sind, dass der Endanwender selbst leicht Änderungen vornehmen kann, aber meiner Erfahrung nach macht das niemand. Man überlässt Aktualisierungen lieber dem Fachmann oder der Fachfrau und zahlt halt ein bißchen was dafür, kann dafür aber sicher sein dass alles klappt und die Änderungen sicher und termingerecht eingepflegt werden.
Zugekaufte Inhalte, auch das geht
In meiner Aufzählung oben ist ein kleiner Sonderfall enthalten: der Steuerberater nämlich mit seinem Mandantenrundbrief. Diesen erstellt er nämlich nicht selbst, das wäre zuviel Aufwand. Nein, der Mandantenrundbrief wird gegen eine recht geringe Gebühr bei einer Firma abonniert, die sich auf sowas spezialisiert hat. Man bekommt den aktuellen Rundbrief dann monatlich als Word-Datei zugeschickt, setzt seinen eigenen Briefkopf rein und verschickt das Schreiben dann an seine Klienten, per Post oder per E-Mail. Wir machen dann noch ein PDF draus und stellen das Mandantenrundschreiben monatlich zum Download auf die Webseite, und schon haben wir monatlich aktualisierte Inhalte. So einfach ist das!
Abonnements für aktuelle Informationsschreiben an Kunden gibt es übrigens für viele Branchen, auch für Ärzte oder Anwälte oder ähnliche Berufe, und die kosten wirklich nicht die Welt. Da kann man schon einmal ein paar Euro investieren, aber achten sie unbedingt darauf, dass sie mit dem Abonnement auch die Berechtigung erwerben, die Schreiben in ihrem eigenen Namen zu veröffentlichen. Das ist zwar meistens so dabei, aber lieber vorher absichern statt nachher feststellen, das sie es gar nicht auf ihrer Webseite verwenden dürfen.
Mein liebster Sonderfall: der immer aktuelle Blog
Ich bin ein vielseitiger Mensch mit vielen verschiedenen Hobbies, und ich rede gerne über meine Interessensgebiete. Ich schreibe aber auch sehr gerne, deswegen ist der Blog das ideale Vehikel für mich, um mich meinem Publikum mitzuteilen.
Bloggen mit WordPress
Meine Blogs laufen alle auf WordPress, und auch für meine Kunden werden so gut wie alle Webseiten auf WordPress-Basis realisiert. WordPress wird heutzutage oft als CMS (Content Management Software) verkauft, aber es ist zuallererst nicht mehr und nicht weniger als die ideale Blogsoftware. In vielen Jahren der Entwicklung ausgereift, super easy zu bedienen, mit tollen Features und unzähligen Plugins zur Funktionserweiterung, und das Ganze auch noch Open Source und kostenlos. Einfach perfekt – zum Bloggen, wohlgemerkt.
Kann jeder Bloggen?
Aber bevor sie jetzt ihre Kunden animieren, auf seiner Internetseite ständig aktuelle Blogbeiträge über seine Firma einzustellen, überlegen sie es sich dreimal. Nicht jeder ist zum Schreiben geboren, und bei weitem nicht jede Firma gibt soviel Blogstoff her, dass man da ständig neue Beiträge verfassen könnte. Meistens werden neue Blogs enthusiastisch angefangen, und nach wenigen Wochen stellt man fest, dass einem der Stoff ausgeht und man nichts Neues mehr zu erzählen hat. Dabei ist das Wichtigste an einem Blog, dass er lebt und wenigstens alle paar Tage mal Neuigkeiten eingestellt werden. Nichts ist tödlicher langweilig und peinlicher als ein sterbender Blog, in dem die Beiträge nur noch sporadisch eintröpfeln und schließlich ganz versiegen. Nein, lassen sie es lieber bei den wöchentlichen Sonderangeboten und beim monatlichen Mandantenrundbrief, das ist besser für sie und ihre Kunden.
So, jetzt haben wir also die hübschen aktuellen Inhalte für unsere Webseiten für’s Geschäft. Fehlt noch was? Die grafische Gestaltung natürlich, und die Bilder! Aber dazu gibts dann unbedingt einen neuen Beitrag.
