Wir wissen, dass es eine gute Idee ist, responsive Designs zu erstellen, um die Nutzerfreundlichkeit auf verschiedenen Geräten zu optimieren. Responsives Design bietet aber auch Vorteile für die Barrierefreiheit.
Stellen Sie sich eine Website wie Udacity vor:
Nutzer mit eingeschränktem Sehvermögen, die Schwierigkeiten beim Lesen von Kleingedruckten haben, zoomen möglicherweise die Seite um bis zu 400%. Da die Website responsiv gestaltet ist, wird die Benutzeroberfläche für den „kleineren Darstellungsbereich“ (eigentlich für die größere Seite) neu angeordnet. Das ist ideal für Desktop-Nutzer, die eine Bildschirmlupe benötigen, und auch für Nutzer von Screenreadern auf Mobilgeräten. So profitieren alle davon. Hier ist dieselbe Seite mit 400 % vergrößert:
Durch ein responsives Design erfüllen wir bereits die Regel 1.4.4 der WebAIM-Checkliste, die besagt, dass eine Seite „…lesbar und funktionsfähig sein sollte, wenn die Textgröße verdoppelt wird“.
Ein umfassender Überblick über responsives Design würde den Rahmen dieses Leitfadens sprengen. Hier sind jedoch einige wichtige Erkenntnisse, die sich positiv auf Ihre responsive Website auswirken 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">
Mit der Einstellung width=device-width wird die Bildschirmbreite in geräteunabhängigen Pixeln angeglichen. Mit initial-scale=1 wird eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln hergestellt.
Dadurch wird der Browser angewiesen, Ihre Inhalte an die Bildschirmgröße anzupassen, damit Nutzer nicht nur einen unleserlichen Text sehen.
Weitere Informationen finden Sie unter Inhalte an Darstellungsbereich anpassen.
Nutzern das Zoomen erlauben
Sie können das Darstellungsbereich-Meta-Tag verwenden, um das Zoomen zu verhindern. Legen Sie dazu maximum-scale=1 oder user-scaleable=no fest.
Vermeiden Sie dies und lassen Sie die Nutzer bei Bedarf heranzoomen.
Flexibel designen
Vermeiden Sie das Targeting auf bestimmte Bildschirmgrößen und verwenden Sie stattdessen ein flexibles Raster, bei dem Sie Änderungen am Layout vornehmen, wenn die Inhalte dies vorgeben. Wie wir am Beispiel von Udacity 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
Verwenden Sie relative Einheiten wie em oder rem für Dinge wie Textgröße anstelle von Pixelwerten, um das flexible Raster optimal zu nutzen. Einige Browser unterstützen die Größenanpassung von Text nur in den Nutzereinstellungen. Wenn Sie einen Pixelwert für Text verwenden, wirkt sich diese Einstellung nicht auf die Kopie aus. Wenn Sie jedoch durchgängig relative Einheiten verwendet haben, wird der Text auf der Website entsprechend den Einstellungen des Nutzers aktualisiert.
So kann die gesamte Website neu formatiert werden, wenn der Nutzer heranzoomt, und die Leser können Ihre Website optimal nutzen.
Die visuelle Ansicht nicht von der Quellreihenfolge trennen
Ein Besucher, der sich mit der Tastatur durch Ihre Website bewegt, folgt der Reihenfolge der Inhalte im HTML-Dokument. Bei Verwendung moderner Layoutmethoden wie Flexbox und Grid lässt sich das visuelle Rendering ganz einfach von der Quellreihenfolge abweichen. Das kann zu irritierenden Seitensprüngen führen, wenn Nutzer die Tastatur zum Navigieren verwenden.
Testen Sie Ihr Design an jedem Wendepunkt, indem Sie sich durch den Inhalt bewegen. Macht der Fluss durch die Seite immer noch Sinn?
Weitere Informationen zur Unterbrechung der Verbindung zwischen Quelle und visuellem Display
Vorsicht mit räumlichen Hinweisen
Verwenden Sie beim Erstellen von Microcopy keine Formulierungen, die den Standort eines Elements auf der Seite angeben. Beispielsweise ist es in einer mobilen Version nicht sinnvoll, auf die Navigation „auf der linken Seite“ zu verweisen, wenn sich die Navigation oben auf dem Bildschirm befindet.
Tippziele auf Touchscreen-Geräten müssen groß genug sein
Bei Geräten mit Touchscreen sollten die Tippziele groß genug sein, damit sie ohne Klicken auf andere Links aktiviert werden können. Eine gute Größe für alle anklickbaren Elemente ist 48 px. Weitere Informationen zu Tippzielen finden Sie hier.