Die Navigation über Seitenregionen 
veröffentlicht in 2012
zuletzt bearbeitet in
Vorgehensweise für die Bestimmung von Seitenregionen
Mit Accessible Rich Internet Applications (ARIA) 1.0 wurden neue Möglichkeiten der strukturellen Navigation eingeführt. Mit den landmark roles kann eine Webseite in verschiedene Regionen unterteilt und für Hilfsmittel wie Screenreadernutzer ansteuerbar gemacht werden.
Es gibt insgesamt acht verschiedene Rollen, um per Tastatur ansteuerbare Regionen zu bestimmen, wobei sieben dieser Rollen vorzugsweise mit HTML-Elementen festgelegt werden sollten. Die Rollen werden nachfolgend vorgestellt.
Vier Schritte zu einer guten strukturellen Navigation
Wenn Regionen für eine Webseite festgelegt werden, dann sollten sie auch unter Berücksichtigung der strukturellen Navigation bestimmt werden. Allzu oft werden die Landmark roles – ob mit dem
role-Attribut oder mit HTML-Elementen – über eine Webseite "gestreut", unnötig verschachtelt und vor allem nicht bezeichnet, was im Extremfall dazu führen kann, dass die Seite weniger zugänglich ist als zuvor. Folgende vier Punkte sollten bei der Bestimmung von Seitenregionen beachtet werden:
1. Regionen einer Webseite identifizieren
Zunächst sollten die visuell wahrnehmbaren Regionen einer Seitenvorlage ermittelt werden. Die einzelnen Regionen sollten zusammenhängende oder miteinander verwandte Inhalte enthalten. Die Regionen sollten auch großzügig (und nicht kleinteilig) sein und dabei keine Inhalte auslassen. Diese Herangehensweise darf rekursiv erfolgen, d.h. nach einer Einteilung der Seiteninhalte kann für einzelne Regionen eine weitere Unterteilung vorgenommen werden, aber für die Praxis (Navigation zu den einzelnen Regionen einer Seite per Tastatur) sollte jede überflüssige Region vermieden werden. Beispielsweise wenn eine Navigationsregion von weiteren Links gefolgt wird, dann dürfen die Links selbstverständlich in der Navigationsregion stehen.
Für die Unterteilung der Webseite in Regionen ist es hilfreich, sich die einzelnen Regionen als Seitenabschnitte vorzustellen. Es sollte die Erstellung eines Inhaltsverzeichnisses möglich sein, die die Erschließung der Webseiteninhalte möglich macht. Am Ende des Prozesses soll der (Screenreader-)Nutzer von Bereich zu Bereich springen oder sich ein Inhaltsverzeichnis der Seite anzeigen lassen können.
2. Jede Region in einem eigenen HTML-Element fassen
Nachdem die Regionen festgelegt wurden, müssen sie auch softwaretechnisch identifizierbar sein. Im Allgemeinen wird dieser Schritt ohnehin befolgt: Die einzelnen Regionen der Seite benötigen ein eigenes Element wie ein DIV, das anschließend die Inhalte des Bereichs als einer Region zugehörig identifizieren wird.
<br />
<b>Warning</b>: include(code/div.inc): Failed to open stream: No such file or directory in <b>/home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php</b> on line <b>57</b><br />
<br />
<b>Warning</b>: include(): Failed opening 'code/div.inc' for inclusion (include_path='.:/opt/alt/php82/usr/share/pear:/opt/alt/php82/usr/share/php:/usr/share/pear:/usr/share/php') in <b>/home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php</b> on line <b>57</b><br />
3. Bestimmung der Rollen
Jetzt, wo die Seite in Regionen unterteilt ist, muss dem Browser auch mitgeteilt werden, welche Rolle die einzelnen Regionen haben. ARIA bietet dafür acht verschiedene Rollen. Sieben dieser Rollen können (und sollten) mit HTML-Elementen festgelegt werden. Es handelt sich dabei um die ASIDE-, FOOTER-, FORM-, HEADER-, MAIN-, NAV- und SECTION-Elemente. Die FORM- und
SECTION-Elemente werden im Gegensatz zu den anderen fünf Elementen nur dann als Region identifiziert, wenn sie mit einem aria-labelledby- oder aria-label-Attribut bezeichnet worden sind. Für die Rolle "search" gibt es keine HTML-Entsprechung und das role-Attribut muss eingesetzt werden.
| Rolle (ARIA) | HTML-Element | Zuordnungsmöglichkeiten |
|---|---|---|
role="banner" |
HEADER |
Eine Region, die Informationen über einen Abschnitt der Seite enthält (das kann das BODY-Element, aber auch ein ARTICLE-, ASIDE-, NAV- oder SECTION-Element sein). Das HEADER-Element darf auch im Kontext eines MAIN-Elements stehen. Das HEADER-Element kann mehrfach pro Seite vorkommen, erhält aber die Rolle eines Banners nur für das BODY-Element. |
role="contentinfo" |
FOOTER |
Eine Region, die Informationen über einen Abschnitt der Seite enthält (das kann das BODY-Element, aber auch ein ARTICLE-, ASIDE-, NAV- oder SECTION-Element sein). Das FOOTER-Element darf auch im Kontext eines MAIN-Elements stehen. Das
FOOTER-Element kann mehrfach pro Seite vorkommen (und enthält typischerweise Informationen zum Abschnitt wie z.B. Autor, Copyright-Informationen oder Links zu verwandten Dokumenten), erhält aber die Rolle einer Inhaltsangabe nur für das BODY-Element.
|
role="complementary" |
ASIDE |
Ein Abschnitt der Webseite, der zwar mit dem Inhalt verwandt sein kann, aber aussagekräftig bleibt, wenn er vom eigentlichen Abschnitt getrennt wird. Die Inhalte erhalten die Rolle einer ergänzenden Region. |
role="form" |
FORM aria-labelledbyFORM aria-label |
Eine Region, die eine Ansammlung von Formularelementen und Anweisungen enthält, die als Ganzes zu einem Formular kombiniert wird. Ein FORM-Element wird nur dann zu einer anspringbaren Seitenregion, wenn es mit einem aria-labelledby- oder aria-label-Attribut bezeichnet wird. |
role="main" |
MAIN |
Der Hauptinhalt eines Dokuments. Die Rolle darf nur einmal pro Seite vorkommen. |
role="navigation" |
NAV |
Ein Abschnitt der Webseite mit Links, um zu anderen Webseiten oder imnerhalb einer Webseite zu navigieren. Nicht alle Abschnitte mit Links müssen mit der Rolle "navigation" identifiziert werden; wenn FOOTER oder ASIDE besser geeignet sind, dann kann auf NAV verzichtet werden. |
role="region" |
SECTION aria-labelledbyFORM aria-label |
Eine Region, die wichtig genug ist, dass Nutzer direkt dorthin navigieren können sollen. Ein SECTION-Element wird nur dann zu einer anspringbaren Seitenregion, wenn es mit einem aria-labelledby- oder aria-label-Attribut bezeichnet wird. |
role="search" |
DIV role="search" |
Eine Region, die eine Suchfunktion einschließlich etwaiger Anweisungen enthält. Für diese Rolle gibt es keine Entsprechung in HTML. |
4. Regionen eindeutig bezeichnen
Jede Region einer Webseite sollte eindeutig identifizierbar sein. Wenn eine bestimmte Rolle nur einmal auf einer Webseite vergeben wird (was im Allgemeinen für die Rolle "main" und für die Rollen "banner" und "contentinfo" nach der ARIA-Spezifikation ebenfalls gelten sollte) so kann auf eine autorenseitige Beschriftung für diese Regionen verzichtet werden.
Eine Landmark role wie "navigation" kommt auf den meisten Webseiten aber mehr als einmal vor. Wenn eine Seite über eine Hauptnavigation, eine Fußleiste, eine Brotkrumennavigation und andere Navigationsbereiche verfügt, besitzen sie alle die gleiche Rolle und werden alle z.B. als "Navigationsregion" in einem Screenreader identifiziert. Regionen sollten deshalb
Fatal error: Uncaught Error: Call to undefined function mysql_query() in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php:124
Stack trace:
#0 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php(112): setScLinkToDb()
#1 /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/knowhow/landmark-roles/strategie-fuer-landmark-roles.php(91): sclink()
#2 {main}
thrown in /home/lfqdu6ah4gh6/migrated_webspace/www/bfw/lib/php/content_func.php on line 124