Wir wissen, dass es eine gute Idee ist, beim Design responsiv zu sein, um die bestmögliche Nutzung für verschiedene Geräte zu ermöglichen. Responsives Webdesign sorgt jedoch auch für einen Gewinn in puncto Barrierefreiheit.
Betrachten Sie eine Website wie Udacity:
Ein Nutzer mit eingeschränktem Sehvermögen, der Schwierigkeiten beim Lesen von Kleingedruckten hat, kann die Seite vergrößern, um bis zu 400 % heranzuzoomen. Da die Website responsiv gestaltet ist, ändert sich die Benutzeroberfläche automatisch für den kleineren Darstellungsbereich (eigentlich für die größere Seite). Das ist vor allem für Computernutzer, die eine Bildschirmvergrößerung benötigen, und für Nutzer von Screenreadern auf Mobilgeräten sehr nützlich. So profitieren alle davon. Hier ist dieselbe Seite auf 400 % vergrößert:
Durch das responsive Design erfüllen wir sogar Regel 1.4.4 der WebAIM-Checkliste, die besagt, dass eine Seite bei verdoppelter Textgröße lesbar und funktionsfähig sein sollte.
Es würde den Rahmen dieses Leitfadens sprengen, alle Aspekte des responsiven Webdesigns vollständig zu behandeln. Hier sind jedoch ein paar wichtige Punkte, die Ihre responsive Erfahrung nutzen werden und Ihren Nutzern einen besseren Zugriff auf Ihre Inhalte ermöglichen.
Darstellungsbereich-Meta-Tag verwenden
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Wenn Sie width=device-width festlegen, wird die Bildschirmbreite in geräteunabhängigen Pixeln verwendet. Durch die Einstellung initial-scale=1 wird eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln hergestellt.
Hierdurch wird der Browser angewiesen, Ihre Inhalte an die Bildschirmgröße anzupassen, sodass Nutzer nicht nur einen Haufen verkürzter Text sehen.
Weitere Informationen finden Sie unter Inhalte an den Darstellungsbereich anpassen.
Nutzer dürfen zoomen
Das Darstellungsbereich-Meta-Tag kann durch Festlegen von maximum-scale=1 oder user-scaleable=no verwendet werden, um das Zoomen zu verhindern.
Vermeiden Sie dies und lassen Sie die Nutzer bei Bedarf heranzoomen.
Design mit Flexibilität
Vermeiden Sie die Ausrichtung auf bestimmte Bildschirmgrößen und verwenden Sie stattdessen ein flexibles Raster. Dadurch wird das Layout je nach Inhalt geändert. Wie wir beim Udacity-Beispiel oben gesehen haben, sorgt dieser Ansatz dafür, dass das Design reagiert, unabhängig davon, ob der reduzierte Platz auf einen kleineren Bildschirm oder eine höhere Zoomstufe zurückzuführen ist.
Weitere Informationen zu diesen Techniken finden Sie im Artikel Grundlagen des responsiven Webdesigns.
Relative Einheiten für Text verwenden
Um Ihr flexibles Raster optimal zu nutzen, verwenden Sie relative Einheiten wie em oder rem für Dinge wie die Textgröße anstelle von Pixelwerten. Einige Browser unterstützen die Größenanpassung von Text nur in den Nutzereinstellungen. Wenn Sie für Text einen Pixelwert verwenden, wirkt sich diese Einstellung nicht auf die Kopie aus. Wenn du jedoch durchgehend relative Einheiten verwendet hast, wird die Websitekopie an die Präferenzen des Nutzers angepasst.
Dadurch kann die gesamte Website umformatiert werden, wenn der Nutzer zoomt, und es wird die Leseumgebung gegeben, die er für die Nutzung Ihrer Website benötigt.
Vermeiden Sie es, die visuelle Ansicht von der Quellreihenfolge zu trennen
Ein Besucher, der mit der Tastatur durch Ihre Website blättert, folgt der Reihenfolge der Inhalte im HTML-Dokument. Wenn Sie moderne Layoutmethoden wie Flexbox und Grid verwenden, kann das visuelle Rendering nicht mit der Quellreihenfolge übereinstimmen. Dies kann zu beunruhigenden Sprüngen auf der Seite für Nutzer führen, die die Tastatur verwenden.
Testen Sie Ihr Design an jedem Haltepunkt, indem Sie mit der Tabulatortaste durch den Inhalt blättern. Ist der Fluss durch die Seite trotzdem sinnvoll?
Mit räumlichen Hinweisen aufpassen
Vermeiden Sie beim Schreiben von Mikrokopien, die Position eines Elements auf der Seite durch eine Formulierung anzugeben. Beispielsweise ist es in einer mobilen Version nicht sinnvoll, sich auf die Navigation "auf der linken Seite" zu beziehen, wenn sich die Navigation oben auf dem Bildschirm befindet.
Tippziele müssen auf Touchscreen-Geräten groß genug sein
Bei Geräten mit Touchscreen müssen die Tippziele groß genug sein, damit sie sich leicht aktivieren lassen, ohne auf andere Glieder zu tippen. Eine gute Größe für jedes antippbare Element ist 48 Pixel. Weitere Informationen zu Tippzielen