Zweiter Blick: HTML Elemente
Informationen


HTML-Elemente richtig eingesetzt

Symbolgrafik Überschriften

Überschriften

Überschriften machen einen Text übersichtlich. Sie sollen ihn verständlich strukturieren. Überschriften können aber gerade auf Webseiten auch durch semantische und textuelle Präzision eine der wichtigsten Aufgaben des Internets unterstützen: Das zu finden, was man sucht.

Symbolgrafik externes Link

Links sind wohl die wichtigste Funktionalität, die das Internet bereitstellt. Sie ermöglichen die unmittelbare Navigation zu Inhalten von Interesse. Doch wie soll der Code eines Links aussehen, damit er richtig barrierefrei ist? Gerade bei Links, die auf andere Webauftritte verweisen, den "externen Links", gibt es einiges zu berücksichtigen.

Symbolgrafik Listen

Listen

Listen machen Aufzählungen, Arbeitsschritte oder Bestimmungen übersichtlich. Erkenntnisse und Reflexionen zu diesem vermeintlichen Kleinvieh der digitalen Barrierefreiheit finden Sie in meinem Artikel:

figure-Element (HTML5)

Mit HTML5 wurde das figure-Element eingeführt, dem optional eine Beschriftung im enthaltenen figcaption-Element zugewiesen werden kann.

Das Element beinhaltet Flow Content, dem optional ein figcaption-Element vorangestellt sein oder folgen kann.

Das Element kann sinnvollerweise zur Umrandung von Illustrationen, Diagrammen, Fotos oder Codedarstellung herangezogen werden.

Von JAWS wird das Element als Abbildung bezeichnet. Ich würde die Bezeichnung Darstellung vorziehen.

Lupe

Formulare

Formulare sind zur Interaktion vielfältig verwendbar. Für die Suche, Anmeldung, Bestellung und vieles mehr.

Portraitfoto mit maximiertem Gesicht

Bilder - Fotos und Grafiken

Bilder können eine Webseite attraktiv machen. Sie können darüber hinaus die Verständlichkeit der Inhalte erhöhen. Bilder sind jedoch nicht für alle verständlich und wahrnehmbar und bedürfen nicht nur grafischer, sondern auch technischer und redaktioneller Überlegungen.

Hervorhebungen mittels HTML-Inline-Elementen

Hervorgehobene Textabschnitte innerhalb eines Absatzes können zu einem besseren Verständnis beitragen. Zentrale Aussagen können damit visuell durch semantische Kennzeichnungen als inhaltliche Schwerpunkte erscheinen.

DFN-Tag

dfn (Definition) Tag

Die Kennzeichnung eines Ausdrucks als beschrieben im title-Attribut. Wenig hilfreich für die Barrierefreiheit.

dfn (Definition) Tag und Barrierefreiheit

DEL (Delete - Löschen) und INS (Insert - Einfügen)

DEL (delete) und INS (insert) dienen dazu, Elemente, die gelöscht bzw. eingefügt werden sollten, zu kennzeichnen. Dies kann zur Kennzeichnung von Korrekturen oder Versionsunterschieden verwendet werden.

MARK (Markieren)

In HTML5 wurde neu das MARK-Element eingeführt. Es dient dazu, Textelemente quasi als markiert zu kennzeichnen. Das kann etwa in Handlungsanweisungen hilfreich sein, wie im folgenden Beispiel.

  1. Markieren Sie das Wort Alle durch drücken der Tasten STRG + SHIFT + PFEIL RECHTS.
    So sieht es aus:

Alle Menschen sind gleich an Würde.

Verwendung des MARK-Elements

Sonderzeichen

Der HTML-Zeichensatz verfügt über wesentlich mehr Zeichen, als auf einer Tastatur Platz hätte. Nennen wir diese Zeichen einmal Sonderzeichen und schauen wir uns an, wie sie codiert werden.

Mehr zu Sonderzeichen im HTML-Code

NOSCRIPT-Element

Bedeutung von NOSCRIPT-Elementen

Klientenseitige Scripts werden nicht von allen Browsern unterstützt oder können bewusst im Browser deaktiviert werden. Wer dies macht, erzielt zwar einen höheren Grad an Sicherheit, muss sich jedoch bewusst sein, dass praktische Funktionalitäten dadurch auch verloren gehen.

Das <noscript>-Element dient dazu, Inhalte und Funktionalitäten so weit wie möglich auch dann bereitzustellen, wenn JavaScript nicht verfügbar ist. Gelegentlich bleibt nur, darauf hinzuweisen, dass Funktionalitäten voraussetzen, dass klientenseitige Scripts für die Darstellung erforderlich wären.

Relevanz des NOSCRIPT-Elements für die Barrierefreiheit

Es betrifft nicht nur die explizite Zielgruppe des Barrierefreien Webdesigns. Allen, die etwa JavaScript nicht verfügbar haben, profitieren davon, dass Alternativen für klientenseitige Scripts weitmöglichst vorhanden sind.

Für das Barrierefreie Webdesign im engeren Sinn ist wichtig, dass alle Inhalte und Funktionalitäten innerhalb des Bereichs barrierefrei sind. Klingt banal, muss aber doch erwähnt werden.

Es besteht teilweise das Missverständnis, dass Scripts generell für die Barrierefreiheit von Nachteil sind und deshalb Alternativen im <noscript>-Bereich zur Verfügung gestellt werden müssen. Dies ist keineswegs der Fall. Jedes einzelne Script muss analysiert, getestet und optimiert werden.

Problembereiche des NOSCRIPT-Elements

externArtikel auf w3schools.com