Inhaltsstruktur

Einer der wichtigsten Aspekte der digitalen Barrierefreiheit ist die zugrunde liegende Struktur der Seite. Wenn Sie Ihre Website oder App mit strukturellen Elementen erstellen, anstatt sich nur auf Stile zu verlassen, bieten Sie Menschen, die assistive Technologien (AT) wie Screenreader verwenden, kritischen Kontext.

Strukturelle Elemente dienen als Umriss der Inhalte auf dem Bildschirm, aber sie fungieren auch als Ankerpunkte, um die Navigation innerhalb des Inhalts zu erleichtern.

Wenn Sie semantische HTML-Elemente verwenden, wird die inhärente Bedeutung jedes Elements an den Baum für Barrierefreiheit weitergegeben und vom AT verwendet. Dadurch erhält der Inhalt eine höhere Bedeutung als nicht semantische Elemente. Es kann Fälle geben, in denen Sie zusätzliche ARIA-Attribute hinzufügen müssen, um Beziehungen aufzubauen oder die Nutzererfahrung insgesamt zu verbessern. In den meisten Situationen sollte jedoch eines der mehr als 100 verfügbaren HTML-Elemente für sich allein gut funktionieren.

In diesem Modul konzentrieren wir uns auf die am häufigsten verwendeten strukturellen Elemente, die für die digitale Barrierefreiheit entscheidend sind. Beim Einbau von Strukturen in Ihre Website oder App müssen Sie aber sicherlich zusätzliche Elemente und ökologische Faktoren berücksichtigen. Die Beispiele sind nur eine Einführung in das Thema und keine All-inklusivität.

Landmarken

Nutzer von AT erhalten Informationen über das Gesamtlayout der Seite mithilfe von strukturellen Elementen. Wenn Sie große Regionen von Inhalten trennen, können Sie entweder ARIA-Markierungsrollen oder die neueren HTML-Markierungselemente verwenden, um Ihrer Seite strukturellen Kontext hinzuzufügen.

Sehenswürdigkeiten stellen sicher, dass sich Inhalte in navigierbaren Regionen befinden. Es empfiehlt sich, mindestens eine Orientierungshilfe pro Seite anzugeben.

In einigen Ressourcen wird empfohlen, ARIA- und HTML-Markierungen zu kombinieren, um eine bessere AT-Abdeckung zu erzielen. Auch wenn diese Art von Redundanz bei Ihren Nutzern keine Probleme verursachen sollte, sollten Sie die Muster mit einem Screenreader testen, um sicherzugehen. Im Zweifelsfall empfiehlt es sich, standardmäßig nur die neueren HTML-Landmark-Elemente zu verwenden, da die Browserunterstützung sehr robust ist.

Vergleichen wir die HTML-Markierungselemente, wie sie zugeordnet sind, mit ihren jeweiligen ARIA-Markierungsrollen.

HTML-Markierungselement ARIA-Markierungsrolle
<header> Banner
<aside> Complementary
<footer> Inhaltsinfo
<nav> Navigation
<main> Hauptkamera
<form> 1 Formular
<section> 1 region
1 Für den Zugriff ist die Aufnahme des Attributs name erforderlich. Eine section muss barrierefrei benannt werden, damit ihre implizite ARIA-Rolle region für Hilfstechnologien sichtbar ist.

Vergleichen wir nun Beispiele für die Struktur barrierefreier Inhalte.

Don'ts
<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
Das sollten Sie tun:
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

Überschriften

Bei korrekter Implementierung bilden HTML-Überschriftenebenen eine prägnante Gliederung des gesamten Seiteninhalts.

Wir können sechs Überschriftenebenen verwenden. Die Überschrift der Ebene 1 (<h1>) wird für die höchsten und wichtigsten Informationen der Seite verwendet. Für die untersten und am wenigsten wichtigen Informationen werden die Informationen schrittweise in die Überschrift 6 <h6> verschoben.

Die Reihenfolge der Überschriftenebenen ist wichtig. Idealerweise sollten Sie Überschriftenebenen nicht überspringen und beispielsweise einen Abschnitt nicht mit einem <h1> beginnen und unmittelbar darauf mit einem <h5> folgen. Gehen Sie stattdessen der Reihe nach zum <h5> über. Die Reihenfolge der Überschriftenebene ist für AT-Nutzer besonders wichtig, da dies eine ihrer wichtigsten Möglichkeiten zur Navigation durch Inhalte ist.

Damit Sie die richtige semantische Struktur und Reihenfolge der Überschriften einhalten können, sollten Sie Ihre CSS-Stile von den Überschriftenebenen entkoppeln. Dadurch sind Sie im Hinblick auf Überschriftenstile flexibler und gleichzeitig bleibt die Reihenfolge der Überschriftenebene erhalten. Es ist wichtig, dass Sie zum Erstellen von Überschriften nicht nur Stile verwenden, da diese nicht von AT als Überschrift gesehen werden.

Wenn wir Überschriften fälschen, wird den AT-Nutzenden die entsprechende Struktur nicht vermittelt.

Überschriften sind auch hilfreich für Menschen mit kognitiven Störungen und Aufmerksamkeitsstörungen. Die Überschrift sollte aussagekräftig sein, damit die Nutzer verstehen, was auf der Seite am wichtigsten ist.

Don'ts
<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>
Das sollten Sie tun:
<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

Listen

Mit HTML-Listen können Artikel semantisch zueinander gruppiert werden, sodass sie eine inhärente Bedeutung haben, ähnlich wie eine Lebensmittelliste oder eine endlose To-do-Liste, die Sie immer wieder ignorieren.

Es gibt drei Arten von HTML-Listen:

Das Listenelement <li> wird verwendet, um ein Element in einer geordneten oder ungeordneten Liste darzustellen, während sich der Beschreibungsbegriff <dt> und die Definitionselemente <dd> in der Beschreibungsliste befinden.

Bei richtiger Programmierung können diese Elemente nicht sehende AT-Nutzer über die sichtbare Struktur der Liste informieren. Wenn ein AT auf eine semantische Liste stößt, kann er dem Nutzer den Listennamen und die Anzahl der darin enthaltenen Elemente mitteilen. Während der Nutzer durch die Liste navigiert, liest der AT jedes Listenelement vor und sagt, welche Nummer sich in der Liste befindet – Punkt eins von fünf, Punkt zwei von fünf usw.

Das Gruppieren von Elementen in Listen hilft auch sehenden Menschen mit kognitiven und Aufmerksamkeitsstörungen sowie Menschen mit Leseschwächen, da Listeninhalte in der Regel so gestaltet sind, dass sie mehr sichtbaren Leerraum haben und der Inhalt auf den Punkt kommt.

Don'ts
<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>
Das sollten Sie tun:
<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

Tabellen

In HTML werden Tabellen im Allgemeinen zum Organisieren von Daten oder zum Seitenlayout verwendet.

Je nach Zweck der Tabelle verwenden Sie verschiedene semantische Strukturelemente. Tabellen können sehr komplex sein, aber wenn Sie sich an die grundlegenden semantischen Regeln halten, sind sie auch ohne großen Eingriff leicht zugänglich.

Layout

In den Anfängen des Internets waren Layouttabellen das primäre HTML-Element, das zum Erstellen visueller Strukturen verwendet wurde. Heute verwenden wir eine Mischung aus semantischen und nicht semantischen Elementen wie <div>s und Orientierungspunkten, um Layouts zu erstellen.

Die Zeiten, in denen Layouttabellen erstellt wurden, sind größtenteils vorbei. Es gibt aber auch Zeiten, in denen Layouttabellen noch verwendet werden, beispielsweise in visuell ansprechenden E-Mails, Newslettern und Anzeigen. In diesen Fällen dürfen Tabellen, die nur für das Layout verwendet werden, keine Strukturelemente wie <th> oder <caption> verwenden, die Beziehungen vermitteln und Kontext hinzufügen.

Layouttabellen müssen auch für AT-Nutzer mit der ARIA-Präsentationsrolle oder dem aria-hidden ausgeblendet werden.

Don'ts
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>
Das sollten Sie tun:
<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

Daten

Im Gegensatz zu einer Layouttabelle, die vor AT-Nutzern verborgen sein sollte, müssen eine Datentabelle und alle zugehörigen Elemente verfügbar gemacht werden. Die Struktur von Datentabellen ist entscheidend, um Nutzern einfache und komplexe Informationen zu vermitteln.

Bei korrekter Strukturierung einer Tabelle bilden sich zwischen den Spaltenüberschriften und -zeilen und den Daten in der Tabelle Beziehungen. Bei einer fehlerhaften Strukturierung muss der Nutzer die Bedeutung und den Kontext der Informationen in der Tabelle entschlüsseln.

Je nach Komplexität der Tabelle werden Beziehungen durch Code auf unterschiedliche Weise aufgebaut. Wenn Sie eine Tabelle barrierefrei machen möchten, müssen Sie zuerst Überschriftenzellen mit <th> und Datenzellen mit <td>-Elementen auszeichnen.

Bei komplexeren Tabellen müssen Sie möglicherweise zusätzliche HTML-Tabellenelemente wie <rowgroup>, <colgroup>, <caption> und scope verwenden, um Bedeutung und Beziehungen zu vermitteln.

Don'ts
<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>
Das sollten Sie tun:
<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>