Wir wissen, dass es eine gute Idee ist, das Design responsiv zu entwickeln, um die bestmögliche Erfahrung auf verschiedenen Geräten zu bieten. aber responsives Design bringt auch die Barrierefreiheit mit sich.
Stellen Sie sich eine Website wie Udacity vor:
Nutzende mit eingeschränktem Sehvermögen, die Kleingedrucktes nicht lesen können, bis zu 400%. Da die Website responsiv gestaltet ist, Die Benutzeroberfläche wird für den „kleineren Darstellungsbereich“ neu angeordnet. für die größere Seite Das ist ideal für Desktop-Nutzer, die eine Bildschirmvergrößerung benötigen. und auch für Nutzer von mobilen Screenreadern. So profitieren alle davon. Hier sehen Sie dieselbe Seite auf 400 % vergrößert:
Schon durch ein responsives Design wir erfüllen Regel 1.4.4 der WebAIM-Checkliste. was besagt, dass eine Seite „... sollte bei doppelter Schriftgröße lesbar und funktionsfähig sein“.
In diesem Leitfaden werden nicht alle Aspekte des responsiven Designs behandelt. aber hier sind einige wichtige Punkte, die für die responsive Nutzererfahrung und den Nutzern besseren Zugriff auf Ihre Inhalte bieten.
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 verwendet.
Mit der Einstellung 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 die Nutzenden nicht nur viel Text sehen.
Weitere Informationen finden Sie unter Inhalte an Darstellungsbereich anpassen.
Nutzer dürfen zoomen
Mit dem Meta-Tag für den Darstellungsbereich kann das Zoomen,
indem Sie maximum-scale=1 oder user-scaleable=no festlegen.
Vermeiden Sie dies und lassen Sie Ihre Nutzer bei Bedarf heranzoomen.
Flexibles Design
Vermeiden Sie die Ausrichtung auf bestimmte Bildschirmgrößen und verwenden Sie Änderungen am Layout vornehmen, wenn der Inhalt vorgibt. Wie wir an dem Udacity-Beispiel oben gesehen haben, sorgt dieser Ansatz dafür, dass das Design 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
So nutzen Sie Ihr flexibles Raster optimal Verwenden Sie relative Einheiten wie em oder rem für Dinge wie Textgröße anstelle von Pixelwerten. Einige Browser unterstützen nur die Textanpassung in den Nutzereinstellungen, Wenn Sie einen Pixelwert für Text verwenden, wirkt sich diese Einstellung nicht auf Ihre Kopie aus. Wenn Sie jedoch durchgängig relative Einheiten verwendet haben, wird die Website-Kopie an die Einstellungen des Nutzers angepasst.
So kann die gesamte Website angepasst werden, wenn der Nutzer zoomt. um ihnen den Lesestoff zu bieten, den sie auf Ihrer Website brauchen.
Trennung der visuellen Ansicht von der Quellreihenfolge vermeiden
Ein Besucher, der mit der Tastatur durch Ihre Website navigiert folgt der Reihenfolge des Inhalts im HTML-Dokument. Wenn Sie moderne Layoutmethoden wie Flexbox und Grid verwenden, kann es leicht passieren, dass das visuelle Rendering nicht mit der Quellreihenfolge übereinstimmt. Dies kann zu beunruhigenden Sprüngen auf der Seite führen, wenn Nutzer die Tastatur verwenden.
Testen Sie Ihr Design an jedem Haltepunkt, indem Sie mit der Tabulatortaste durch den Inhalt, Ist der Fluss durch die Seite trotzdem sinnvoll?
Weitere Informationen zur Trennung der Verbindung zwischen Quelle und visueller Anzeige
Vorsicht mit räumlichen Hinweisen
Vermeiden Sie beim Schreiben von Mikrokopien die Verwendung von Formulierungen, die die Position eines Elements auf der Seite angeben. Zum Beispiel auf die Navigation „auf der linken Seite“. macht in einer mobilen Version keinen Sinn. wenn sich die Navigation oben auf dem Bildschirm befindet.
Auf Touchscreen-Geräte sollten Tippziele groß genug sein
Achten Sie bei Geräten mit Touchscreen darauf, dass die Tippziele groß genug sind. um sie einfach zu aktivieren, ohne auf andere Links zugreifen zu müssen. Für jedes antippbare Element sind 48 Pixel Weitere Informationen zu Tippzielen