ARIA : rôle presentation

Description

Bien que l'ARIA soit principalement utilisée pour exprimer des sémantiques, il existe certaines situations où il est utile de masquer les sémantiques d'un élément aux technologies d'assistance. Cela se fait avec le rôle presentation ou son synonyme none, qui déclarent qu'un élément est utilisé uniquement pour la présentation et n'a donc pas de sémantiques d'accessibilité.

Écrire <h2 role="presentation">Les Licornes sont gentilles</h2> supprime les sémantiques de titre de l'élément h2, le rendant équivalent à <div>Les Licornes sont gentilles</div>. Les sémantiques de rôle de titre sont supprimées, mais le contenu lui-même est toujours disponible.

Lorsque un élément a des descendants requis, comme les différents éléments <table>, et les enfants <li> d'un <ul> ou <ol>, le rôle presentation ou none appliqué à la table ou à la liste supprime les sémantiques par défaut de l'élément sur lequel il a été appliqué et de leurs éléments descendants requis.

Si presentation ou none est appliqué à un élément <table>, les éléments descendants <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, et <td> héritent du rôle et ne sont donc pas exposés aux technologies d'assistance. Mais, les éléments à l'intérieur des éléments <th> et <td> , y compris les tables imbriquées, sont exposés aux technologies d'assistance.

<ul role="presentation">
  <li>
    <a href="#">Lien 1</a>
  </li>
  <li>
    <a href="#">Lien 2</a>
  </li>
  <li>
    <a href="#">Lien 3</a>
  </li>
</ul>

Parce que le rôle presentation a été appliqué à l'élément <ul>, chaque élément enfant <li> hérite du rôle presentation. Cela est dû au fait que l'ARIA exige que les éléments listitem aient un élément list parent. Bien que les éléments <li> ne soient pas exposés aux technologies d'assistance, les descendants de ces éléments requis le sont. Si nous avions imbriqué une liste dans l'un de ces <li> , elle serait visible pour les technologies d'assistance. Pour les éléments sans enfants requis, tous les éléments imbriqués à l'intérieur de l'élément avec role="presentation" ou role="none" conservent leur sémantique. Dans ce cas, les éléments <a> contenus à l'intérieur de ces éléments <li> sont exposés.

L'élément <a> est un cas particulier. Son rôle aurait été exposé même s'il avait le rôle presentation ou none directement appliqué. Les navigateurs ignorent role="presentation" et role="none" sur les éléments focusables, y compris les liens et les entrées, ou tout élément avec un attribut tabindex défini. Les navigateurs ignorent également l'inclusion du rôle si l'un des éléments contient des états et propriétés ARIA globaux, tels que aria-describedby.

Propriétés, états et rôles WAI-ARIA associés

Aucun. Si un état et une propriété ARIA globaux sont définis, presentation ou none seront ignorés, et le rôle implicite de l'élément sera utilisé.

Exemples

<hr role="none" />

Spécifications

Voir aussi

• aria-hidden contre role="presentation/none" — par Scott O'Hara