Wir wissen, dass es eine gute Idee ist, responsiv zu gestalten, um die beste geräteübergreifende Nutzererfahrung zu bieten. Responsives Design bietet aber auch Vorteile für die Barrierefreiheit.
Ein Beispiel: Udacity
Ein Nutzer mit eingeschränktem Sehvermögen, der Schwierigkeiten beim Lesen von Kleingedrucktem hat, vergrößert die Seite möglicherweise um bis zu 400%. Da die Website responsives Design verwendet, wird die Benutzeroberfläche für den „kleineren Viewport“ (eigentlich für die größere Seite) neu angeordnet. Das ist sowohl für Desktopnutzer, die eine Bildschirmvergrößerung benötigen, als auch für Nutzer von mobilen Screenreadern von Vorteil. So profitieren alle davon. Hier ist dieselbe Seite mit einer Vergrößerung von 400 % zu sehen:
Durch responsives Design erfüllen wir die Regel 1.4.4 der WebAIM-Checkliste, in der es heißt, dass eine Seite „lesbar und funktionsfähig ist, wenn die Textgröße verdoppelt wird“.
Die Behandlung aller Aspekte des responsiven Designs würde den Rahmen dieses Leitfadens sprengen. Hier sind jedoch einige wichtige Punkte, die die responsive Darstellung verbessern und Nutzern einen besseren Zugriff auf Ihre Inhalte ermöglichen.
Darstellungsbereich-Meta-Tag verwenden
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Die Einstellung width=device-width entspricht der Breite des Bildschirms in geräteunabhängigen Pixeln und die Einstellung initial-scale=1 stellt ein 1:1-Verhältnis zwischen CSS-Pixeln und geräteunabhängigen Pixeln her. Dadurch wird der Browser angewiesen, Ihre Inhalte an die Bildschirmgröße anzupassen, damit Nutzer nicht nur zusammengepressten Text sehen.
Weitere Informationen finden Sie unter Größe von Inhalten an den Darstellungsbereich anpassen.
Nutzern das Zoomen erlauben
Mit dem Viewport-Meta-Tag können Sie das Zoomen verhindern, indem Sie maximum-scale=1 oder user-scaleable=no festlegen. Vermeiden Sie das und lassen Sie Ihre Nutzer bei Bedarf zoomen.
Flexibles Design
Vermeiden Sie es, auf bestimmte Bildschirmgrößen auszurichten. Verwenden Sie stattdessen ein flexibles Raster und passen Sie das Layout bei Bedarf an. Wie wir am Beispiel von Udacity gesehen haben, wird durch diesen Ansatz sichergestellt, dass das Design reagiert, unabhängig davon, ob der reduzierte Platz auf einen kleineren Bildschirm oder einen höheren Zoomfaktor zurückzuführen ist.
Weitere Informationen zu diesen Techniken finden Sie unter Grundlagen zu responsivem Webdesign.
Relative Einheiten für Text verwenden
Damit Ihr flexibles Raster optimal funktioniert, sollten Sie für Elemente wie die Schriftgröße relative Einheiten wie „em“ oder „rem“ anstelle von Pixelwerten verwenden. In einigen Browsern kann die Textgröße nur in den Nutzereinstellungen geändert werden. Wenn Sie einen Pixelwert für Text verwenden, hat diese Einstellung keine Auswirkungen auf Ihren Text. Wenn Sie jedoch durchgehend relative Einheiten verwendet haben, wird die Kopie der Website entsprechend der Einstellung des Nutzers aktualisiert.
So kann die gesamte Website neu fließen, wenn der Nutzer zoomt, und die Leseumgebung wird an die Bedürfnisse des Nutzers angepasst.
Vermeiden Sie, dass die visuelle Darstellung von der Quellreihenfolge getrennt wird.
Tastaturnutzer, die auf Ihrer Website mit der Tabulatortaste navigieren, folgen der Reihenfolge der Inhalte in Ihren HTML-Dokumenten. Wenn Sie Layoutmethoden wie Flexbox und Grid verwenden, können Sie die visuelle Reihenfolge von Elementen ändern, was zu einer Abweichung von der Quellreihenfolge führen kann. Das kann dazu führen, dass der Nutzer mit jedem Tab auf der Seite hin- und herspringt.
Testen Sie Ihr Design an jedem Breakpoint, indem Sie mit der Tabulatortaste durch die Inhalte wechseln. Fragen Sie sich: „Ist der Ablauf auf der Seite noch sinnvoll?“
Weitere Informationen zu Abweichungen zwischen Quelle und visueller Darstellung
Vorsicht bei räumlichen Hinweisen
Vermeiden Sie beim Verfassen von Mikrotexten Formulierungen, die den Ort eines Elements auf der Seite angeben. Nutzer mit Sehbehinderung haben diesen gemeinsamen Kontext möglicherweise nicht und profitieren eher von der Identifizierung des genauen Elementtexts, damit sie danach suchen können.
Das hilft auch allen Nutzern, da die Navigation in einer mobilen Version an einer anderen Stelle als in der Desktopversion angezeigt werden kann.
Tippziele auf Touchscreen-Geräten müssen groß genug sein
Achten Sie bei Touchscreen-Geräten darauf, dass die Tippziele groß genug sind, damit sie leichter aktiviert werden können, ohne dass andere Links getroffen werden. Eine gute Größe für jedes antippbare Element ist 48 px. Weitere Informationen zu Tippzielen