HTML und CSS

Standardkonformität

HTML ist eine Auszeichnungssprache und muss von jedem professionellen Webentwickler beherrscht werden. Ein standardkonformes HTML-Grundgerüst erleichtert Software wie Browsern und Hilfsmitteln behinderter Nutzer die korrekte Aufbereitung einer Webseite. Bei der Barrierefreiheit geht es vor allem um ein strukturiertes und linearisierbares HTML-Grundgerüst. Erst wenn ein Dokument mit einer Auszeichnungssprache semantisch aufbereitet wird, lassen sich weitere Prinzipien von Webstandards, etwa die Trennung von Inhalt und Layout, effizient umsetzen.

4 Teasertexte, jeweils mit Überschrift, Bild und Text; Abbild mit und ohne CSS. Die Gegenüberstellung des gleichen Inhalts mit und ohne CSS verdeutlicht a) auf der Strukturebene ohne Layout muss der Inhalt immer nachvollziehbar bleiben und b) mit Layout kann strukturierter Inhalt beliebig am Bildschirm angeordnet werden.

Webstandards für ein Layout

Diese Seite bietet einen knappen Überblick über verfügbare Layout-Techniken. HTML bietet drei grundlegende Layouttechniken:

Cascading Style Sheets(CSS),
Layout-Tabellen und
Frames.

Diese Möglichkeiten lassen sich beliebig miteinander kombinieren und mit weiteren Techniken wie Flash und JavaScript verbinden.

Standardkonformität setzt u.a. die Trennung von Inhalt und Layout voraus, d.h. alle Aspekte von Layout und Formatierung sind über CSS vorzunehmen; damit wird die Darstellung von Webseiten auf diverse Endgeräte erst möglich.

Tabellen und Frames sind ungeeignet für eine barrierefreie Webgestaltung, weil sie die visuelle Anordnung am Bildschirm vorgeben. Bevor ein CSS-Design umgesetzt werden kann, muss die Linearisierbarkeit und Strukturierung der Inhalte im HTML vorgenommen werden.

Progressive Enhancement

Eine weitere Voraussetzung für Barrierefreiheit ist die Berücksichtigung der Prinzipien des Progressive Enhancement, d.h. Inhalte müssen immer genutzt werden können, auch wenn ergänzende Techniken wie Bilder oder JavaScript im Browser des Nutzers nicht unterstützt werden oder abgeschaltet sind. Progressive Enhancement besagt, dass HTML stets die Grundtechnik für alle Informationen und Funktionen ist und alle weiteren Techniken, seien es CSS oder JavaScript, aber auch der Einsatz von Grafiken und anderen Objekten als optional zu betrachten sind.

Die folgende Liste fasst die Inhalte der Beiträge im Bereich "HTML und CSS" zusammen.

Die sehr kurze Geschichte von Webstandards (2011)

Die Entwicklung von Webstandards war vor allem in den 1990er rasant. Zwischenzeitlich hat sich die Verabschiedung von Webstandards stark verändert, weil veröffentlichte Webstandards auch den Praxistest bestehen müssen.

Webstandards des W3C (2011)

Ein standardkonformer Code ist generell die Grundlage für die Kompatibilität einer Website mit Browsern und Hilfsmitteln. Gleichwohl werden nicht alle Empfehlungen in jeder Software unterstützt.

Die Unterschiede zwischen XHTML und HTML von Gastautor Beatrix Jost (2004)

Aus Kompatibilitätsgründen mit weiteren W3C-Standards empfiehlt das World Wide Web Consortium die Arbeit mit XHTML. Für die Barrierefreiheit ist allerdings die Wahl der HTML/XHTML-Spezifikation grundsätzlich unerheblich.

Layout-Tabellen sind wie Briefe in Excel (2021)

Layout-Tabellen kommen in der Webentwicklung immer noch zu häufig vor, auch wenn sie seit Anfang der 0er Jahre überflüssig sind. Solche Tabellen müssenmit einem role-Attribut als Layout-Tabelle gekennzeichnet werden.

Der barrierefreie Einsatz von Frames (2005)

Screenreader können seit den 1990er Frames verarbeiten. Die Nutzbarkeit von Frames hängt allerdings von einigen Faktoren ab, insbesondere von der Bezeichnung der Frames und der Art der referenzierten Inhalte selbst.

Konformer Code mit doctype (2017)

Die doctype-Deklaration muss ganz am Anfang des Codes einer Webseite stehen — noch vor dem HTML-Element. Wenn ein Browser die Seite lädt, kann er den Code richtig interpretieren.

Das i-Tüpfelchen der Barrierefreiheit (2010)

In diesem Beitrag werden einige Validatoren und Prüfwerkzeuge vorgestellt. Obwohl die Validierung seit der Veröffentlichung der Web Content Accessibility Guidelines (WCAG) 2.0 keine Anforderung der Barrierefreiheit ist, so können mit validen HTML-Dokumenten Probleme der Kompatibilität mit Browsern und Hilfsmitteln wie Screenreader vermieden werden.

Die Spezifikation für HTML beschreibt beispielsweise die Semantik; der richtige Einsatz von HTML-Elementen ist im Gegensatz zur Validität ein wichtiger Aspekt der Barrierefreiheit. Da die korrekte Semantik meist kontextabhängig ist, muss sie in Abhängigkeit einzelner Inhalte manuell geprüft werden.

ARIA und die Accessibility-API (2015)

Für die Webentwicklung wird mit Accessible Rich Internet Applications (ARIA) zunächst ein Satz von Attributen bestimmt, die HTML, SVG und andere Auszeichnungssprachen mit mehr Semantik ausstatten. Diese betreffen u.a. Webanwendungen: Mit ARIA-Attributen können Widgets so ausgezeichnet werden, dass sie semantisch solchen Komponenten entsprechen, über die ein Betriebssystem verfügt, mit der Folge, dass sie von Screenreadern und anderen Hilfsmitteln besser bedient werden können.

ARIA umfasst aber weitaus mehr als einige Attribute. Zunächst ist ARIA eine Spezifikation an Browser und Hilfsmittel. Darüber hinaus hat der Webstandard einen merklichen Einfluss auf HTML5 gehabt. Insgesamt geht es aber darum, dass Screenreader und andere Hilfsmittel sich auf eine spezielle Schnittstelle des Betriebssystems stützen und dass ARIA die Technik ist, die die Webentwicklung benötigt, um diese Schnittstelle sinnvoll zu bedienen.