Barrierefreies Template für Serendipity

Mein Freund Moritz hatte mich davon überzeugt, mir einen Blog zuzulegen und mir gleich Serendipity empfohlen, also gut!

Nachdem ich das Blog erstellt hatte, fiel mir auf, dass das verwendete Standardtemplate nicht sonderlich barrierefrei war. Also habe ich einige andere mitgelieferte Templates ausprobiert aber keines gefiel mir so richtig gut. Daher wechselte ich wieder zum Standardtemplate “Bulletproof” und beschloss dies ein wenig umzuschreiben.

Um besser experimentieren zu können erstellte ich mir mit XAMPP einen lokalen Webserver und kopierte den Blog inklusive Datenbank. Nun konnte ich erstmal gefahrlos in den .tpl Dateien rumschreiben.

Im folgenden möchte ich stichpunktartig aufzählen, was ich warum geändert habe.

Startseite / Artikelübersichtsseite

• Überschrift - Tags angepasst: habe die h2 der Blogbeschreibung entfernt, daraufhin die restlichen h-Tags dekrementiert, um die Überschriftenhirarchie wieder einzuhalten, jeder Blogeintrag bekommt jetzt ein h2 - Tag zugewiesen
• Datum der Einträge verschoben und den h - Tag entfernt, Datum steht jetzt zusammen mit dem Verfasser nicht mehr zwischen Überschrift und Text sondern darunter, besser für Screenreader, da Seite linear von oben nach unten durchgegangen wird und das Datum meiner Meinung nach nicht so relevant ist, außerdem möchte ich nach Artikeln und nicht nach Datum gruppieren
• ARIA Landmarks eingefügt, role=“main” vor die Einträge und role=“navigation” darunter
• weitere Überschrift “Seitennavigation” eingefügt, ist nur für Screenreader sichtbar (habe die CSS Klasse genutzt, mit der auch schon die Sprunglinks am Anfang der Seite versteckt werden - so kann ich besser zwischen den Seiten navigieren, direktes Anspringen der Region möglich
• Zwei der vier Sprunglinks am Anfang der Seite entfernt, ich benötige nur die Sprungmöglichkeit zum Hauptinhalt und zur rechten Sidebar / Navigation

Seite für einen konkreten Blogeintrag

• Überschriftenhirarchie siehe oben
• Blogtitel und Beschreibung (wie Startseite) statt Eintragstitel (h1) und Blogtitel (h2) - wollte einen Link zur Startseite haben und gleichzeitig ein einheitliches Aussehen
• 2 weitere h3 - Tags eingefügt, “Kommentare” und “Kommentar schreiben” - so sind diese besser anspringbar, war vorher etwas mühsam, z.B. die Kommentare zu finden, h3 - Tag daher, weil diese Überschriften für mich formell zum jeweiligen Eintrag (h2) gehören
• Kommentare umgestaltet:
• verschiedene Darstellungsmodi entfernt, mir reicht eine lineare Kommentaranzeige
• nummerierte Liste statt unnummerierter
• Daten des Kommentierers und Text vertauscht, mit dem Screenreader kann man mittels Tastenkombination durch eine Liste durchgehen, drücke ich also beispielsweise 1x i komme ich zum nächsten Eintrag, wenn das dann gleich der Text ist, muss ich ihn nicht suchen (normalerweise interessiert mich erst der Text und dann evtl. wer ihn geschrieben hat
• Pflichtfelder bei Eingabe eines Kommentars habe ich sowohl mit einem “*” hinter dem jeweiligen Label als auch mit dem Atribut aria-required=“true” im Tag es Eingabefelds gekennzeichnet. Das Aria Atribut ist speziell für den Screenreader gedacht und teilt diesem mit, dass das Feld ausgefüllt werden muss. In meinem Blog sind die Angabe des Namens und ein Kommentar pflicht. Dies muss man für den jeweiligen Blog anpassen, insofern andere Pflichtfelder vorgegeben sind. Man kann die Einstellungen in der Datei “commentform.tpl” finden.

Sonstiges

Weiterhin ist es empfehlenswert das Standardcaptcha durch reCAPTCHA zu ersetzen (einfach unter Plugins nachinstalieren, Google Konto nötig). reCAPTCHA bietet neben den normalen Captchas auch eine Audioversion an, sodass es auch Screenreader Nutzern möglich ist, z.B. Kommentare zu verfassen (wenns auch manchmal etwas schwerer zu verstehen ist).

Außerdem habe ich die Anzeige der Trackbacks und Kategorien für die Artikel deaktiviert, da ich sie nicht benötige und es so übersichtlicher wird. Ebenso bin ich mit einigen Plugins wie der Sprachauswahl und den “Letzten Blogeinträgen” verfahren.

Probleme

Momentan habe ich noch ein paar Probleme, die mich aber nicht sonderlich stören - das Bloglayout erfüllt erstmal seinen Zweck. Beispielhaft sei hier die Darstellung der Überschriftenhirarchie auf der Feed - Seite genannt. Sollte da jemand Verbesserungen vornehmen oder Anregungen haben: ich nehme sie gern als Kommentar oder Mail entgegen.

Valides HTML

Mein Template ist nicht vollständig valide, dies liegt an den WAI ARIA Tags (z.B. Landmarks). Der Standardvalidator kennt u.A. das Objekt “role” leider nicht. Ich habe mich dennoch für die Landmarks entschieden, da sie für Screenreader Nutzer eine bessere Navigationsmöglichkeit bieten.

Download und Installation

Download des barrierefreien Templates

Nach dem Herunterladen muss das Template entpackt und in den Ordner “Templates” geschoben werden. Anschließend taucht es unter “Plugins verwalten” der Blogadministrationsseite auf und muss nur noch ausgewählt werden.