A quoi sert spécifiquement ce rôle et comment l’utiliser ?

Ce que j’ai fait :

• lire l’article role=”presentation” #AdvisoryTechnique(lien externe) de Atalan
• lire l’article Know your ARIA: ‘Hidden’ vs ‘None’(lien externe) de Scott Ohara
• lire l’article WAI-ARIA: Role=Presentation(lien externe) de Digital a11y

Ce que j’ai appris

Supprimer la valeur sémantique avec role="presentation"

Définition

Bien que ARIA soit principalement utilisé pour ajouter ou modifier une valeur sémantique, il existe également certaines situations où masquer la sémantique d’un élément aux technologies d’assistance est utile.

Pour cela, il faut utiliser role="presentation" : ce rôle définit des élements utilisés uniquement à des fins de présentation. Le rôle ARIA natif de l’élément ainsi que ses états et propriétés ARIA associés - en somme tout ce qui constitue sa valeur sémantique - ne sont donc plus exposés à l’arbre d’accessibilité, tandis que le contenu présent à l’intérieur de cet élément reste exposé.

Prenons le code suivant :

<h1 role="presentation">La blanquette est bonne.</h1>

<span>La blanquette est bonne.</span>

Pour un lecteur d’écran, les deux éléments présentés ont une sémantique de rôle identique (c’est-à-dire aucun rôle) et un contenu identique.

Exemples

• on peut utiliser role="presentation" sur la balise <table> si le tableau est utilisé uniquement à des fins de présentation et de mise en page.

• quand on souhaite baliser de manière appropriée un composant d’interface sans recourir à Javascript et en suivant les règles ARIA. Par exemple, pour créer un système d’onglets :

  <ul role="tablist">
    <li role="presentation">
      <a role="tab" href="#">Tab 1</a>
    </li>
    <li role="presentation">
      <a role="tab" href="#">Tab 2</a>
    </li>
  </ul>
  

L’élément <ul> étant déclaré avec un rôle tablist, ses éléments enfants <li> ne se trouvent plus dans un contexte de liste. Le role="presentation" permet de supprimer la sémantique native du <li> et d’exposer les onglets dans l’arbre d’accessibilité dans le format attendu pour des éléments descendants d’un role="tablist".

Le synonme role="none"

Dans ARIA 1.1, role="none" a été introduit comme synonyme de role="presentation". En effet, le terme “presentation” paraissait ambigu pour de nombreuses personnes : elles considéraient à tort role="presentation" comme un synonyme de aria-hidden="true". Pour les auteurs de la version 1.1 d’ARIA, role="none" permet de lever toute ambiguïté. Jusqu’à ce que le support de role="none" soit optimal, il est conseillé d’utiliser role="presentation" ou role="none presentation".

Héritage de role="presentation"

Règle générale

Lorsque role="presentation" est appliqué à un élément, les rôles, états et propriétés de chaque élément descendant demeurent visibles aux tehnologies d’assistance : role="presentation" n’est donc pas hérité par les éléments descendants.

Toutefois, il existe deux exceptions.

Elements HTML appliquant automatiquement le role="presentation" à leurs descendants

L’usage de certains éléments HTML n’est considéré valide que si certains éléments enfants sont présents. Par exemple :

• les éléments <table> fonctionnent avec des éléments enfants <tr> qui requièrent eux-mêmes la présence d’éléments enfants <td>

• les éléments de liste <ul> fonctionnent avec les éléments enfants <li>

Dans ces cas précis, le role="presentation" ajouté à un élément parent s’applique également aux éléments descendants.

Prenons le code suivant :

<ul role="presentation">
  <li>Nom</li>
  <li>Prénom</li>
  <li>Date de naissance</li>
</ul>

Du point de vue d’une technologie d’assistance, ce code est équivalent au code suivant :

<div role="presentation">
  <div>Nom</div>
  <div>Prénom</div>
  <div>Date de naissance</div>
</div>

role="presentation" est appliqué à l’élément parent <ul>, pour autant ses éléments enfants <li> en héritent également : ils ne sont donc plus exposés aux technologies d’assistance. En revanche, les éléments situés à l’intérieur des balises <li> le sont. Ici, il s’agit uniquement de texte, mais on pourrait également trouver une autre liste imbriquée.

Rôles appliquant automatiquement le role="presentation" à leurs descendants

Il existe certains types de composants d’interface utilisateur qui, lorsqu’ils sont exposés à une API d’accessibilité, ne peuvent contenir que du texte. Par exemple, les API d’accessibilité ne sont pas capables de représenter les éléments sémantiques contenus dans un bouton. Pour faire face à cette limitation, les navigateurs appliquent automatiquement un role="presentation" à tous les éléments descendants de tout élément dont le rôle ne peut pas prendre en charge d’enfants sémantiques.

C’est le cas par exemple des rôles button, progressbar ou checkbox.

Vous pouvez retrouver la liste des rôles concernés sur le chapitre Roles That Automatically Hide Semantics by Making Their Descendants Presentational(lien externe).

Situations dans lesquelles role="presentation" est ignoré

Dans certaines situations, role="presentation" peut n’avoir aucun effet :

• l’élément peut recevoir le focus, soit nativement (comme un lien ou un élément <input>), soit grâce à l’ajout d’un attribut tabindex

• l’élément possède un état ou proprété ARIA global(lien externe) comme aria-describedby ou aria-label.

Ne pas confondre avec aria-hidden="true"

role="presentation" ne doit pas être confondu avec aria-hidden="true".

Appliqué à un élément, aria-hidden ="true" a pour effet de supprimer complètement cet élément, ses éléments enfants et contenus de l’abre d’accessibilité, quelle que soit la nature sémantique par défaut. Ils resteront supprimés jusqu’à ce que l’état aria-hidden soit changé en false.

aria-hidden="true" permet donc de masquer un élément et son contenu aux technologies d’assistance, mais cet élément restera visible pour les internautes n’ayant pas recours à ce type d’aide. Pour dissimuler un élément et son contenu à tout le monde, il faut utiliser des propriétés du type display: none; ou visibility: hidden.