Wichtige Aspekte bei der Gestaltung von Webseiten

Webseiten sind die Zugangspunkte für digitale Inhalte, Services und Dienstleistungen. Wenn ihr eine Open-Access-Zeitschrift herausgebt oder ein Repositorium betreibt, ist einerseits die Barrierefreiheit der wissenschaftlichen Artikel selbst, also der PDFs wichtig, andererseits muss auch die Webseite, auf der die Artikel eingebunden sind, barrierefrei navigierbar sein.

Strukturierte Inhalte und Navigation

Für blinde Menschen gibt es keinen Bildschirm mit Parametern wie oben, unten, links oder rechts. Alle Inhalte werden nacheinander ausgegeben, deshalb sollte euer Layout linearisierbar sein. Das heißt, eine klare und logische Struktur haben, die auch in linearer Reihenfolge ausgegeben Sinn ergibt.

Durch die Verwendung von HTML-Strukturelementen können maschinenlesbare semantische Informationen für Texte, Listen, Zitate und Tabellen erstellt werden. Eine konsistente Überschriftenhierarchie mit den Attributen <h1>, <h2>, <h3> etc. ermöglicht Nutzer*innen mit Screenreadern, die Inhalte schnell zu erfassen und gezielt zu navigieren.

Zusätzlich sollten Überschriften den Inhalt der jeweiligen Abschnitte präzise widerspiegeln und eine logische Gliederung bieten. Eine gut durchdachte Navigation – beispielsweise durch ein Inhaltsverzeichnis oder Menüleisten – erleichtert das schnelle Auffinden von Informationen.  

Navigationslinks müssen eindeutig beschriftet sein, damit Nutzer*innen sofort erkennen, wohin sie gelangen, wenn sie einen Link aktivieren.

Beispiele für strukturierende HTML-Elemente sind:

• Überschriften: <h1> ... </h1>
• Aufzählungsliste: <ul> ... </ul>
• Nummerierte Liste: <ol> ... </ol>
• Zitate: <blockquote> ... </blockquote>
• Absätze: <p> ... </p>
• Hervorhebungen <strong> ... </strong>
• Tabelle: <table> ... </table>
• Sprache:  <lang>...</lang>, allgemein muss die Hauptsprache ausgezeichnet werden, aber jeder fremdsprachige Abschnitt muss ebenfalls gekennzeichnet werden

Inhalte werden in Webseiten mit HTML eingebunden, optisch strukturiert werden sie über CSS. Wichtig ist, dass die logische Reihenfolge im HTML Sinn ergibt, da Screenreader darauf zugreifen. Ihr könnt das testen, indem ihr das CSS-Stylesheet in den Browsereinstellungen blockiert. Zusammenfassend bedeutet das für euch: Trennung von Inhalt und Design.

Farbkontraste, Schriftgrößen und Grafiken

Allgemein gilt, dass eure Webseite ohne sensorische Merkmale, wie Farben, Form, Größe oder Position funktionieren sollte.

Ein ausreichender Farbkontrast zwischen Text und Hintergrund ist entscheidend, um die Lesbarkeit für alle Nutzer*innen sicherzustellen. Die empfohlene Kontraststärke liegt bei mindestens 4,5:1 für normalen Text. Für Bedienelemente, Grafik oder großer Schrift (min. 18,5pt oder 14pt + Fettdruck) bei 3:1. Wie bei den Dokumenten erwähnt, können Tools, wie der Colour Contrast Analyser, dabei helfen, die Kontraste zu überprüfen.

Zudem sollten Schriftgrößen flexibel anpassbar sein; standardmäßig sollte Text in einer gut lesbaren Größe (mindestens 16 Pixel) dargestellt werden und bis zu 200% vergrößerbar sein. Vermeidet festgelegte Größen, die auf mobilen Geräten oder bei vergrößerten Darstellungen schwer lesbar sind.

Die Webseite sollte im Responsive Design gestaltet werden, sich also an das Endgerät anpassen. Es gilt: Fokus auf die mobilen Endgeräte, hier sollte kein horizontales Scrollen notwendig sein, um Inhalte zu erfassen.

Für Grafiken gilt das gleiche wie bei Dokumenten: Sie müssen mit passenden Alternativtexten versehen werden. Hier nochmal der Hinweis auf den "alt-Entscheidungsbaum", der euch bei der Formulierung hilft.

Interaktive Elemente 

Interaktive Elemente wie Formulare, Buttons oder Links müssen klar gekennzeichnet sein, um eine barrierefreie Nutzung zu gewährleisten. Beschriftungen sollten eindeutig den Zweck des Elements wiedergeben („Name eingeben“, „Absenden“, „Download PDF“).

URLs sollten mit einem Linktitel versehen werden, den der Screenreader vorlesen kann. Stellt euch vor, ihr bekommt bei der Bedienung einer Webseite einen oder mehrere Links ausbuchstabiert vorgelesen, die zum Beispiel so aussehen: www.beispiel.de/asfkjdkjaödkjgökajsdöfkj.php Auf einer Braillezeile nimmt so eine URL so viel Platz weg, dass es keinen Platz mehr für andere Inhalte gibt. Am besten sind Linktexte möglichst aussagekräftig, dann können Links einfach im Fließtext vorkommen. Wollt ihr keinen Linktext verwenden, ist es wichtig vorab zu beschreiben, was für ein Link folgt und den Link selbst in den nächsten Abschnitt zu setzen, dann kann er bei Bedarf schnell übersprungen werden.

Hashtags werden vor allem in Sozialen Netzwerken genutzt, können aber auch auf Webseiten vorkommen. Wenn die Anfangsbuchstaben der einzelnen Worte groß geschrieben sind, können auch Hilfstechnologien einen Hashtag sinnvoll vorlesen. Zum Beispiel #OpenAccess oder #openAccess

Für Nutzer*innen mit Tastatursteuerung ist es wichtig, dass diese Elemente in der richtigen Reihenfolge fokussierbar sind und visuell hervorgehoben werden. Auch bei komplexeren Formularen sollte auf eine verständliche Anordnung und klare Hinweise geachtet werden. 

Multimedia-Inhalte

Auf Webseiten werden oft Multimedia-Inhalte eingebettet. Allgemein gilt, dass es einen aussagekräftigen Titel geben sollte, da Thumbnails und Teaser-Bilder für Blinde nicht zu erkennen sind. Bewegte Inhalte sollten immer abschaltbar sein und auf flackernde und blitzende Inhalte solltet ihr verzichten.

Videos sollten idealerweise kurz anmoderiert werden, damit blinde Menschen wissen, dass sie das richtige Video gefunden haben. Generell sollten Untertitel, Audiodeskriptionen oder Transkripte zur Verfügung stehen. Dafür stehen viele (teilweise kostenlose) Tools zur Verfügung. Videoportale erstellen mittlerweile automatisch Untertitel oder Transkripte. Trotzdem solltet ihr diese prüfen und bei Bedarf nachbessern.