Natürlich liegt der Schwerpunkt des responsiven Designs auf der Fähigkeit des Layouts, sich an den Bildschirm des Nutzers anzupassen. Eine solche Optimierung erleichtert das Lesen und die Navigation durch die Inhalte auf verschiedenen Bildschirmgrößen, indem die Inhalte sich „anpassen und verschieben“. Es gibt jedoch noch einen weiteren entscheidenden Aspekt, der bei diesem Designprozess berücksichtigt werden muss: Wie werden Semantik und Informationszusammenhänge für Personen dargestellt, die auf verschiedenen Plattformen assistive Technologien nutzen? Auf Touchscreen-Geräten kann man beispielsweise nicht wie auf einem Desktop-Computer in einer Datentabelle eine Spalte nach unten durchblättern. Auch Unterschiede bei der Unterstützung von HTML/ARIA auf verschiedenen Plattformen und Geräten müssen bei Design und Entwicklung berücksichtigt werden.
Ein Beispiel für Barrierefreiheit auf Mobilgeräten
In diesem Beispiel werden die Kontodaten in einer zweispaltigen Datentabelle angezeigt, wenn das Kontrollkästchen „Mobile Ansicht“ deaktiviert ist. VoiceOver liest die Zeilenüberschriften nicht vor, wenn man durch den Inhalt einer Datentabelle blättert. Daher ist es in der mobilen Ansicht in Ordnung, stattdessen Listenformatierungen zu verwenden, falls man dies wünscht. Die Benutzererfahrung bleibt für VoiceOver-Nutzer dabei unverändert.
Beachten Sie außerdem, dass die beiden Links, die ein- und ausgeblendet werden können, das Attribut „aria-expanded“ verwenden, um den Status des Links anzuzeigen. Auf einem iOS-Gerät ist es jedoch das Attribut „title“, das aus Gründen der Redundanz im Link angegeben ist, das den Status des Links vermittelt.
