Creating hierarchy and aiding user navigation with HTML (Part 2): Landmarks

Landmark Regions: Welche Art von Inhalt sie repräsentieren, wie sie definiert und identifiziert werden und wie eigene Custom Regions mit HTML und ARIA erstellt werden können.

Websites sind in verschiedene Regionen unterteilt, die durch unterschiedliche Gestaltung voneinander unterschieden und ihrem Inhalt entsprechend voneinander abgegrenzt werden können: Header, Footer, Main Content, Sidebars, ...

Orientierungspunkte beziehen sich auf verschiedene Regionen einer Seite. Sie setzen Erwartungen an die Art und Bedeutung des Inhalts, den sie enthalten. Sie ermöglichen dem Screen Reader User, sich auf der Seite zu orientieren und die einzelnen Regionen effizient mit der Tastatur zu erreichen.

Der AccTree liefert der Assistive Technology die Informationen über den Aufbau der Website. Um die Landmarks mit dem Screen Reader darzustellen, müssen sie mit semantischen HTML-Elementen gekennzeichnet werden. (Allerdings nutzen durchaus auch keyboard-affine Menschen diese Regionen zur Navigation.)

Relevante Success Criteria

SC 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
SC 2.4.1 Bypass Blocks (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Dieses Erfolgskriterium kann z.B. durch die korrekte Verwendung von Landmark Elements erfüllt werden.

Die 8 ARIA-Landmark-Typen/Rollen

Für jeden Orientierungspunkt existiert ein HTML-Element, das diesen Punkt semantisch repräsentiert und implizit der entsprechenden ARIA Rolle zuordnet.

Für die Anzahl der Landmarks auf einer Seite gilt: so viel wie nötig, so wenig wie möglich. Nur die Landmarks verwenden, die für die Orientierung und die Navigation auf der Seite wichtig sind. Noise vermeiden!

The banner landmark

Das <header>-Element hat die Rolle role="banner" und wird daher als Banner Region angezeigt. Das <header>-Element sollte das erste Kindelement des <body>-Elements sein. Es kann zwar auch in anderen Sections werden, wird dann aber nicht als <header>-Element ausgewiesen.

Enthält globale, webseitenorientierte Inhalte, die typischerweise auf allen/mehreren Seiten wiederholt werden (Logo, Navigation, Login, Suche, ...)

Inhalte, die sich auf eine bestimmte Seite beziehen, sollten nicht in dieser Region untergebracht werden.

The navigation landmark

Das <nav>-Element hat die implizite Rolle role="navigation".

Die Navigation enthält eine Sammlung von navigationsartigen Elementen (z.B. Links) zur Navigation auf einer Website. Auf einer Seite können beliebig viele Navigationen eingebunden werden. Wenn mehrere Navigationen auf einer Seite angezeigt werden, sollte jede Navigation einen accessible name/label erhalten, um dem Benutzer den Zweck der Navigation anzuzeigen. Das kann auf zwei Arten geschehen:

mit einem ARIA label Attribut:
<nav aria-label="Site">
mit einem ARIA labelledby Attribut: wenn eine Überschrift vorhanden ist, die den Zweck der Navigation angibt, kann diese mit der Navigation verbunden werden:
<nav aria-labelledby="categories_label"> <h2 id="categories-label">Categories</h2>

The main landmark

Kennzeichnet den Haupt-Inhalt der Seite. Diese sollte nur einmal pro Seite vorhanden sein. Das <main>-Element sollte ein direktes Kindelement des <body>-Elements sein.

The contentinfo landmark

Die Contentinfo enthält Informationen über das Elterndokument, typischerweise wird es durch das <footer>-Element repräsentiert. Wie der <header> wird auch der <footer> auf jeder Einzelseite der Website wiederholt. Dem <footer>-Element wird von den meisten Browsern die ARIA role="contentinfo" zugewiesen - sofern er ein direktes Kindelement des <body>-Elements ist.

The complementary landmark

Die Complementary Landmark enthält Informationen, die den Hauptinhalt ergänzen. Diese sollten den Hauptinhalt betreffen, aber auch ohne diesen leicht verstanden werden. Typische Teile sind Sidebars oder Call-Out-Boxes, typische Inhalte z.B. eine Liste mit verwandten Blogposts. Für die Complementary Landmark sollte das <aside>-Element verwendet werden. Sie sollte entweder ein Geschwister oder ein Kind des <main>-Elements sein. Good practice ist, den Inhalt mit einem beschreibenden Titel zu versehen. Auf einer Seite können, ähnlich wie bei der Navigation, mehrere complememtary landmarks angezeigt werden. Jede Landmark sollte mit einem passenden Namen versehen werden, um den Zweck anzuzeigen. Wenn es ein heading gibt, kann dieses mit dem aria-labelledby-Attribut als Name verwendet werden.

The form landmark

Jedes Formular sollte ein label haben, das beschreibt, wofür dieses Formular gedacht ist. <form> hat nicht automatisch die ARIA role="form"; diese wird nur zugewiesen, wenn das Formular einen accessible name hat. Wenn das Formular der Hauptinhalt der Seite ist, sollte es nicht als Landmark ausgezeichnet werden (unnötiger Lärm).

The search landmark

Die Search Landmark repräsentiert eine Sammlung von Elementen, die zusammen eine Suchmöglichkeit ergeben. Inhalte können durchsucht werden, ohne dass man sich durch die Navigation plagen muss.

Alte Methode - explizite Zuweisung zum HTML-Element

<form role="search" action="#" aria-labelledby="search_label">
  <label for="search">Search articles</label>
  <input type="text" id="search">
  <button type="submit">Search</button>
</form>

Heute: <search>-Element

Das <search>-Element wird auf die Search Landmark Role gemappt.

Bsp. 1: Search Landmark enthält ein abschickbares Formular:

<search>
  <form action="search.php">
    <label for="query">Find an article</label>
    <input type="search" id="query" name="q">
    <button type="submit">Go!</button>
  </form>
</search>

Bsp. 2: Such-Eingabefeld mit dynamischer Anzeige der Ergebnisse:

<search>
  <label>
    Find and filter your query
    <input type="search" id="query">
  </label>
  <section>
    <h3>Results found:</h3>
    <ul id="results">
      ...
    </ul>
    <output id="no-results" <!-- When no results are found, render the no results message here --></output>
  </section>
</search>

Find and filter your query

Results found:

...

Auf einer Seite dürfen mehrere Suchformulare eingebunden sein. Filter sind auch eine Art von Suche. Die Formulare müssen benannt werden: wenn es eine Überschrift gibt, die eine Suche beschreibt, kann diese Überschrift mit aria-labelledby verwendet werden.

Wenn es auf der Seite kein Element gibt, das als accName verwendet werden kann, kann man entweder das aria-label-Attribut verwenden oder man kann ein verstecktes Text-Label-Feld ergänzen und ebenfalls aria-labelledby zur Beschriftung verwenden.

<div class="search-ex">
  <search aria-label="Site">Main Search form</search>
  <p>oder:</p>
  <search aria-labelledby="site-search">
    <span id="site-search" hidden></span>
  </search>
  <h1>Hotels near your location</h1>
  <search aria-labelledby="filters-aria-labelledby="search_label">
    <h2 id="filters-label">Filter results</h2>
    <p>...</p>
  </search>
  <article>
    <p>Search result content</p>
  </article>
</div>

Main Search form

oder:

Hotels near your location

Filter results

...

Search result content

Region

Eine wahrnehmbare Region, die Inhalt enthält, der relevant für einen spezifischen Zweck ist und ausreichend wichtig, dass User gerne durch diese Region navigieren wollen können und in der Zusammenfassung der Seite aufgelistet haben möchten.

Wenn möglich, sollte eine der standardmäßig verfügbaren Landmarks verwendet werden! So wenige wie möglich, so viele wie nötig!

Die Region-Landmark hat keine eigene Rolle/Beschreibung, daher muss ein accName vergeben werden, der den Zweck des Inhalts beschreibt. Ein sichtbares Heading sollte mit aria-labelledby referenziert werden. Es gibt kein HTML-Element, das standardmäßig der Landmark Region zugeordnet wird. Das <section>-Element wird, wenn es einen accName hat, als Rolle Region ausgewiesen.

<!-- This section is exposed as a landmark region -->
<section aria-labelledby="editor_label">
  <h2 id="editor_label">Editor</h2>
  ...
</section>

Es ist auch möglich, ein <div> zu verwende, einen accName braucht es auch hier.

<!-- This div with an explicit region role is exposed as a landmark region -->
<div role="region" aria-labelledby="console_label">    
  <h2 id="console_label">Editor</h2>
  ...
</div>

Das <section>-Element ist aber die bessere Wahl, da die Region-Semantik schon eingebaut ist, es braucht kein zusätzliches ARIA-Attribut.

To expose an area as a landmark:

Wrap the content in a <section> (or a <div> with explicit role="region"
Give the <section> an accName.

Bestehende Landmarks mit ARIA korrigieren

Mit dem ARIA role-Attribut können landmark Semantics zu existierenden Elementen hinzugefügt werden. ARIA stellt role-Attribute für alle Landmark-Typen zur Verfügung.

Tools zum Visualisieren der Landmarks auf einer Website

WebAIM WAVE Browser Extension: Der Structure-Tab zeigt Infos über die Seitenstruktur an, inklusive der Landmarks und der Headings innerhalb der Landmarks.

Wenn landmarks korrekt eingesetzt werden, können sie das Benutzererlebnis dramatisch verbessern.