Bewährte Praktiken für Orientierungspunkte

Der Text sollte in einer bekannten Landmark-Region stehen.

In diesem Beispiel ist der gesamte Inhalt in einem Orientierungspunkt. Orientierungspunkte helfen, die verschiedenen Inhaltstypen zu erkennen.

  <header>
      <div>This is the header.</div>
  </header>
  <nav>
      <div>This is the navigation.</div>
  </nav>
  <main>
      <div>This is the main content.</div>
      <section>
          <div>This is a section.</div>
      </section>
      <article>
          <div>This is an article.</div>
      </article>
      <aside>
          <div>This is an aside.</div>
      </aside>
  </main>
  <footer>
      <div>This is the footer.</div>
  </footer>

Im Beispiel gibt es verschiedene Elemente, aber keines davon ist in Orientierungspunkten enthalten.

  <div>This is the header.</div>
  <div>This is the navigation.</div>
  <div>This is the main content.</div>
  <div>This is a section.</div>
  <div>This is an article.</div>
  <div>This is an aside.</div>
  <div>This is the footer.</div>

Mehrere Orientierungspunkte desselben Typs sollten verschiedene Labels haben.

Jeder Abschnitt hat ein Aria-Label, das sagt, worum es in dem Abschnitt geht.

<nav aria-label="Main Menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="services.html">Services</a></li>
  </ul>
</nav>
<main>
  <div>[...other content...]</div>
    <nav aria-label="Products list">
      <ul>
        <li><a href="1.html">Product 1</a></li>
        <li><a href="2.html">Product 2</a></li>
        <li><a href="3.html">Product 3</a></li>
        <li><a href="4.html">Product 4</a></li>
      </ul>
    </nav>
  </div>
  <div>[...other content...]</div>
</main>
<footer>
  <nav aria-label="Corporate and legal info">
    <ul>
      <li><a href="about.html">About us</a></li>
      <li><a href="copyright.html">Copyright notice</a></li>
      <li><a href="terms.html">Terms of use</a></li>
      <li><a href="contact.html">Contact us</a></li>
    </ul>
  </nav>
</footer>

Jedes Navigationsziel enthält eine einzigartige Art von Navigationsliste, aber die Navigationsziele sind nicht durch eine erkennbare Beschriftung gekennzeichnet.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="services.html">Services</a></li>
  </ul>
</nav>
<main>
  <div>[...other content...]</div>
    <nav>
      <ul>
        <li><a href="1.html">Product 1</a></li>
        <li><a href="2.html">Product 2</a></li>
        <li><a href="3.html">Product 3</a></li>
        <li><a href="4.html">Product 4</a></li>
      </ul>
    </nav>
  </div>
  <div>[...other content...]</div>
</main>
<footer>
  <nav>
    <ul>
      <li><a href="about.html">About us</a></li>
      <li><a href="copyright.html">Copyright notice</a></li>
      <li><a href="terms.html">Terms of use</a></li>
      <li><a href="contact.html">Contact us</a></li>
    </ul>
  </nav>
</footer>

Eine Seite sollte nicht mehr als eine Instanz der folgenden Orientierungspunkte enthalten: banner, main und contentinfo.

Jedes der ARIA-Landmarks “banner”, “main” und “contentinfo” wird genau einmal für den Hauptinhalt einer Seite verwendet.

Laut ARIA-Spezifikation darf jeder dieser drei Typen von Landmarks nur einmal pro Seite verwendet werden. Andere ARIA-Landmarks können mehrfach verwendet werden. Die HTML5-Spezifikation erlaubt mehrere Instanzen der entsprechenden Landmarks: <header>, <main> und <footer>. Diese Regel gilt nur für ARIA-Landmarks. Deshalb ist es bei den meisten Webdesigns besser, nur einen dieser Landmarks zu verwenden, egal ob mit ARIA oder HTML5.

<div role="banner">Visit Your Local Zoo!</div>
<div role="main">
  <h1>The Nature of the Zoo</h1>
  <article>
    <h2>In the Zoo: From Wild to Tamed</h2>
    <p>What you see in the zoo are examples of
    inborn traits left undeveloped. [...]</p>
  </article>
  <article>
    <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
    <p>Some animals naturally group together with their own kind,
    but others stake solitary claim on their territory.
    Even those that typically live harmoniously together can
    have bouts with romantic rivals, which can potentially
    escalate in the more confined setting of a zoo. [...]</p>
  </article>
</div>
<div role="contentinfo">
  <p>Brought to you by North American Zoo Partnership</p>
</div>

In diesem Beispiel wurden zwei Arten von Orientierungspunkten mehrfach verwendet.

<header>Visit Your Local Zoo!</header>
<h1>The Nature of the Zoo</h1>
<main class="article">
  <h2>In the Zoo: From Wild to Tamed</h2>
  <p>What you see in the zoo are examples of
  inborn traits left undeveloped. [...]</p>
  <div role="contentinfo">
    <p>[...information about this article...]</p>
  </div>
</main>
<main class="article">
 <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
  <p>Some animals naturally group together with their own kind,
  but others stake solitary claim on their territory.
  Even those that typically live harmoniously together can
  have bouts with romantic rivals, which can potentially
  escalate in the more confined setting of a zoo. [...]</p>
  <div role="contentinfo">
    <p>[...information about this article...]</p>
  </div>
</main>
<footer>
  <p>Brought to you by North American Zoo Partnership</p>
</footer>

Es sollten nicht zu viele Orientierungspunkte verwendet werden.

Sie können so viele Orientierungspunkte auf einer Seite einbauen, wie Sie wollen. Blinde Benutzer sollen schnell zum richtigen Orientierungspunkt finden und sich dort gut zurechtfinden. Deshalb sollten Sie nicht zu viele Orientierungspunkte verwenden. Sonst müssen Benutzer von Bildschirmleseprogrammen zu viele Informationen durchsuchen, um das Gesuchte zu finden.

Nur weil Sie Links als Navigationsziel markieren können, müssen Sie das nicht tun. Wenn Sie nur ein bis drei Navigationsziele haben, haben Benutzer keine Probleme. Bei 15 bis 20 Navigationspunkten kann es für Benutzer lange dauern, herauszufinden, welche Informationen sie enthalten.