Inhalt, Gestaltung und Technik – was es im Detail zu tun gibt ...

Inhalt

Lese-Reihenfolge – die programmierte Reihenfolge von Inhalten folgt der optisch sichtbaren Reihenfolge und macht keine Ausnahmen auf Grund von technischen oder gestalterischen Gründen – somit ist die richtige Abfolge auch für Lesegeräte richtig darstellbar, und die Tastaturnavigation erfolgt in nachvollziehbarer Reihenfolge.

Zusammenfassungen – der inhaltliche Aufbau führt von der Übersicht ins Detail. Wesentliche Punkte und Zusammenfassungen stehen am Beginn einer Seite und lassen einschätzen, ob die Seite relevant ist. Überraschungen oder versteckte Funktionen werden vermieden. Zusammenfassungen sind auch für Suchmaschinen höchst nützlich, um eine Kurzübersicht zu einer Seite zu erfassen.

Bildbeschreibungen – eine ergänzende Bildbeschreibung führt als Text aus, was in einem Bild zu sehen ist. Dabei kann auch zwischen inhaltlich relevanten Bildern und grafischem Beiwerk unterschieden und letzteres beim Vorlesen übersprungen werden. Diese Maßnahme ist längst gängige Praxis für Suchmaschinen-Optimierung, und muss oft nur noch konsequenter beachtet werden.

Untertitel und Transcripte – für Videos und Audioinhalte (Podcasts ...) werden Beschreibungen, Untertitel und Transcripte angeboten werden. Auch hier: Texte sind von Suchmaschinen leichter indizierbar als Audio-Inhalte und fördern die Auffindbarkeit der Seite.

Gestaltung

Kontraste und Farben – hohe Kontrastverhältnisse zwischen Text und Hintergrundfarbe erleichtern die Lesbarkeit, Berücksichtigung von Farb-Fehlsichtigkeit hilft bei Orientierung über Farben. Auch klare Konturen erleichtern die Erfassbarkeit einer Webseite. Ist dies mit dem visuellen Erscheinungsbild eines Unternehmens schlecht vereinbar, kann per Programmierung ein Hochkontrast- oder Farb-Alternativ-Modus angeboten werden, der für Besucher mit entsprechenden Vorgaben in Betriebssystem oder Browser automatisch aktiviert wird.

Schriftgrößen – die Anpassbarkeit von Schriftgrößen und Schriftgewicht erleichtern die Erfassbarkeit von Texten. Eine Webseite kann entweder entsprechende feste Größenvarianten anbieten, oder – inzwischen besser – sich bei Verwendung der Browser-Zoom-Funktion so robust verhalten, dass die Webseite weiterhin nutzbar bleibt. Diese Anpassbarkeit ist technisch und konzeptionell oft schon vorbereitet, um sinnvolle Darstellungen auf Smartphones, Tablets oder Großbildschirmen zu gewährleisten.

Bewegung und Licht – animierte Webseiten und interaktive Reaktionsfähigkeit sind oft relevant für Storytelling im Web. Zu viel Bewegung oder schnelle Hell-Dunkel-Abfolgen können allerdings zu Wahrnehmungsproblemen führen. Eine barrierefreie Webseite berücksichtigt die Vorgaben bezüglich Bewegung in Betriebsystem oder Browser, und reduziert oder deaktiviert bewegte Elemente in diesen Fällen.

Fokus – speziell bei Tastatur-Navigation muss visuell erkennbar sein, welches Element einer Seite "im Fokus" ist und bei einer Bestätigung aktiv werden wird (z.B. Menüpunkte, Schaltflächen, ...).

Versteckte Inhalte – Aufklapper, Galerie-Slider etc. sind beliebte erweiterte Bedien-Elemente, um Detail-Inhalte erst bei aktiver Interaktion sichtbar zu machen. Die Bedienbarkeit solcher Elemente muss bei alternativen Eingabemethoden getestet werden und im Zweifel abschaltbar sein.

Technik

Sinn-tragende Programmierung – Die programmierte Struktur einer Webseite folgt ihrer inhaltlichen Bedeutung – ein Menü ist auch intern als solches beschrieben, Überschriften haben eine Rangordnung, Kopf- und Fußzeilen sind auch als solche ausgewiesen – der Fachbegriff lautet "semantisch korrektes HTML-Markup". Diese Anforderung ist längst auch die absolute Basis für erfolgreiche Suchmaschinen-Optimierung, um Suchmaschinen die Wichtigkeit von Inhalten verständlich zu machen. Screenreader nutzen genau die selben Grundlange, um eine Seite verständlich vorlesen zu können.

Formulare – sind klar aufgebaut und beschriftet und es ist – nicht nur visuell – erkennbar, ob ein Eingabefeld gültig ausgefüllt wurde. Der Absende-Button und insbesondere Bestell-Schaltflächen sind klar als solche bezeichnet.

ARIA-Attribute – diese zusätzlichen Informationen über Funktionen und Relevanz von Seitenelementen bieten Screenreadern zusätzliche Informationen an, wie mit bestimmten Seitenelementen umzugehen ist. So können unwichtige von wichtigen Elementen unterschieden werden, oder zentrale Funktionen wie ein Menü oder ein Suchfeld direkt erreicht werden.

Tastatur-Navigation – Die Webseite muss auch ohne Maus bedienbar sein, z.B. per Tastatur oder Sprachbefehlen. Alle Navigationselemente müssen schnell und zuverlässig erreichen sein. Kurze Wege zu wichtigen Elementen können in der Programmierung vorgegeben, sich wiederholende, wenig relevante Nebenelemente auch ausgeblendet werden.

Sprach-Auszeichnung – die Sprache einer Webseite kann technisch klar angegeben werden, das erleichtert es Vorlese- oder Übersetzungssoftware, den Inhalt richtig zu verarbeiten. Alle Sprachvarianten einer Seite sind technisch miteinander verbunden und so einfach auffindbar. Auch diese Maßnahme ist sehr relevant für Suchmaschinen-Optimierung für verschiedene Sprach-Zielgruppen und oft schon vorbereitet.