Certes, le design adaptatif met l’accent sur la capacité de la mise en page à s’adapter à l’écran de l’utilisateur. Une telle optimisation facilite la lecture et la navigation dans le contenu sur des écrans de différentes tailles en permettant au contenu de « s’ajuster et de se déplacer ». Mais il existe un autre aspect essentiel à prendre en compte dans ce processus de conception : comment la sémantique et les relations entre les informations sont-elles présentées aux personnes utilisant des technologies d’assistance sur différentes plateformes ? Sur les appareils à écran tactile, par exemple, il n’est pas possible de faire défiler une colonne d’un tableau de données vers le bas comme on le ferait sur un ordinateur de bureau. Les différences de prise en charge des balises HTML et ARIA selon les plateformes et les appareils doivent également être prises en compte lors de la conception et du développement.
Un exemple d'accessibilité sur mobile
Dans cet exemple, les détails du compte s'affichent dans un tableau de données à deux colonnes lorsque la case « Affichage mobile » n'est pas cochée. VoiceOver ne lit pas les en-têtes de ligne lorsque l'on parcourt le contenu d'un tableau de données. Ainsi, en mode d'affichage mobile, il est tout à fait possible d'utiliser à la place un balisage de liste si on le souhaite. L'expérience utilisateur reste la même pour un utilisateur de VoiceOver.
Notez également que les deux liens pouvant être développés ou réduits utilisent l'attribut `aria-expanded` pour indiquer l'état du lien. Cependant, sur un appareil iOS, c'est l'attribut `title`, ajouté au lien à titre de redondance, qui prend le relais pour indiquer l'état du lien.
