Comment rendre l'accessibilité <tr> cliquable?

Question

J'ai une table. que chaque <tr> ouvre le <tr> ci-dessous. Comment puis-je rendre l'accessibilité à l'utilisateur? Qu'il peut savoir le <tr> est cliquable et ouvre le <tr> ci-dessous.

Ex:

L'utilisateur (qui utilisent un lecteur d'écran) doivent savoir que quand il clique

<tr class="infoBlock" data-id="t1"> 

ouvert

<tr class="detailsBlock" data-id="t1"> 

Je sais que aria -expanded attribut peut être utilisé sur <button> et <a> https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

Answer 1

Votre aide d'une table de données pour la mise en page afin

Ce serait laborieusement accessible.

Answer 2

<table> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col">bla1</th> 
 
     <th scope="col">bla2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="infoBlock"> 
 
     <td scope="row" aria-label="Click to expand 1"><label aria-label="Click to expand">Hello</label></td> 
 
     <td scope="row" aria-label="Click to expand 2"><label aria-label="Click to expand">Boss</label></td> 
 
    </tr> 
 
    <tr class="detailsBlock"> 
 
     <td scope="row"> Hey</td> 
 
     <td scope="row"> Bro</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Vous pouvez utiliser label ou tout autre élément à l'intérieur du td avec label aria.

il peut être lu par le lecteur d'écran.