Table DIV accessible

Question

https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html

Je suis l'exemple fourni par le W3C pour créer un tableau DIV accessible. J'ai ajouté les balises et attributs de rôle appropriés.

Le fait d'envelopper certaines cellules dans un div va-t-il nuire à l'accessibilité du tableau ?

Par exemple : Notez où le div avec "testClass" est placé.

<div role="table"
 aria-label="Students"
 aria-describedby="students_table_desc">
<div id="students_table_desc">
  Students currently enrolled in WAI-ARIA 101 for the coming semester
</div>
<div role="rowgroup">
  <div role="row">
    <span role="columnheader">
      First Name
    </span>
    <span role="columnheader">
      Last Name
    </span>
    <span role="columnheader">
      Company
    </span>
    <span role="columnheader">
      Address
    </span>
  </div>
</div>
<div role="rowgroup">
  <div role="row">
    <span role="cell">
      Fred
    </span>
    <div class="testClass">
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
    </div>
    <span role="cell">
      123 Broad St.
    </span>
  </div>
  <div role="row">
    <span role="cell">
      Sara
    </span>
    <span role="cell">
      James
    </span>
    <span role="cell">
      Acme, Inc.
    </span>
    <span role="cell">
      123 Broad St.
    </span>
  </div>

</div>

Answer 1

J'ai déjà utilisé des tableaux ARIA et, bien que je préfère utiliser des tableaux natifs, je ne suis pas sûr que ce soit le cas. <table> l'utilisation des rôles de table appropriés fonctionne très bien, à condition qu'ils soient tous spécifiés ( table , rowheader , columnheader , row , cell ). comme le fait votre exemple. Le fait que vous ayez des cellules enveloppées dans une balise <div> pour le style ne fait aucune différence. Puisque votre testClass <div> n'a pas de rôle, il sera ignoré par le lecteur d'écran.

Ce qui est bien avec les rôles de tableau ARIA, c'est que les lecteurs d'écran les traitent comme de vrais tableaux, de sorte que ctrl + alt + arrow keys fonctionnent lors de la navigation dans le tableau.

Notez que NVDA sur IE (actuellement) ne supporte pas l'option table o grid mais il fonctionne sur les combinaisons courantes de technologies d'assistance et de navigateurs telles que :

• NVDA + Firefox
• JAWS + IE/Firefox/Chrome
• VoiceOver sur iOS

Nota : NVDA + Chrome ne prend pas en charge le table mais il prend en charge le rôle de grid rôle.
NVDA + IE ne prend en charge aucun des deux rôles.

Note2 : El grid doit être utilisé lorsque les cellules du tableau sont interactives (comme dans une feuille de calcul). Le site table doit être utilisé lorsque les cellules du tableau sont statiques.

Answer 2

Non, il ne se cassera pas. Je ne pense pas qu'il se cassera. Je pense que ça marchera très bien.

Answer 3

L'utilisation de divs (et de spans) ne donne pas aux lecteurs d'écran la possibilité d'indexer le contenu de valeur, de sorte qu'il sera ignoré et que le SR lira le texte. Il n'y aura donc pas de rupture.

Pourquoi pas une table sémantique ?

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML