< Usability-Fragen | Gratulation: 2 Jahre YAML >

16 Okt 2007 »Nur ein Blog« barriereärmer gestalten, Stufe 1

Stufe 1 der praktischen Umsetzung der barriereärmeren Gestaltung von Roberts Blog im Rahmen der Accessibility Blog Parade wurde gestern gezündet. Was sich in dieser Stufe geändert hat, steht im Wesentlichen bei Robert. Wie es sich geändert hat und welche Änderungen Roberts Änderungswünsche in in einem Serendipity-Blog notwendig machten, beschreibe ich im Folgenden.

Die erste Änderung war eine Mischung aus Schusseligkeit und Unwissenheit. Bulletproof, auf dem Roberts Template basiert, hat Skiplinks, also zusätzliche Navigationshilfen für die Benutzer nicht-visueller Browser. Das Problem war nur: Sie funktionierten nicht, weil in den href-Attributen jeweils ein # fehlte … peinlich, peinlich. Zudem werden die Skiplinks nun in grafischen Browsern – wo sie nicht benötigt werden – mit einer anderen CSS-Technik ausgeblendet: Anstelle eines schnöden display: none; wird die skiplinks-ul nun absolut positioniert und aus dem Browserfenster verschoben.

Der fehlende Absendebutton im Suchfeld war hingegen nicht rein über CSS zu lösen, da benötigte es einen Eingriff in den Kern von Serendipity. In der Datei include/plugin_internal.inc.php wurde der Absendebutton »nachgerüstet«. Der Button ist »hart kodiert«, womit Benutzer, die ihn ausblenden wollen, das über CSS erledigen müssen. Soweit hat Roberts Projekt also bereits Wellen geschlagen – diese Änderung ist bereits in den Kerncode von s9y eingeflossen und wird in zukünftigen Versionen enthalten sein, womit nicht nur Roberts, sondern alle mit s9y betriebenen Blogs barriereärmer werden.

Die vermutlich weitreichendste Änderung war es, die Überschriften 1. Ordnung (h1) nicht länger dem Blog-Titel, sondern den Titeln der Einträge zuzuordnen, womit Artikel zum einen für Benutzer von nicht-visuellen Browsern und Screenreadern besser anzuspringen sind und zudem Artikel durch weitere Überschriften anderer Ordnungen besser strukturiert werden können. Das hat zur Folge, dass templateweit Überschriften nur für Eintragstitel verwendet werden dürfen, was wiederum zur Folge hat, dass man für einige Elemente andere, idealerweise semantisch korrekte oder zumindest geeignete Elemente finden muss. Für die bislang als h3 deklarierten Datumstrenner (.serendipity_date) sowie die Überschriften der Seitenleisten-Plugins wurde das über ein schnödes div gelöst – semantisch keine Heldentat, aber die naheliegende Lösung. Sehr viel besser zu lösen waren Blog-Titel und -Beschreibung im Header. Der Header ist nunmehr eine Definitionsliste (dl), in der der Titel der zu definierende Term (dt) und die Beschreibung die Definition (dd) ist. Natürlich ändert sich durch die veränderte Auszeichnung auch die Standardformatierung ein wenig, so dass im CSS nachgebessert werden musste.

0 Trackbacks

Trackback-URL

  1. Keine Trackbacks

0 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. Noch keine Kommentare

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.