Was ist semantisches HTML?

What is Semantic HTML?

Jedes HTML-Element dient einem Zweck. Der Zweck wird durch seine semantische Bedeutung vermittelt. Zu wissen, wann welches Element verwendet werden muss, um die Bedeutung genau zu vermitteln, ist keine leichte Aufgabe.

Als kurzes Beispiel wird die semantische Bedeutung eines Link-Elements als "Link" übermittelt. Ein Schaltflächenelement wird als "Schaltfläche" übermittelt. Infolgedessen werden die Menschen verstehen, wie sie mit diesen Elementen interagieren und ein erwartetes Ergebnis erzielen, wenn sie mit diesen Elementen interagieren.

Semantisches HTML ist die Grundlage für ein barrierefreies Erlebnis

Das Schreiben von semantischem HTML ist wirklich die Grundlage oder „Blaupause“ für die Schaffung einer barrierefreien Erfahrung. Es bedeutet, native Browserelemente und -steuerungen zu verwenden, um die Bedeutung, Struktur und den Zweck unserer Inhalte zu vermitteln.

Auf diese Weise wissen Personen, die Screenreader und andere Hilfstechnologien verwenden und sich darauf verlassen, wie sie auf Ihren Website-Inhalten navigieren und diese nutzen und was sie bei der Interaktion mit einem Element erwarten können.

Damit beantworten Sie die Frage für den Nutzer…

Was ist das für ein Ding und was macht es?

Die Semantik eines Elements ist beim Schreiben von HTML sehr wichtig. Zu verstehen, wann und wie HTML-Elemente verwendet werden, ist nicht immer einfach, aber die korrekte Implementierung führt zu einer positiven und erfolgreichen Benutzererfahrung für Menschen, die auf unterstützende Technologien angewiesen sind.

Zur Semantik gehören …

Es gibt Informationen, die vorhanden sein müssen, wenn ein Element den Tastaturfokus erhält, damit jemand mit einem Screenreader navigieren und diesen Inhalt lesen kann.

Zu natürlich fokussierbaren Elementen gehören beispielsweise Links, Schaltflächen und andere Formularsteuerelemente, und wenn das Element im Fokus ist, werden der Textinhalt und die zugehörigen Attribute den Screenreader-Benutzern laut vorgelesen und beschreiben, womit sie gerade interagieren.

Angekündigt ist:

  • Der barrierefreie Name oder das Textäquivalent des Elements
  • Die Elementrolle
  • Der aktuelle Status des Elements (falls zutreffend)

Das barrierefreie Name/Label/Text-Äquivalent

Der zugängliche Name ist der Teil, der beschreibt, wofür das Element dient, seinen Zweck.

Dies ist normalerweise der Inhalt zwischen den Start- und End-Tags eines HTML-Elements. Es könnte sich auch um den alternativen Textwert für ein alt -Attribut eines Bildes oder um das mit einer Formulareingabe verknüpfte Label input .

Nehmen wir zum Beispiel einen Link. Dieses Element enthält Text zwischen seinem Start- und End-Tag. Dieser Text wird von einem Screenreader laut vorgelesen, wenn er den Tastaturfokus erhält. Dadurch wird Kontext darüber vermittelt, was passieren soll oder wohin der Browser gehen soll, wenn dieser Link aktiviert wird.

Beispielsweise würde ein Link mit dem zugänglichen Namen „Kontaktieren Sie uns“ darauf hinweisen, dass, wenn Sie diesen Link aktivieren, eine Seite mit Kontaktinformationen geladen wird; vielleicht eine Telefonnummer oder Adresse und möglicherweise ein Formular, wo jemand eine Nachricht senden könnte.

 <a href="contact.html"> Contact Us <!-- 👈 Accessible name, 🗣 "Conact us" --> </a>

Die Rolle des Elements

Die Rolle des Elements informiert den Benutzer über einige Dinge, einschließlich dessen, was das Element tut und wie man damit interagiert.

Um auf das Link-Beispiel zurückzukommen, wäre die angekündigte Rolle, wenn der Link den Tastaturfokus erhält, „Link“, da Links mit öffnenden und schließenden Tags strukturiert sind und a gültiges href Attribut enthalten. Das erwartete Ergebnis oder „was es tut“ wäre, dass der Browser entweder eine neue Seite lädt oder zu einem anderen Abschnitt derselben Seite springt und den Fokus auf ein anderes Element verschiebt. Um mit dem Link zu interagieren, müsste der Benutzer die Enter drücken, da dies ebenfalls Teil der Semantik eines Links ist.

 <a href="contact.html"> <!-- 👈 Role derived from opening… --> Contact Us </a> <!-- 👈 … and closing tag: 🗣 "Contact us, link" -->

Verschiedene Elementrollen gehen mit Erwartungen hinsichtlich ihrer Verwendung einher. Abhängig von der Rolle erwartet ein Benutzer möglicherweise, dass er die Enter drücken muss, um fortzufahren (wie es bei einem Link der Fall ist), die Space verwenden muss, um eine button zu aktivieren, oder vielleicht die Up oder Down zum Erstellen verwenden muss eine Auswahl, wenn Sie mit einem select Element interagieren.

Der aktuelle Zustand

Neben dem Namen und der Rolle könnte je nach Element auch eine Zustandsansage stehen.

Die Bekanntgabe des Zustands hilft dabei, den aktuellen Zustand des Elements zu vermitteln, ob eine Interaktion erforderlich ist und was passieren könnte, wenn die Interaktion stattfindet.

Beispielsweise haben Kontrollkästchen und Optionsfelder jeweils einen „markierten“ oder „nicht markierten“ und einen „ausgewählten“ oder „nicht ausgewählten“ Zustand.

<label> <input type="checkbox" /> Apples <!-- 🗣 "Apples, checkbox" --> </label> <label> <input type="checkbox" checked /> Oranges <!-- 🗣 "Oranges, checkbox, checked" --> </label>

Ein Akkordeon-Widget würde einen "erweiterten" oder "reduzierten" Zustand haben, der angibt, ob der Inhalt auf dem Bildschirm angezeigt wird und zur Nutzung verfügbar ist (erweitert) oder ob der Inhaltsabschnitt lediglich übersprungen wird, wenn die Navigation fortgesetzt wird (reduziert).

Warum die Verwendung nativer Elemente am besten ist

Wie wir später sehen werden, ist es möglich, mithilfe einer Vielzahl von HTML-Attributen und JavaScript-Code benutzerdefinierte Elemente zu erstellen und semantische Bedeutung und Interaktion festzulegen. Beachten Sie jedoch Folgendes, bevor Sie ein benutzerdefiniertes Element erstellen:

  • Native Elemente stellen standardmäßig eine semantische Bedeutung bereit; Sie müssen sich keine Gedanken darüber machen, wie jemand, der Hilfstechnologien verwendet, verstehen könnte, was das Element ist oder wie man damit interagiert
  • Native Elemente bieten alle erwarteten Tastaturfunktionen direkt nach dem Auspacken; kein zusätzlicher Zeit- und Arbeitsaufwand für das Schreiben von Code zum Erfassen von Tastenanschlägen
  • Das Standard-Styling ist konsistent und Ihren Benutzern vertraut; Menschen gewöhnen sich an das Aussehen und Verhalten ihres Betriebssystems und Browsers – schaffen Sie eine komfortable Benutzererfahrung, indem Sie native Elemente verwenden

Die Verwendung von semantischem HTML dient dazu, Ihre Benutzer zum Erfolg zu führen

Semantik vermittelt die Botschaft, was das aktuell fokussierte Element ist, was es tun könnte und wie man damit interagiert. Um ein integratives Erlebnis zu schaffen, ist es wichtig, die semantische Bedeutung von HTML-Elementen zu verstehen, zu wissen, wann der richtige Kontext sie verwendet, und wie man die Nachricht an den Benutzer genau weitergibt, wofür das Element dient.

Weitere Einzelheiten zu den einzelnen nativen HTML-Elementen finden Sie unter MDN: Referenz zu HTML-Elementen.

Der Barrierefreiheitsbaum

Wir können semantisches HTML nicht diskutieren, ohne den Barrierefreiheitsbaum zu erwähnen! Dies ist eine baumartige Struktur von Elementen, die dem DOM sehr ähnlich ist, aber mehr Informationen enthält, wie z. B. semantische Bedeutung, wie zuvor besprochen.

Screenshot der Startseite von Shopify.com mit geöffneten Konsolen-Tools, die den Barrierefreiheitsbaum einer Schaltfläche zeigen.

Stellen Sie sich für einen Moment eine Website ohne style oder angewendetes CSS vor. Diese Rohausgabe von Inhalten ähnelt stark dem Barrierefreiheitsbaum, der von Hilfstechnologien wie einem Bildschirmleser interpretiert wird.

Das DOM ist für Browser wie der Barrierefreiheitsbaum für Screenreader

Wenn der Bildschirmleser in der Lage sein wird, die im Barrierefreiheitsbaum gespeicherten Informationen zu verwenden, um die Semantik des fraglichen Elements genau anzukündigen; seine Rolle, der Name oder das Label und der Status des Elements. Alle diese Informationen sind Teil der Barrierefreiheits-API, die die meisten Hilfstechnologien verwenden, um Informationen an den Endbenutzer zu übermitteln.

Wenn Sie einen Blick auf den Barrierefreiheitsbaum einer Website werfen möchten, bietet Chrome dies in seinen Entwicklertools auf der Registerkarte „Barrierefreiheit“ an.

WCAG-Erfolgskriterien

Dies kommt auf 1.3.1 Info und Beziehungen zurück, wo es heißt:

"Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch bestimmt werden oder sind in Textform verfügbar."

Ressourcen:

Zurück zum Blog