Landmark roles auf Webseiten-Infos.de

Landmark roles sind Bestandteil des Standardentwurfs Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA).

In meinem Blogbeitrag “WAI-ARIA und (X)HTML validieren!” avisierte ich einen weiteren Blogbeitrag.

Hier ist er! Mit diesem Blogbeiträg stelle ich vor, wie ich auf Webseiten-Infos.de der Orientierung dienende Rollen (landmark roles) eingebaut (implementiert) habe.

Vorsorglich der Hinweis, dass Du auch direkt der Orientierung dienende Rollen (landmark roles) in das Markup schreiben kannst. Ich wähle hier aber den Umweg über JavaScript, damit meine Webseiten weiterhin validieren. Einzelheiten hierzu kannst Du meinem Blogbeitrag “WAI-ARIA und (X)HTML validieren!” entnehmen.

Das dazu erforderliche JavaScript gibt es sowohl im Artikel “Patterns for WAI-ARIA landmark roles in existing HTML” von Peter Krantz als auch als Bestandteil seines Beispiels:

http://www.standards-schmandards.com/exhibits/aria/aria-landmarks-decorator.js

Oder direkt zum Kopieren:

Dieses JavaScript habe ich einfach in mein zusammengefasstes JavaScript für Webseiten-Infos.de kopiert und auf meinen Webspace geladen.

Weiterhin habe ich die CSS-Klassen

• ariarole-navigation,
• ariarole-main,
• ariarole-complementary,
• ariarole-banner,
• ariarole-search und
• ariarole-form

den Template-Dateien des von mir abgewandelten YAML-Green Themes (Update) von Michael Preuß hinzugefügt.

Noch nicht entschieden habe ich derzeit, ob ich ebenfalls die CSS-Klasse ariarole-contentinfo hinzufüge.

Wenn Du Dir den Quelltext der Webseiten von Webseiten-Infos.de anschaust, dann kannst Du dort diese CSS-Klassen finden.

Und schaust Du Dir die Webseiten von Webseiten-Infos.de mit dem Firefox Addon Juicy Studio Accessibility Toolbar oder mit YAML Debug von Dirk Jesse an, dann kannst Du die der Orientierung dienenden Rollen (landmark roles) sehen.

Mit einem modernen Screenreader habe ich das noch nicht getestet, aber Steve Falkner (siehe seine Seite “ARIA Landmark role tests – Firefox 3 & Internet Explorer 8 + Assistive Technology“).

Über Rückmeldungen, ob auf den Webseiten von Webseiten-Infos.de die Rollen funktionieren beziehungsweise inwieweit da noch Verbesserungsmöglichkeiten bestehen, würde ich mich freuen.

Kommentare

• 21. Februar 2010, Micha schreibt: Dieter, warum hast du nicht gleich die roles in den Templates geändert? Dann könntest du das Javascript einsparen. Ob du eine Klasse schreibst oder gleich die role ist meiner Meinung der selbe Aufwand.
• 21. Februar 2010, Dieter schreibt: @Micha

  Dieter, warum hast du nicht gleich die roles in den Templates geändert?

  Weil dann die Webseiten nicht mehr validieren (siehe dazu auch meinen vorhergehenden Blogbeitrag "WAI-ARIA und (X)HTML validieren!") oder meintest Du etwas anderes? Falls nein, werde ich diesen Blogbeitrag noch um den entsprechenden Hinweis, warum ich das mit JavaScript löse, ergänzen.
• 21. Februar 2010, Micha schreibt: Dieter, das liegt dann aber am Validator und nur weil der es nicht kann, scher ich mich noch lange nicht drum ;)
• 21. Februar 2010, Dieter schreibt: @Micha Das Arbeits- und Hilfsmittel Validator - insbesondere das Firefox-Addon HTML Validator - brauche ich und ist mir wichtig. Wenn der Validator nachgezogen hat, kann ich ja mit einem relativen kleinen Aufwand die landmark roles direkt ins Markup schreiben. ;-) Wenn es Dich nicht schert, dann kannst Du auch direkt HTML5 einsetzen. :tongue:
• 22. Februar 2010, Nico Steiner schreibt: Zu diesem Thema kann ich gleich noch auf meine zweite Firefox-Extension Semantic Checker hinweisen. Diese highlightet semantische Elemente einer Webseite und erstellt darüber eine kleine Statistik. Neben WAI-ARIA werden auch HTML4/HTML5 Elemente und Mikroformate erkannt. Ich habe die Extension geschrieben, da ich kein Tool kenne, dass semantische Elemente jeglicher Art "auf einen Klick" anzeigt.
• 22. Februar 2010, Dieter schreibt: @Nico Auf dieses zweite Firefox-Addon bin ich bei den Recherchen für den Blogbeitrag "SEO mit Firefox-Addon SenSEO" gestoßen. Ich finde es gut. Allerdings führt es lediglich die Anzahl der WAI-ARIA-Roles auf und umrahmt sie, gibt aber nicht an um welche es sich handelt. Insoweit sind da m.E. das Firefox Addon Juicy Studio Accessibility Toolbar und YAML Debug informativer. Sehr gefallen hat mir an Deinem Semantic Checker, dass auch Inline-Styles gezählt und angezeigt werden. Damit habe ich noch einige wenige überflüssige Inline-Styles in die CSS-Datei ausgelagert. Lediglich die beiden Inline-Styles von den Tooltipps (siehe hierzu meinen Blogbeitrag "Kurzinfos mit Fancy Tooltips aufgepeppt") und Antispam Bee (siehe hierzu meinen Blogbeitrag "Spam-Schutz auf Webseiten-Infos.de") werde ich wohl belassen (müssen).
• 22. Februar 2010, Nico Steiner schreibt: Danke für das Feedback. Ich habe das Feature gleich mal ergänzt und eine neue Version (0.8.0) veröffentlicht: http://tinyurl.com/ylhulbg Für die sich überlappenden Elemente lasse ich mir noch was einfallen.
• 23. Februar 2010, Dieter schreibt: @Nico Wow! Ich habe für die neue Version (0.8.0) des Semantic Checkers zu danken! Noch erkennt mein Firefox nicht die Aktualisierung, aber sobald sie dort verfügbar ist, werde ich sie vornehmen und die neue Version ausprobieren. Top!
• 14. Mai 2010, Mike schreibt: Ich bin Neuling im Bereich WAI-ARIA und überlege gerade wie ich für ein einfaches Formular (ein dynamisch generierter Text variabler Länge und eine Eingabe für den Nutzer zzgl. Submit-Button) so auszeichne, dass der beim Laden dynamisch erzeugte Bereich eine separaten Landmark Role o.ä. bekommt, die es einem Screen-Reader-Nutzer erlaubt, sich gezielt diesen Bereich wiederholen zu lassen, und zwar ohne die umgebenden Formular-Elemente (legend, input, button). Jemand eine Idee?
• 14. Mai 2010, Dieter schreibt: @Mike Tut mir leid, aber da bin ich überfragt. Für mich sind WAI-ARIA auch noch Neuland. Eventuell könnte Dir folgendes englischsprachige Buch helfen, auf das ich bei meiner Suche gestoßen bin: Universal Design for Webapplications
• 21. Dezember 2011, Rückblick: WordCamp 2010 | Webseiten-Infos.de schreibt: [...] Zudem wurde der künftige Standard Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA) kurz angesprochen (siehe dazu auch meine Blogbeiträge “WAI-ARIA und (X)HTML validieren!” und “Landmark roles auf Webseiten-Infos.de“). [...]

Ähnliche Beiträge

• WAI-ARIA und (X)HTML validieren!
• Rückblick: WordCamp 2010

Permalink | 11 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Firefox-Addon, Juicy Studio Accessibility Toolbar, landmark roles, Screenreader, Validierung, WAI-ARIA, Webseiten, YAML Debug, Zugänglichkeit