HTML 5 et ARIA

L'accessibilité du web ou comment permettre aux mal- et non-voyants de "lire" nos blogs plus facilement...

Les internautes mal ou non-voyants accèdent au contenu du web grâce à des lecteurs d'écran qui restituent vocalement ce contenu. Mais si le site est mal écrit (côté code), la page est difficilement lisible.

Un des moyens d'améliorer la lecture du code pour les non-voyants consiste à indiquer aux lecteurs d'écran le rôle du contenu dans les balises avec l'attribut role.

Par exemple, pour une section recherche, on ajoute role = "search" dans le code du formulaire :

 <form role="search">...</form>

C'est tout bête...

L'attribut role peut être ajouté dans le code facilement. Exemple pour l'en-tête. On ajoute le role "banner" pour indiquer qu'il s'agit... de l'en-tête dans la balise header (HTML5)

 <header id ="top" role="banner">
 <h1>Titre du blog</h1>
 <h2>Description</h2>
 </header>

C'est d'autant plus utile que tous les lecteurs d'écran ne comprennent pas encore la structure en sections d'HTML5. Même lorsque cela sera le cas, on peut préciser davantage le rôle d'une section avec l'attribut role.

Il existe d'autres valeurs pour role comme :

  • main pour le contenu principal (un seul par page)

  • directory pour une table des matières

  • navigation pour délimiter les menus (limiter le nombre).

  • complementary : informations complémentaires dans une page.

  • search : délimite une zone de recherche

  • contentinfo : informations sur le contenu

Exemple pour un pied de page où est affiché les informations sur l'auteur du blog

 <footer role="contentinfo">
 </footer>

Ajouter des attributs roles permet d'améliorer l'accès aux informations du blog. Même dans un site web assez simple comme un blog, ça ne mange pas de pain et ça permet de réfléchir davantage à la structure de ses pages.

Plus d'infos sur ce sujet : http://www.siteduzero.com/tutoriel-3-729496-creer-un-blog-accessible-avec-html5.html#ss_part_2

Un exemple de blog HTML5/ARIA : http://www.lombre.net