Semantisches HTML und Accessible Rich Internet Applications (ARIA) helfen dabei, Schnittstellen zu erstellen, die für jeden auf die performanteste, robusteste und einfachste Weise funktionieren. Sie fügen Ihren Inhalten wesentliche Bedeutung hinzu, wodurch Webbrowser, Suchmaschinen, Screenreader, RSS-Reader und letztendlich Benutzer sie verstehen können.
Und doch verwenden viele Leute sie immer noch nicht. Ich wollte wissen, warum, also habe ich eine Twitter-Umfrage erstellt. Der häufigste Grund, den die Leute nannten, war mangelndes Bewusstsein und Verständnis für die Vorteile der Verwendung von semantischem HTML und ARIA.
Betrachten wir die Vorteile der Verwendung von HTML und ARIA, warum die Verwendung von semantischem HTML der richtige Weg ist und warum ARIA als letzter Ausweg dienen sollte.
Beginnen mit reinem Text
Das <body>-Element eines HTML-Dokuments enthält den Hauptinhalt, den ein Benutzer auf einer Seite sieht. Wenn Inhalt ohne zusätzliche Elemente in den Body eingefügt wird, hat der Browser keine Möglichkeit, zwischen verschiedenen Arten von Inhalten wie Absätzen und Überschriften zu unterscheiden.
<body>
A Study of Butterflies
Butterflies are little bugs with cute wings.
Butterfly Habitats
Butterflies live in flower houses and hang out at dank coffeeshops.
</body>Wenn der Browser keine Unterscheidung zwischen Inhaltsstücken treffen kann, kann er diese Inhalte dem Benutzer nicht sinnvoll präsentieren. Das bedeutet
- Wir können die Überschriften nicht anders gestalten als Absätze.
- Es ist schwieriger für Suchmaschinen, den Inhalt zu interpretieren, was bedeutet, dass er wahrscheinlich schlecht eingestuft wird und für Benutzer schwer zu finden ist.
- Bildschirmlesegeräte und andere assistierende Technologien können ihn dem Benutzer nicht richtig mitteilen.
Ganz zu schweigen davon, dass es visuell mehr als ein wenig unbeholfen ist
Etwas Struktur mit HTML hinzufügen
Um etwas Struktur zu bieten, könnten wir die Textzeilen hier in Divs wie folgt verpacken:
<div>A Study of Butterflies.</div>
<div>Butterflies are little bugs with cute wings.</div>
<div>Butterfly Habitats</div>
<div>Butterflies live in flower houses and hang out at dank coffeeshops.</div>Das ist etwas besser, weil jedes Stück Inhalt im Browser auf einer eigenen Zeile angezeigt wird, anstatt einer langen, ununterbrochenen Textzeile.
Aber es gibt immer noch einen deutlichen Mangel an Bedeutung.
Was sind Überschriften und was sind Absätze? Das ist schwer zu sagen und für assistierende Technologien unmöglich zu bestimmen. Das liegt daran, dass die Überschriften und Absätze in Divs verpackt sind, die für sich genommen bedeutungslos sind. In diesem Beispiel sind Browser, CSS, Suchmaschinen und Bildschirmlesegeräte immer noch ahnungslos.
Bedeutung mit Stilen vermitteln
Wir könnten den Divs eine Formatierung hinzufügen, da sie mit CSS angesprochen werden können. Dies ermöglicht uns, die visuelle Darstellung zu verbessern, um Bedeutung, Kontext und Hierarchie zu vermitteln.
Siehe den Pen
Nicht-semantisches HTML-Demo von Geoff Graham (@geoffgraham)
auf CodePen.
Hier zielt CSS auf den ersten und dritten Div, um Überschriftenstile anzuwenden. Das ist nicht wartbar, da ein weiterer hinzugefügter Absatz danach zum Beispiel als Überschrift formatiert würde.
Wir könnten jedem Div ein eindeutiges Attribut wie eine ID oder einen Klassennamen geben, um mehr Styling-Kontrolle zu erhalten, wie hier:
<div class="heading1">A Study of Butterflies</div>
<div class="paragraph">Butterflies are little bugs with cute wings.</div>
<div class="heading2">Butterfly Habitats</div>
<div class="paragraph">Butterflies live in flower houses and hang out at dank coffeeshops.</div>Ich erkläre, warum Sie Klassen anstelle von IDs für Styling in meinem Online-Buch MaintainableCSS verwenden sollten.
Jetzt können wir die verschiedenen Elemente mit CSS wie folgt ansprechen:
.heading1 { /* styles here */ }
.paragraph { /* styles here */ }
.heading2 { /* styles here */ }Während dieser Ansatz etwas besser ist, vermittelt er nur Bedeutung für sehende Benutzer. Er vermittelt keine Bedeutung für Suchmaschinen, RSS-Reader und Bildschirmlesegeräte. Mit anderen Worten, es ist nicht semantisch und folglich nicht sehr zugänglich.
Einführung in semantisches HTML
HTML bietet viele Elemente, die dazu bestimmt sind, Inhalten Bedeutung zu verleihen, darunter Elemente für Überschriften und Absätze. Anstatt sich also auf Divs mit vom Entwickler benannten Klassen zu verlassen, können wir stattdessen vordefinierte HTML-Elemente verwenden.
<h1>A Study of Butterflies</h1>
<p>Butterflies are little bugs with cute wings.</p>
<h2>Butterfly Habitats</h2>
<p>Butterflies live in flower houses and hang out at dank coffeeshops.</p>Viel besser! Mit semantischem HTML wie diesem erbt der Inhalt Standardstile vom Browser (auch bekannt als User Agent). Wir können sogar andere semantische HTML-Elemente verwenden, wie <b>, das dem Browser sagt, er soll "Aufmerksamkeit erregen", indem es Text fett macht.
Entscheidend ist, dass die Verwendung von semantischem HTML auch bedeutet
- Wir können CSS verwenden, um unsere eigenen Stile hinzuzufügen.
- Suchmaschinen können den Inhalt indizieren, damit er gut genug eingestuft wird, dass Benutzer ihn finden können.
- RSS-Reader können die Elemente entsprechend parsen und formatieren.
- Bildschirmlesegeräte und andere assistierende Technologien können die Elemente dem Benutzer richtig mitteilen.
Obwohl es in diesen kurzen Beispielen nicht übermäßig wichtig ist, ist der Code auch prägnanter, was bei der Betrachtung einer gesamten Website einen großen Unterschied macht.
Semantisches HTML ist standardkonform und stabil. Das bedeutet, dass jeder zukünftige HTML-Prozessor es verstehen und Benutzern korrekt präsentieren kann. Es hilft auch nachfolgenden Codeautoren, wenn sie Änderungen vornehmen müssen.
Zusätzliche Vorteile von semantischem HTML
Zusätzlich zu den bisher behandelten Vorteilen bieten einige Browser kostenlos nützliche Erweiterungen für semantisches HTML.
Zum Beispiel gibt die HTML-Telefoneingabe (<input type="tel">) Benutzern auf einigen mobilen Browsern eine Telefontastatur.
Andere Browser bieten Benutzern die Möglichkeit, zu einer vereinfachten Ansicht der Seite zu wechseln, wie den Lesermodus von Safari. Ohne semantisches HTML würde der Lesermodus etwas Ähnliches wie die einzeilige Textzeichenfolge ergeben, mit der wir begonnen haben. Aber durch die Verwendung von semantischem HTML erhalten wir eine saubere Leseerfahrung ohne zusätzliche Formatierung unsererseits.
Mehr dazu können Sie in Mandys Michael's Artikel über das Erstellen von Websites für den Lesermodus von Safari und andere Lese-Apps lesen.
Wann ARIA Dinge besser macht
Wie semantisches HTML ist ARIA ein W3-Standard, der dazu beiträgt, Schnittstellen für Menschen, die Screenreader und andere assistierende Technologien zur Inhaltsaufnahme verwenden, zugänglicher zu machen.
Fehlermeldungen sind ein gutes Beispiel. Wenn ein Benutzer ein obligatorisches Formularfeld leer lässt, könnte der HTML-Code für den Fehler so aussehen:
<label for="first-name">First name</label>
<span>Enter your first name</span>
<input type="text" name="first-name" id="first-name">Ein sehender Benutzer kann den Fehler oberhalb des Feldes sehen. Aber wenn ein Screenreader den Fokus auf das Eingabefeld legt, wird die Fehlermeldung nicht angekündigt, da die Fehlermeldung nicht mit dem Eingabefeld verknüpft ist.
ARIA kann verwendet werden, um den Fehler wie folgt mit dem Eingabefeld zu verknüpfen:
<label for="first-name">First name</label>
<span id="first-name-error">Enter your first name</span>
<input type="text" name="first-name" id="first-name" aria-describedby="first-name-error">Jetzt wird die Fehlermeldung angekündigt, wenn das Eingabefeld im Fokus ist.
ARIA und JavaScript zusammen verwenden
ARIA ist am nützlichsten, wenn JavaScript im Spiel ist. JavaScript ist normalerweise erforderlich, um komplexere und dynamischere Interaktionen zu erstellen, wie z. B. das Ausblenden, Anzeigen und Ändern von Elementen ohne Seitenaktualisierung. Denken Sie an Toggle-Menüs, Akkordeons, Tabs, Autovervollständigungen, sortierbare Tabellen, das Laden von Inhalten und das Speichern, Senden oder Abrufen von Daten. Die Verbesserung von Schnittstellen auf diese Weise beeinträchtigt oft die Erfahrung für Screenreader-Benutzer.
Nehmen Sie einen Button, der beim Anklicken andere Inhalte aufdeckt. Im ursprünglichen Zustand sieht ein sehender Benutzer zunächst einen Button und keine Inhalte, und wenn der Button geklickt wird, erscheinen die Inhalte.
Ein sehbehinderter Benutzer mit einem Screenreader verlässt sich bei der Navigation durch eine Benutzeroberfläche jedoch normalerweise auf gesprochene Hinweise. Aber wenn ein Screenreader den Fokus auf den Button legt, gibt es nichts, das ihm sagt, ob der Inhalt gerade sichtbar ist und gelesen werden muss.
Das Attribut aria-expanded kann zum Button hinzugefügt werden, und JavaScript kann seinen Wert zwischen true (Inhalt wird angezeigt) und false (Inhalt ist ausgeblendet) umschalten. Dies trägt zur Erfüllung des Prinzips des inklusiven Designs Nr. 1, eine vergleichbare Erfahrung zu bieten, für Screenreader-Benutzer bei.
<button aria-expanded="false">Toggle content</button>
<div hidden>Some content</div>Versuchen Sie, ARIA nicht zur Korrektur von unsemantischem HTML zu verwenden
ARIA-Attribute können verwendet werden, um unsemantisches HTML für Screenreader-Benutzer zugänglicher zu machen. Beispielsweise könnte ein Entwickler, der Schwierigkeiten hat, ein natives Kontrollkästchen in mehreren Browsern zu stylen, sich entscheiden, ein Div und etwas JavaScript zu verwenden, um eines zu emulieren.
Wir können eine Rolle von checkbox hinzufügen, um das Div dem Screenreader als Checkbox zu identifizieren.
<div role="checkbox"></div>Wir müssen auch das Attribut aria-checked verwenden, um anzuzeigen, ob das Kontrollkästchen aktiviert ist oder nicht, wie hier:
<div role="checkbox" aria-checked="false"></div>Aber das reicht immer noch nicht aus, um es wie ein Kontrollkästchen zu verhalten, da Divs nicht mit der Tastatur fokussierbar sind, wie es <input type="checkbox"> ist. Wir könnten sie fokussierbar machen, indem wir tabindex="0" hinzufügen.
<div role="checkbox" aria-checked="false" tabindex="0"></div>Aber selbst dann sendet ein echtes Kontrollkästchen beim Absenden als Teil eines Formulars seinen Wert. Da dies kein echtes Kontrollkästchen ist, sendet es seinen Wert nicht ohne die Verwendung von JavaScript.
Und als ob das nicht schon genug wäre, können Benutzer ein echtes Kontrollkästchen aktivieren oder deaktivieren, indem sie die Leertaste drücken. Und das Formular, zu dem das Kontrollkästchen gehört, kann durch Drücken von Enter beim Fokus auf dem Kontrollkästchen gesendet werden. Aber das Div-Kontrollkästchen tut dies nicht ohne noch mehr JavaScript.
Dies ist nicht nur mehr Arbeit und mehr Code, sondern der Ansatz funktioniert tatsächlich nur für Personen, die Technologie verwenden, die diese spezifischen ARIA-Attribute versteht. Das ist viel Aufwand, viel Code und viele Probleme, die wir ganz vermeiden können, wenn wir einfach semantisches HTML verwenden.
<input type="checkbox">Es ist nicht zu leugnen, dass ARIA in bestimmten Situationen nützlich ist, aber der Beginn mit semantischem, zugänglichem HTML, wo immer möglich, ist unendlich einfacher und zuverlässiger. Deshalb lautet die erste Regel von ARIA, es nicht zu verwenden.
Fazit
Inklusives Design bedeutet, das bestmögliche Erlebnis für die breiteste Palette von Benutzern zu bieten. Semantisches HTML hilft Technologien und damit Benutzern, Inhalte im Web zu verstehen. Die von einigen Browsern und Geräten angebotenen Verbesserungen bedeuten, dass Benutzer eine noch bessere Erfahrung "eingebaut" erhalten.
Und wenn semantisches HTML allein nicht ausreicht, kann ARIA mehr Kontext für Benutzer von assistierenden Technologien liefern, aber verwenden Sie es mit Vorsicht. Es ist keine schnelle und einfache Lösung für unsemantisches Markup und kann, wie wir im letzten Beispiel gesehen haben, kompliziert werden.
Kurz gesagt: Tun Sie die harte Arbeit, um Dinge inklusiv zu machen. Es ist ein Gewinn für Sie und ein Gewinn für das Web.
Sehr wichtig. Danke, Bro :)
Sehr gerne, Volkan. :)
Kleine Korrektur, aber ich glaube,
<b>hat keinen semantischen Wert, was im direkten Gegensatz zum Tag<strong>steht, der visuell identisch zum<b>-Tag ist, aber einen zusätzlichen semantischen Wert hat.http://w3c.github.io/html-reference/b.html
http://w3c.github.io/html-reference/strong.html
Danke Ben. Das war früher so, aber die Bedeutung des Tags hat sich geändert und ist jetzt semantisch.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
Verrückt, das wusste ich nicht, dass sich das geändert hat. Danke für die Klärung, Adam!
Informativ geschrieben und gut illustriert, danke Adam!
Sehr interessanter Artikel. Danke fürs Teilen!!!
Guter Artikel! Danke!