web-dev-qa-db-fra.com

Pourquoi les onglets Bootstrap ont role = "presentation"?

Je travaille sur un système de conception qui s'étend du cadre Bootstrap. L'un des objectifs clés est l'accessibilité. Lors de la mise en œuvre des onglets Bootstrap, je vois qu'ils s'appliquent) role="presentation" aux éléments de la liste dans leur liste de navigation.

J'ai donc rassemblé un petit morceau de HTML de test à partir du modèle Bootstrap:

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

La spécification ARIA indique que la présentation est un rôle pour lequel:

L'utilisation prévue est lorsqu'un élément est utilisé pour changer l'apparence de la page mais n'a pas toute la pertinence fonctionnelle, interactive ou structurelle impliquée par le type d'élément,

Il me semble que le <li> les éléments ont une pertinence structurelle pour une personne utilisant un dispositif d'accessibilité car ils vous indiquent le nombre d'onglets présents. Si vous deviez découvrir, par exemple, que le troisième onglet contenait les informations qui vous intéressaient, naviguer dans la liste et savoir qu'il y a trois onglets vous permettrait d'accéder plus rapidement à ce que vous voulez.

De plus, lorsque vous accédez à ce test HTML avec ChromeVox, les listes sont annoncées de manière identique. Il semble donc que le role n'ait aucun effet pratique.

J'ai googlé cette question, mais je n'ai trouvé aucune discussion à ce sujet. Alors, quelqu'un sait-il pourquoi cela fait partie du cadre Bootstrap?

twitter-bootstrapaccessibilitywai-aria
22
theJBRU

Voir l'écriture sur les onglets accessibles par Marco à https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/

Sa mise en œuvre a role="presentation" sur le li pour indiquer "que le lecteur d'écran doit ignorer les éléments de la liste eux-mêmes", puis ajoute le rôle "tab" sur les liens "mappant les rôles au type d'élément reconnaissable du lecteur d'écran prévu".

Un point soulevé dans un problème du projet d'accessibilité bootstrap ( https://github.com/Paypal/bootstrap-accessibility-plugin/issues/59 ) est que les onglets (corrects ou incorrects) sont assez couramment utilisés comme navigation, il serait donc inapproprié de toujours inclure les rôles tablist et tab.

BTW notre travail n'est pas facilité par le fait que les combinaisons individuelles de lecteurs d'écran et de navigateurs ne prennent pas en charge cela de la même manière. (Voir cet article pour un compte rendu à ce sujet: http://john.foliot.ca/aria-hidden/ )

7
peater

C'est principalement à des fins d'accessibilité. http://john.foliot.ca/aria-hidden/ . Vous pouvez supprimer ou modifier le "rôle"

2
user2557504