Inhaltsstruktur

Einer der wichtigsten Aspekte digitaler Barrierefreiheit ist die Struktur der Seite. Wenn Sie beim Erstellen Ihrer Website oder App strukturelle Elemente oder sich allein auf Stile verlassen, geben Sie Menschen, wie Screenreadern.

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

Wenn Sie semantische HTML-Elemente verwenden, wird die Bedeutung der einzelnen Elemente an den Baum für Barrierefreiheit weitergegeben und werden von der AT verwendet, wodurch die Inhalte mehr Bedeutung erhalten als nicht semantische Elemente. Es kann Fälle geben, in denen Sie zusätzliche ARIA-Attribute hinzufügen müssen, um oder um die User Experience insgesamt zu verbessern, kann eines der über 100 HTML-Elemente sollte auch für sich allein gut funktionieren.

In diesem Modul konzentrieren wir uns auf die am weitesten verbreiteten strukturellen Elemente, digitale Barrierefreiheit gibt, gibt es sicherlich zusätzliche Elemente und Umweltfaktoren, die Sie beim Einbinden von Strukturen in Ihre Website oder Diese Beispiele stellen eine Einführung in das Thema dar und sind nicht umfassend.

Landmarken

Die Nutzenden von AT verlassen sich auf strukturelle Elemente, um ihnen Informationen über die des Gesamtlayouts der Seite. Beim Abschneiden großer Inhaltsbereiche können Sie Verwenden Sie entweder ARIA-Landmark-Rollen oder die neueren HTML-Markierungselemente, um strukturellen Kontext auf Ihrer Seite an.

Orientierungspunkte stellen sicher, dass sich die Inhalte in navigierbaren Regionen befinden. Wir empfehlen, mindestens eine Sehenswürdigkeit pro Seite anzugeben.

Einige Ressourcen empfehlen die Kombination von ARIA- und HTML-Markierungen um eine bessere Abdeckung zu erreichen. Diese Art von Redundanz sollte Nutzenden Probleme verursachen, die Muster mit einem Screenreader testen um ganz sicher zu sein. Im Zweifelsfall sollten Sie standardmäßig nur die neuere HTML- Sehenswürdigkeiten-Elemente, Browserunterstützung ist sehr robust sind.

Vergleichen wir die HTML-Markierungselemente verknüpft sind, ARIA-Landmark-Rollen.

Vergleichen wir nun Beispiele für die Struktur von barrierefreiem Content.

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

<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 können HTML-Überschriftenebenen kurze Zusammenfassung des gesamten Seiteninhalts.

Es gibt sechs Überschriftenebenen, die wir verwenden können. <h1> für Überschriftsebene 1 wird für die höchsten und wichtigsten Informationen der Seite verwendet, schrittweise Überschriftsebene sechs <h6> für die niedrigsten und am wenigsten wichtigen Informationen.

Die Reihenfolge der Überschriftenebenen ist wichtig. Idealerweise überspringen Sie Überschriftenebenen, z. B. wenn ein Abschnitt mit einem <h1> beginnt und sofort gefolgt von einem <h5>. Stattdessen sollten Sie mit dem <h5> fortfahren in Reihenfolge. Die Reihenfolge auf Überschriftenebene ist für AT-Nutzer besonders wichtig da dies eine ihrer wichtigsten Methoden ist, durch Inhalte zu navigieren.

Damit Sie die richtige semantische Struktur und Reihenfolge für Überschriften einhalten können, sollten Sie Ihre CSS-Stile von den Überschriftenebenen entkoppeln. So können Sie mehr Flexibilität bei Überschriftenstile bei gleichzeitiger Beibehaltung der Reihenfolge auf Überschriftenebene. Es ist wichtig, dass Sie zum Erstellen von Überschriften nicht nur Stile verwenden, werden von der AT nicht als Überschrift wahrgenommen.

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

Überschriften sind auch für Menschen mit kognitiven Defiziten und Aufmerksamkeitsstörungen hilfreich Störungen. Es ist wichtig, die Überschrift aussagekräftig zu gestalten, damit was auf der Seite am wichtigsten ist.

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

<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 werden Elemente, die denen einer anderen ähneln, semantisch gruppiert, ähnlich wie Ihre Einkaufsliste oder die endlose To-do-Liste, die Sie einfach ignorieren.

Es gibt drei Arten von HTML-Listen:

• bestellt: <ol>
• Unsortiert <ul>
• Beschreibung <dl>

Den Listeneintrag <li> wird ein Element in einer geordneten oder unsortierten Liste dargestellt, während das Element Beschreibungsbegriff <dt> und Definition <dd>-Elemente können in der Beschreibungsliste finden.

Bei korrekter Programmierung können diese Elemente nicht sehende AT-Nutzende über die sichtbare Struktur der Liste. Wenn eine AT auf eine semantische Liste stößt, können Nutzende den Namen der Liste und die Anzahl der Elemente in der Liste nennen. Als Nutzer innerhalb der Liste navigiert, liest die AT jedes Listenelement laut vor Nummer eins von fünf, Element zwei von fünf usw.

Die Gruppierung von Artikeln in Listen hilft auch sehenden Menschen mit kognitiven und Aufmerksamkeitsstörungen und Menschen mit Leseschwächen, da der Listeninhalt in der Regel so gestaltet, dass sie mehr optischen Leerraum bietet und der Inhalt auf den Punkt kommt.

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

<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 für das Seitenlayout verwendet.

Je nach Zweck der Tabelle verwenden Sie unterschiedliche semantische Elemente. Die Struktur von Tabellen kann sehr komplex sein, aber wenn Sie sich an die semantische Regeln sind, sind sie ohne viel Aufwand leicht zugänglich.

Layout

In den Anfängen des Internets waren Layouttabellen das primäre HTML-Element. zum Aufbau visueller Strukturen. Heute verwenden wir eine Mischung aus nicht semantische Elemente wie <div>-Elemente und Orientierungspunkte zum Erstellen von Layouts.

Obwohl die Zeiten, in denen Layouttabellen erstellt wurden, größtenteils vorbei sind, gibt es Zeiten, Layouttabellen werden weiterhin verwendet, z. B. in optisch ansprechenden E-Mails, Newslettern und Werbung. In diesen Fällen dürfen Tabellen, die nur für das Layout verwendet werden, Strukturelle Elemente verwenden, die Beziehungen vermitteln und Kontext hinzufügen, wie <th> oder <caption>.

Layouttabellen müssen auch für AT-Nutzer mit ARIA ausgeblendet werden Präsentationsrolle oder einen Aria-verborgenen Zustand.

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<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 AT-Nutzenden nicht angezeigt werden sollte, Datentabelle und alle zugehörigen Elemente sichtbar sein müssen. Die Struktur von Datentabellen ist entscheidend, um einfache und komplexe Informationen für Nutzende zu liefern.

Wenn eine Tabelle richtig strukturiert ist, bilden sich Beziehungen zwischen der Spalte. Kopfzeilen und Zeilen sowie die Daten in der Tabelle. Bei falscher Struktur die Nutzenden die Bedeutung und den Kontext der Informationen im .

Je nach Komplexität der Tabelle ist das Herstellen von Beziehungen durch Code auf unterschiedliche Weise erreicht. Um eine Tabelle barrierefrei zu machen, um Headerzellen mit einem <th> und Datenzellen mit <td>-Elementen.

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

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

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