Support des rôles landmark ARIA et éléments sectionnants HTML5 par les lecteurs d'écran

Sophie Schuermans le 24/07/2013 - 1 réaction

Traduction de l'article en néerlandais HTML5, ARIA landmark roles en screenreaders.

Le HTML donne de la structure à l'information de votre site web et cela présente également des avantages pour l'accessibilité. Quelqu'un qui ne voit pas, ou pas bien, la page ne dispose pas d'une vue d'ensemble. Une bonne structure aide le visiteur à mieux comprendre l'information et à trouver plus facilement ce qu'il cherche. Il est bien connu que les lecteurs d'écran peuvent sauter de titre en titre et naviguer facilement dans les listes à condition que la structure de la page respecte la spécification HTML. Depuis peu il existe deux nouvelles manières d'ajouter de la structure à une page: les rôles landmark ARIA et les éléments sectionnants HTML5.

ARIA, recommandation candidate du W3C, doit permettre de rendre les environnements web plus accessibles. Les rôles landmark font partie de la spécification. En bref, ils permettent d'indiquer ce que contiennent les différents blocs qui constituent la page. On a par exemple role="navigation", role="main", role="search" etc.

HTML5 introduit quelque chose de similaire mais sous forme de nouveaux éléments HTML comme <nav>, <main>, <section> etc.

Nous avons testé quels rôles et éléments sectionnants sont supportés par les différents lecteurs d'écran et sur base de ces tests nous faisons les recommandations suivantes:

  • Seul JAWS supporte l'élément <nav>, alors que role="navigation" est reconnu par tous les lecteurs d'écran. C'est une bonne idée de combiner les deux: <nav role="navigation">. Notez bien que ceci ne doit être utilisé que pour le menu principal ainsi qu’éventuellement le sous-menu. Mais il ne faut pas utiliser l'élément nav pour chaque liste de 2 ou 3 liens .
  • Il n'y a pas encore de support pour l'élément <main>, mais role="main" est supporté. Il est utile d'ajouter role="main" au div qui englobe le contenu de la page. Cela permettra peut-être dans le futur de rendre superflu les liens 'aller au contenu'. Si vous utilisez HTML5, vous pouvez utiliser l'élément main à la place d'un div mais toujours en combinaison avec role="main": <main role="main">.
  • Il y a un bon support pour role="search". Ajoutez ceci au div qui contient le champ de recherche et le bouton correspondant. Il n'y a pas d'élément HTML correspondant. .
  • Il existe d'autres éléments sectionnants en HTML5, comme par exemple <section>, <article>, <header> et <footer>: certains lecteurs d'écran les annoncent, d'autres pas. Nous ne considérons pas ces éléments comme essentiels mais attirons votre attention sur le fait de les utiliser correctement si vous choisissez de les utiliser. Il ne faut par exemple pas abuser de l'élément section en le substituant à tous les div et les p. Gardez en mémoire les informations sur l'outline HTML5 fournies dans un article de blog précédent.
  • Il existe également d'autres rôles ARIA comme role="article", role="banner", role="region", role="complementary": Certains de ces rôles sont supportés par plusieurs lecteurs d'écran. Ici également il faut les utiliser avec modération.

(X)HTML ou HTML5?

Nous n'avons pas de préférence pour HTML4, XHTML ou HTML5. A partir du moment où vous utilisez un seul élément HTML5, les navigateurs interpréteront la page en entier comme HTML5. Si vous n'utilisez pas HTML5, vous pouvez toujours ajouter des rôles ARIA. C'est une bonne idée, si vous n'abusez pas. Si vous utilisez HTML5, nous vous encourageons à utiliser les éléments sectionnants correctement. Comme il n'y a encore que très peu de support de la part des lecteurs d'écran pour ces éléments, il faut les combiner aux rôles ARIA correspondants. Une page web pourrait ressembler à ceci:

capture d'écran annotée de la page web

Si vous n'utilisez pas le HTML5, alors vous pouvez conserver les rôles ARIA et remplacer les éléments nav, header, footer et aside par des div.

Le lecteur d'écran JAWS 14 lit ceci dans Internet Explorer 9:

Remarques

  • Tous les lecteurs d'écran ne se comportent pas de la même manière. Il y a des formulations (par les lecteurs d'écran) qui pourraient être améliorées, comme 'début de la région' pour une section. Certaines traductions, sont actuellement mauvaises et peuvent vraiment porter à confusion pour les utilisateurs. Par exemple en néerlandais une section est traduit par 'reeks' qui signifie 'série'
  • Les informations supplémentaires énoncées par les lecteurs d'écran pour chaque région sont utiles, mais peuvent devenir dérangeantes s'il y en a beaucoup.
  • Il est possible d'utiliser un raccourci clavier pour passer de région en région. De cette manière on parcourt bannière, recherche, navigation, région, région principale, région complémentaire et info contenu. Cela permet d'arriver à la navigation en appuyant trois fois d'affilée sur la touche de raccourci, et au contenu principal en 5 fois. On peut s'attendre à voir apparaître des raccourcis spécifiques pour atteindre la zone de recherche, la navigation et le contenu principal. Mais cela ne fonctionnera que si les éléments sectionnants et rôles ARIA sont correctement utilisés.

Seulement pour les lecteurs d'écran?

Le visiteur lambda ne remarquera pas que vous avez utilisé un élément nav ou des rôles ARIA dans le site. Les personnes qui en bénéficieront seront surtout les utilisateurs de lecteurs d'écran. Mais les personnes qui naviguent au clavier ont également besoin de pouvoir naviguer de manière efficace dans une page web. C'est extrêmement fastidieux de naviguer en tabulant de lien en lien sur un site qui comporte beaucoup de liens. Malheureusement les navigateurs n'ont encore rien prévu. Mais il y a une extension Firefox pour naviguer au clavier en utilisant les landmarks.

Comment tester?

L'extension Firefox mentionnée ci-dessus est un bon outil de test pour vérifier si les rôles ARIA et éléments sectionnants sont utilisés de manière logique. Lorsque Firebug est ouvert si vous naviguez de région en région avec le raccourci clavier, la ligne correspondante sera mise en surbrillance dans le code HTML. Vous pouvez donc vérifier si les rôles indiqués sont corrects et également si vous n'avez pas exagéré dans le nombre de régions utilisées. Si vous disposez d'un Mac, vous pouvez tester avec le lecteur d'écran VoiceOver. Si vous travaillez sous Windows, vous pouvez utiliser NVDA. Voir la page Outils de test.

Résultats des tests

Nous avons testé le support des rôles ARIA et éléments sectionnants dans 4 lecteurs d'écran: VoiceOver pour Mac, Supernova, NVDA et Jaws pour Windows. Les tests sur Windows ont eu lieu dans Internet Explorer 9. Nous examinons d'abord le support des rôles ARIA dans un site HTML4/XHTML, ensuite nous testons le support des éléments sectionnants HTML5 sans rôles ARIA , puis avec rôles ARIA.

HTML4 ou XHTML avec rôles ARIA
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<div role="banner"> Supporté Supporté Supporté Pas supporté Supporté Supporté
<div role="navigation"> Supporté Supporté Supporté Supporté Supporté Supporté
<div role="main"> Supporté Supporté Supporté Supporté Supporté Supporté
<div role="article"> Pas supporté Pas supporté Pas supporté Supporté Supporté Supporté
<div role="complementary"> Supporté Supporté Supporté Supporté Supporté Supporté
<div role="contentinfo"> Supporté Supporté Supporté Supporté Supporté Supporté
HTML5 sans rôles ARIA
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<header> Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté
<nav> Pas supporté Pas supporté Pas supporté Pas supporté Supporté Supporté
<main> Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté
<section> Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté Supporté
<article> Pas supporté Pas supporté Pas supporté Pas supporté Supporté Supporté
<aside> Pas supporté Supporté Pas supporté Pas supporté Pas supporté Supporté
<footer> Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté Pas supporté
HTML5 avec rôles ARIA
NVDA 2013.1.1, IE9 VoiceOver
OSX 10.8.4
SuperNova 13.03, IE9 JAWS11, IE8 JAWS13, IE9 JAWS14, IE9
<header role="banner"> Supporté Supporté Supporté Pas supporté Supporté Supporté
<nav role="navigation"> Supporté Supporté Supporté Supporté Supporté Supporté
<main role="main"> Supporté Supporté Supporté Supporté Supporté Supporté
<article role="article"> Pas supporté Pas supporté Pas supporté Supporté Supporté Supporté
<aside role="complementary"> Supporté Supporté Supporté Supporté Supporté Supporté
<footer role="contentinfo"> Supporté Supporté Supporté Supporté Supporté Supporté

Commentaires

Villain a écrit il y a 5 ans

Bonjour,

Merci pour cet article et la vague de tests.

Une petite précision cependant : il est généralement conseillé d'implémenter le rôle "search" plutôt sur le champ de saisie de la recherche que sur l'élément englobant form.

cela permet si une fonctionnalité est développé sur ce rôle de pouvoir interagir directement avec le composant.

C'est ce que l'on fait également lorsqu'on implémente un lien d'accès rapide à la recherche.

En tout cas merci pour le job !

JPV

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>