Alle Beiträge von admin

Barrierefreiheit im Internet, Formulare, PHP, Plugins, Wordpress

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!

 

Barrierefreiheit im Internet, Blog (Weblog), Plugins, Wordpress

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!

 

 

Barrierefreiheit im Internet, CSS, Der Werkzeugkasten, HTML, Javascript

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.

 

Barrierefreiheit im Internet, Der Werkzeugkasten

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?

 

 

 

Barrierefreiheit im Internet, Der Werkzeugkasten, Qualitätssicherung

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!

Barrierefreiheit im Internet, Der Werkzeugkasten, Formulare, Wordpress

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!

Der Werkzeugkasten, HTML, PHP, SQL - MySQL, Wordpress

Mein Leib- und Magen-Datenbankerl: Microsoft Access

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
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!

 

Der Werkzeugkasten

Der Werkzeugkasten – nützliche Helfer für Webdesigner

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.

Barrierefreiheit im Internet, Blog (Weblog), Grafiken und Fotos, SEO - Suchmaschinen, Wordpress

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.

Barrierefreiheit im Internet, Blog (Weblog), Der Werkzeugkasten, Wordpress

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.