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, erhalten Nutzer mit Hilfstechnologien wie Screenreadern wichtigen Kontext.

Strukturelle Elemente dienen als Übersicht der Inhalte auf dem Bildschirm, aber auch als Ankerpunkte, die die Navigation innerhalb der Inhalte erleichtern.

Wenn Sie semantisches HTML-Markup verwenden, wird die Bedeutung jedes Elements an den Bedienungshilfen-Baum übergeben und von den Bedienungshilfen verwendet. Dadurch erhalten die Inhalte mehr Bedeutung als bei nicht semantischen Elementen. In einigen Fällen müssen Sie möglicherweise zusätzliche ARIA-Attribute hinzufügen, um Beziehungen aufzubauen oder die Nutzerfreundlichkeit insgesamt zu verbessern. In den meisten Fällen sollte jedoch eines der über 100 verfügbaren HTML-Elemente ausreichen.

In diesem Modul liegt der Schwerpunkt auf den am häufigsten verwendeten strukturellen Elementen, die für die digitale Barrierefreiheit entscheidend sind. Es gibt jedoch weitere Elemente und Umgebungsfaktoren, die Sie beim Strukturieren Ihrer Website oder App berücksichtigen sollten. Diese Beispiele sind eher eine Einführung in das Thema als vollständig.

Hinweis: Der Kurs „HTML lernen“ behandelt die Grundlagen von HTML und die semantische Struktur ausführlich. Dieses Modul baut daher auf diesem Material auf und konzentriert sich speziell auf die digitale Barrierefreiheit. Sehen Sie sich auch das Modul zu ARIA und HTML in diesem Kurs an.

Landmarken

Nutzer von Hilfstechnologien verlassen sich auf strukturelle Elemente, um Informationen zum Gesamtlayout der Seite zu erhalten. Wenn Sie große Inhaltsbereiche abgrenzen möchten, können Sie entweder ARIA-Markierungsrollen oder die neueren HTML-Markierungselemente verwenden, um Ihrer Seite einen strukturellen Kontext hinzuzufügen.

Markierungen sorgen dafür, dass sich Inhalte in befahrbaren Regionen befinden. Wir empfehlen, mindestens einen Markierungspunkt pro Seite anzugeben.

In einigen Ressourcen wird empfohlen, ARIA- und HTML-Markierungen zu kombinieren, um eine bessere Unterstützung für Hilfstechnologien zu bieten. Diese Art von Redundanz sollte zwar keine Probleme für Ihre Nutzer verursachen, testen Sie die Muster aber zur Sicherheit mit einem Screenreader. Im Zweifelsfall sollten Sie standardmäßig nur die neueren HTML-Landmark-Elemente verwenden, da die Browserunterstützung sehr robust ist.

Vergleichen wir die HTML-Markierungselemente, die den entsprechenden ARIA-Markierungsrollen zugeordnet sind.

¹ Für den Zugriff ist das Attribut name erforderlich. Ein section muss einen barrierefreien Namen haben, damit seine implizite ARIA-Rolle region für Hilfstechnologien sichtbar ist.

HTML-Landmark-Element	Rolle der ARIA-Markierung
<header>	Banner
<aside>	komplementar
<footer>	contentinfo
<nav>	navigation
<main>	main
<form> ^1	form
<section> ^1	region

Vergleichen Sie 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>

Do

<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>

Hinweis: Weitere Informationen und Best Practices finden Sie im Beispiel für ARIA-Markierungen.

Überschriften

Bei korrekter Implementierung bilden HTML-Überschriftenebenen einen prägnanten Überblick über den gesamten Seiteninhalt.

Es gibt sechs Überschriftenebenen, die wir verwenden können. Die Überschriftsebene 1 <h1> wird für die wichtigsten Informationen auf der Seite verwendet. Die niedrigste und unwichtigste Information wird mit der Überschriftsebene 6 <h6> gekennzeichnet.

Die Reihenfolge der Überschriftenebenen ist wichtig. Idealerweise überspringen Sie keine Überschriftenebenen, z. B. einen Abschnitt mit einer <h1> beginnen und direkt danach eine <h5> einfügen. Stattdessen sollten Sie in der richtigen Reihenfolge mit <h5> fortfahren. Die Reihenfolge der Überschriften ist besonders wichtig für Nutzer von Hilfstechnologien, da dies eine ihrer Hauptmethoden ist, sich durch Inhalte zu bewegen.

Hinweis: Sie können zwar ARIA-Überschriftenrollen für Überschriftenebenen verwenden, es wird jedoch empfohlen, nach Möglichkeit semantische HTML-Überschriftenebenen zu verwenden.

Um die richtige semantische Struktur und Reihenfolge der Überschriften einzuhalten, sollten Sie Ihre CSS-Stile von den Überschriftenebenen entkoppeln. So haben Sie mehr Flexibilität bei den Stilen der Überschriften, während die Reihenfolge der Überschriftenebenen beibehalten wird. Verwenden Sie zum Erstellen von Überschriften keine Stile allein, da diese von AT nicht als Überschrift erkannt werden.

Wenn wir Überschriften fälschen, wird die richtige Struktur nicht an Nutzer von Hilfstechnologien weitergegeben.

Überschriften sind auch für Menschen mit kognitiven und Aufmerksamkeitsdefizitstörungen hilfreich. Die Überschriften müssen aussagekräftig sein, damit Nutzer erkennen können, 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>

Do

<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

HTML-Listen sind eine Möglichkeit, ähnliche Elemente semantisch zu gruppieren und ihnen eine inhärente Bedeutung zu geben, ähnlich wie bei Ihrer Einkaufsliste oder der endlosen To-do-Liste, die Sie immer wieder ignorieren.

Es gibt drei Arten von HTML-Listen:

• Bestellt am <ol>
• ungeordnet <ul>
• description <dl>

Das Listenelement <li> wird verwendet, um ein Element in einer sortierten oder unsortierten Liste darzustellen. Die Elemente „Beschreibungsbegriff“ <dt> und „Definition“ <dd> finden Sie in der Beschreibungsliste.

Wenn diese Elemente richtig programmiert sind, können sie sehbehinderte Nutzer von Hilfstechnologien über die sichtbare Struktur der Liste informieren. Wenn ein AT auf eine semantische Liste trifft, kann es dem Nutzer den Namen der Liste und die Anzahl der Elemente darin mitteilen. Wenn sich der Nutzer in der Liste bewegt, liest die Sprachausgabe jedes Listenelement laut vor und gibt an, welche Nummer es in der Liste hat – „Element 1 von 5“, „Element 2 von 5“ usw.

Das Gruppieren von Elementen in Listen ist auch für sehbehinderte Menschen mit kognitiven und Aufmerksamkeitsstörungen sowie für Menschen mit Leseschwächen hilfreich, da Listeninhalte in der Regel so gestaltet sind, dass sie mehr visuellen Weißraum 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>

Do

<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 in der Regel zum Organisieren von Daten oder zum Seitenlayout verwendet.

Je nach Zweck der Tabelle verwenden Sie unterschiedliche semantische Strukturelemente. Tabellen können sehr komplex aufgebaut sein. Wenn Sie sich jedoch an die grundlegenden semantischen Regeln halten, sind sie ohne viel Aufwand barrierefrei.

Layout

In den frühen Tagen des Internets waren Layouttabellen das primäre HTML-Element zum Erstellen visueller Strukturen. Heute verwenden wir eine Mischung aus semantischen und nicht semantischen Elementen wie <div>s und Markierungen, um Layouts zu erstellen.

Die Zeiten, in denen Layouttabellen erstellt wurden, sind zwar weitgehend vorbei, aber es gibt Situationen, in denen sie immer noch verwendet werden, z. B. in visuell ansprechenden E-Mails, Newslettern und Anzeigen. In diesen Fällen dürfen in Tabellen, die nur für das Layout verwendet werden, keine strukturellen Elemente verwendet werden, die Beziehungen vermitteln und Kontext hinzufügen, z. B. <th> oder <caption>.

Layouttabellen müssen auch für Nutzer von Hilfstechnologien mit der ARIA-Rolle „Darstellung“ oder dem Status „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>

Do

<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 für Nutzer mit Assistenztechnologie ausgeblendet sein sollte, müssen eine Datentabelle und alle ihre Elemente sichtbar sein. Die Struktur von Datentabellen ist entscheidend, um Nutzern einfache und komplexe Informationen zu vermitteln.

Wenn eine Tabelle richtig strukturiert ist, werden Beziehungen zwischen den Spaltenüberschriften und Zeilen sowie den Daten in der Tabelle hergestellt. Bei einer falschen Strukturierung muss der Nutzer die Bedeutung und den Kontext der Informationen in der Tabelle selbst herausfinden.

Je nach Komplexität der Tabelle können Beziehungen durch Code auf unterschiedliche Weise hergestellt werden. Der erste Schritt zum barrierefreien Erstellen einer Tabelle besteht darin, Kopfzeilenzellen mit <th> und Datenzellen mit <td> zu markieren.

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>

Do

<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>