Sommaire

L’accessibilité

L’accessibilité des sites web pour les personnes handicapées est parfois négligée par les concepteurs des sites web. Foundation vous propose des classes qui vont permettre d’afficher des éléments lorsque le visiteur utilise un écran dédié à la lecture orale du contenu des pages web.

La classe .show-for-sr permet de spécifier que l’élément concerné ne sera lu que par l’utilisation d’un écran dédié.

L’utilisation de l’attribut aria-hidden="true" permet de spécifier que l’élément concerné est affiché, mais ne doit pas être lu par la lecture orale de l’écran.

Lorsque vous avez un site web avec de très nombreux éléments de navigation, le visiteur handicapé va devoir attendre que le lecteur d’écran liste tous les éléments de navigation, avant d’arriver au contenu rédactionnel du site. Pour éviter cela, vous pouvez insérer tout au début de votre page, un lien qui va permettre d’éviter toute la lecture de la navigation, si le visiteur le souhaite. Ce lien utilisera la classe .show-on-focus.

Voici un exemple court de cette structure :

<p> 
  <a class="show-on-focus" href="#mainContent">Allez directement au contenu</a> 
</p> 
...  
<header id="header" ...