HTML5 et ARIA

page en cours de rédaction

Depuis HTML5, les rôles ARIA paraissent avoir moins d’importance. C’est faux, d’abord parce que le HTML5 seul ne peut pas tout (et les pages complexes nécessiteront toujours l’utilisation des rôles ARIA) mais aussi parce que tous les visiteurs n’ont pas la dernière version d’un navigateur populaire (notamment dans certaines entreprises ou administrations où les visiteurs n’ont pas la possibilité de mettre leur navigateur à jour).

Sans tombe dans une rétro-compatibilité excessive (et pas toujours possible), il peut être bon de passer à HTML5 tout en conservant les rôles ARIA même si certains sont implicites avec les nouveaux marqueurs.

Petite liste des équivalences HTML5 et ARIA :

marqueur HTML5 rôle ARIA
<article> role= »article »
<aside> role= »complementary »
<footer> role= »contentinfo »
<form> role= »form »
<header> role= »banner »
<main> role= »main »
<nav> role= »navigation »
<section> role= »region »

Il est donc de bon ton de mixer les deux techniques, à savoir utiliser le rôle ARIA dans le marqueur HTML5. Exemple : <nav role="navigation"></nav>. Deux précautions valent mieux qu’une ! Une règle chez les navigateurs est de considérer comme « block » tout marqueur inconnu, ainsi les vieux navigateurs que compredront pas le sens du marqueur « <nav> » mais auront l’information grâce au rôle ARIA (qui ne date pas d’hier…).

Attention ! Internet Explorer (jusqu’à la version 11) ne reconnait pas du tout le marqueur <main> et va créer un élément vide dans le DOM ; le contenu sera toutefois affiché mais indépendamment du marqueur ! Un contournement est d’ajouter le marqueur en Javascript (document.createElement("main")) et de lui appliquer le style display:block;.

Ressources

 

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.




Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.