Barrierefreiheit

Warum semantisches HTML weiterhin zählt

Von The AsasWeb team 1 Min. Lesezeit

Das HTML-Element zu verwenden, das den Inhalt tatsächlich beschreibt, liefert euch Barrierefreiheit, SEO und Wartbarkeit gratis. Ein echter Button ist ohne JavaScript fokussierbar, per Tastatur bedienbar und wird korrekt angesagt, während Screenreader und Suchmaschinen gleichermaßen auf Landmarken, die Reihenfolge der Überschriften und echte Listen angewiesen sind, um eine Seite zu verstehen. Wer diese Verhaltensweisen aus generischen gestalteten Boxen nachbaut, zahlt mit zusätzlichem Code und übersehenen Details.

Es ist verlockend, alles aus generischen Boxen zu bauen und sie in Form zu stylen. Semantisches HTML, also das Element zu nutzen, das den Inhalt tatsächlich beschreibt, leistet erstaunlich viel kostenlose Arbeit, und es zu überspringen schafft Probleme, die ihr dann mit zusätzlichem Code lösen müsst.

Browser geben euch Verhalten gratis

Ein echter Button ist fokussierbar, klickbar, per Tastatur bedienbar und wird als Button angesagt, ganz ohne JavaScript. Baut ihn aus einer gestylten Box nach, müsst ihr all das von Hand hinzufügen, und die meisten Teams übersehen ein Stück. Dasselbe gilt für Links, Formularsteuerelemente und Überschriften.

Assistive Technologie verlässt sich darauf

Screenreader bauen ihr Verständnis einer Seite aus deren Struktur auf: Landmarken wie Header, Nav, Main und Footer, eine logische Überschriftenreihenfolge, Listen, die wirklich Listen sind. Stimmt die Struktur, ist die Seite navigierbar. Stimmt sie nicht, wird sie zur Wand aus ununterscheidbarem Text.

Suchmaschinen lesen Struktur auch

Dieselbe Struktur, die assistiver Technologie hilft, hilft Suchmaschinen zu verstehen, worum es auf eurer Seite geht. Korrekte Überschriften, aussagekräftige Linktexte und sauberes Markup sind stille SEO-Gewinne, die nichts extra kosten, sobald es zur Gewohnheit wird.

Es ist leichter zu warten

Semantisches Markup ist kürzer, klarer und für den nächsten Entwickler leichter zu verstehen. Weniger Code, weniger Bugs, geringere Kosten über die Zeit.

Das richtige Element zu nutzen ist eine der günstigsten Qualitätsentscheidungen in der Webentwicklung, und wir behandeln es als Standard. Wenn eure Website aus generischen Boxen gebaut ist und man es merkt, startet ein Projekt und wir geben ihr eine solide Struktur.

Diesen Standard auf Ihrer eigenen Website?

Erzählen Sie uns von Ihrem Projekt, und wir antworten mit ehrlichen, konkreten nächsten Schritten.