클릭 할 방법 <tr> 접근성?

Question

테이블이 있습니다. 모든 <tr>은 그 아래에 <tr>을 엽니 다. 어떻게 사용자에게 접근성을 높일 수 있습니까? 그는 <tr>을 알 수 있으며 그 아래에있는 <tr>을 클릭하여 열 수 있습니다.

예 :

사용자 (사람 스크린 리더를 사용) 그가

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

가 열려

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

내가 그 아리아를 알고 클릭하면 것을 알 필요가 -expanded 속성은 <button> 및에서 사용할 수 있습니다. https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

Answer 1

하신 힘들게 액세스 할 것 레이아웃 목적

이에 대한 데이터 테이블을 사용.

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>

당신은 label 또는 아리아 - 레이블 td 내부의 다른 요소를 사용할 수 있습니다.

화면 판독기에서 읽을 수 있습니다.