Inklusives Webdesign

Schon lange beschäftige ich mich gern und immer wieder mit dem Thema »Barrierefreies Internet«.
Als gesunder Internetnutzer vergisst man leider zu schnell, dass es auch Menschen gibt, die das gleiche Internet aufgrund von gesundheitlichen Einschränkungen anders nutzen müssen, als man es selber gewohnt ist: Sei es mithilfe von assistierenden Geräten, wie Bildschirmlesern, oder durch das bloße Anpassen der Schriftgröße.

Das Prinzip Design for All

Schon bei der Gestaltung einer Webseite sollte somit die spätere Barrierefreiheit eine wichtige Rolle spielen. Inklusive Webdesign Prinzipien sorgt dafür, dass die Homepage von möglichst allen Besuchern optimal genutzt werden kann — Design for All.

Inklusives Webdesign

Inklusives Webdesign

Zugänglichkeit/ Accessibility

Beim barrierefreien Webdesign steht die Zugänglichkeit für Menschen mit Behinderungen im Vordergrund, gleichzeitig kann die Homepage aber natürlich frei gestaltet werden, solange entsprechende Webstandards und Regeln beachtet werden. Eine barrierefreie Internetseite zeigt, dass einem alle Besucher wichtig sind.

Content First und Inklusives Design

Wenn man das Prinzip »Content First« — und der Inhalt einer Webseite sollte immer an erster Stelle stehen — beachtet, setzt das Inklusive Webdesign bereits bei der Zugänglichkeit von Text, Bildern und Videos an. Texte sollten klar und einfach verständlich geschrieben sein, Überschriften sollten den nachfolgenden Abschnitt gut beschreiben. Bilder, die für den Inhalt relevant sind, sollten ein alt-Element mit beschreibendem Alternativtext enthalten. Videos sollten über aussagekräftige und beschreibende Untertitel verfügen.

Umsetzung von inklusivem Design

Viele Punkte, die ein Inklusives Design ausmachen, lassen sich leicht umsetzen. Von dieser Umsetzung profitieren übrigens nicht nur gesundheitlich eingeschränkte Webseitenbesucher. Ein paar beispielhafte Punkte — ich möchte hier nicht zu sehr in programmiertechnische Details abdriften —, die beachtet werden sollten, liste ich nachfolgend einmal auf:

Zoom-Funktion

Fast jeder hat sich schon einmal darüber geärgert, dass sich eine Webseite auf dem Tablet-Computer oder dem Smartphone nicht größer ziehen liess. Eine zugängliche Webseite unterdrückt die Möglichkeit des Zoomens aber niemals, damit Menschen, die auf dieses Verhalten angewiesen sind, die Webseite überhaupt nutzen können. Gutes Webdesign nutzt relative Einheiten (rem, em oder ch) für Schriftgröße, Zeilenabstand, Ränder und Abstände. So ist gewährleistet, dass der Nutzer die Schriftgröße in den Browsereinstellungen selber verändern kann, ohne dass das komplette Layout kollabiert, Textzeilen ineinander fließen oder der Inhalt unzugänglich wird.

Lesbarkeit von Text

Bei der Auswahl der Schrift für Absatztext sollte besonders darauf geachtet werden, dass sich die unterschiedlichen Buchstaben nicht zu sehr ähneln, damit auch Menschen mit Lesestörung einen einfacheren Zugang haben.
Größe und Breite von Textblöcken sollten so angelegt sein, dass Zeilen nicht zu lang werden.
Auf Blocksatz im Webdesign sollte möglichst komplett verzichtet werden, vor allem da es Browser gibt, die keine automatischen Worttrennungen beherrschen. Beim Blocksatz könnten so Wortzwischenräume entstehen, die ein ordentliches Lesen erschweren.
Ein gesunder Zeilenabstand ist ebenfalls wichtig. Dieser muss unbedingt in relativen Einheiten angelegt sein, damit er sich bei Anpassungen der Schriftgröße durch den Nutzer verändert.
Beim Design sollte darauf geachtet werden, dass der Kontrast zwischen Hintergrund und Text so gewählt wird, dass er stark genug, aber auch nicht zu stark ist. Der passende Kontrast erleichtert das Lesen nicht nur für Menschen mit Augenkrankheiten.
Das Design sollte auch in Bezug auf Farbenblindheit getestet werden.

Links im Lesetext

Die sogenannten Inline-Links sollten grundsätzlich unterstrichen sein, sodass diese auch von Benutzern mit Farbblindheit sofort als Links erkannt werden können. Verlinkungen sollten auch immer einen sogenannten Fokus-Status haben: Bei der Navigation über die Tastatur lassen sich diese über die Tabulatortaste anvisieren. Der Fokus-Status gibt diesen Besuchern, die auf die Nutzung der Tastatur angewiesen sind, einen Hinweis darauf, dass die Verlinkung im Fokus ist und durch einen Klick auf die Enter-Taste verfolgt werden kann.

Externe Links im Lesetext

Links, über die man die Webseite verlassen würde, sollten unbedingt als externe Links ausgewiesen werden — zum Beispiel durch ein eindeutiges Icon und für Screenreader durch Alternativtext, der auf der Seite ausgeblendet wird.

Bring mich zum Inhalt! Skip to Content!

Für Vorlese-Anwendungen sollte vor der Hauptnavigation immer ein »Skip to Content«-Link einprogrammiert werden, welcher den optisch eingeschränkten Nutzer direkt zum Inhalt führen könnte, welcher aber ausgeblendet wird. Der blinde Besucher muss sich so nicht über die Tabulatortaste durch sämtliche Menüpunkte klicken, bevor er zum Inhalt gelangt.

Nutzung der korrekten HTML-Elemente

Seit der aktuellen Version HTML5 der Programmiersprache, die für die Struktur und den Inhalt der meisten Webseiten zuständig ist, gibt es Elemente, die von Haus aus bereits eine semantische Bedeutung haben, z.B. main, nav, aside, header, footer, article und section. Diese Elemente sollten so eingesetzt werden, dass sie eine logische Struktur bilden. Einzelne Abschnitte in längerem Lesetext sollten durch die passenden Überschrift-Elemente in einzelne Sektionen unterteilt werden. Im Screenreader kann der Nutzer dann von Überschrift zu Überschrift springen.

Navigationselemente

Die Navigation sollte sich über dem Inhalt befinden, damit sie via Tastatur für eingeschränkte Nutzer möglichst schnell erreicht werden kann, auch wenn Screenreader die Möglichkeit bieten, über einen Shortcut direkt zur Hauptnavigation zu springen. Navigation sollte nicht zuletzt deshalb über nav-Elemente eingebunden werden. So bekommt der Nutzer eines Screenreaders automatisch folgende Informationen vorgelesen:

  • Es folgt ein Navigationsliste
  • Sie befinden sich bei Listenpunkt x von x
  • Der fokussierte Link hat den Titel x

Das sind genau die Informationen, die man benötigt, und die der sehende Benutzer auf einen Blick erhält.

Navigation: Aktuelle Seite

Die aktuelle Seite in der Navigation sollte, genau wie der »Skip to Content«-Link vor der Navigation, zum Hauptinhalt (#main) der aktuellen Seite verlinken. Der Screenreader erkennt so, dass zur selben Seite verwiesen wird.
Zur optischen Auszeichnung der aktuellen Position in der Navigation sollte man sich nicht allein auf die Änderung der Farbe verlassen.

Nutzbarkeit auch ohne CSS und Skripte

Die Webseite sollte immer, auch ohne CSS – der Teil der Programmierung, der das Aussehen bestimmt —, und auch ohne Skripte — der Teil der Programmierung, der die Seite um bestimmte Fähigkeiten erweitert — voll nutzbar sein.

Suchmaschinenoptimierung

Halten sich alle Beteiligten eines Webdesign-Projekts an die vorgegebenen Regeln, sollte die Webseite letztendlich nicht nur aus sauberem und gut strukturiertem Code bestehen, sondern auch die Texte sollten gut lesbar und ordentlich strukturiert sein, Bilder sollten durch beschreibenden Alternativtext gekennzeichnet sein und Videos sollten in zugänglichen HTML5-Playern abgespielt werden und zusätzlich mit Untertiteln ausgestattet sein.
Ich brauche mich nicht weit aus dem Fenster zu lehnen, wenn ich behaupte, dass dies auch bei der Indexierung in Suchmaschinen von Vorteil sein kann.

Zusammenfassung

Gerade weil viele der oben genannten Anpassungen recht einfach umzusetzen sind, sollte man das Prinzip des Inklusiven Designs bei jedem Webprojekt von Anfang an verfolgen.

Ich würde mich sehr freuen, wenn ich auch für Sie ein Projekt realisieren dürfte. Kontaktieren Sie mich gern unter 05242 9089150 oder schreiben Sie mir eine Nachricht.

3

Torsten Nienaber

facebooktwitterinstagram

Mein Name ist Tosten Nienaber und als freiberuflicher Grafikdesigner rücke ich gern auch Ihr Produkt, Ihre Marke, Ihre Arbeit in das richtige Licht.

3 Gedanken zu “Inklusives Webdesign

  1. Pingback: Bedeutungsvolles Content First Webdesign | Very!Design

  2. Melanie Berger Vor 10 Monaten

    Ein wichtiges Thema! Danke für den Beitrag. Melanie

    1. Torsten Nienaber Vor 10 Monaten

      Hallo Melanie Berger,

      Gern. Auf jeden Fall ist das ein wichtiges Thema, mit dem ich mich auch weiterhin intensiv beschäftige.

      Gruß aus Ostwestfalen,
      Torsten Nienaber