如何使可点击的可访问性？

Question

我有一张桌子。每个<tr>打开它下面的<tr>。 我怎样才能使用户可以访问？ 他可以知道<tr>是可点击的，并打开它下方的<tr>。

例如：

用户（使用屏幕阅读器）在点击时需要知道

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

打开

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

我知道可以在<button>和<a>上使用aria-expanded属性 https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

Answer 1

您使用数据表进行布局

这很费力。

Answer 2

＆＃13;

＆＃13;

"solutideWebMvc.Controllers"

＆＃13;

＆＃13;

＆＃13;

您可以使用<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内的任何其他元素和aria-label。

屏幕阅读器可以读取它。

Answer 3

您可以在表格行上使用data- attribute。

<tr tabindex="0" role=button data-bind="click: SelectOnClick, event: {keypress: SelectOnKeyup}">