html - 如何使可点击可访问？

Question

我有一张桌子，每个人都<tr>打开它<tr>下面的桌子。如何让用户可以访问它，以便他们知道它<tr>是可点击的并打开它<tr>下面的？

例子：

<table>
    <thead>
        <tr>
            <th>bla1</th>
            <th>bla2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="infoBlock" data-id="t1">
            <td></td>
            <td></td>
        </tr>
        <tr class="detailsBlock" data-id="t1">
            <td></td>
            <td></td>
        </tr>
        <tr class="infoBlock" data-id="t2">
            <td></td>
            <td></td>
        </tr>
        <tr class="detailsBlock" data-id="t2">
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

用户（使用屏幕阅读器）需要知道，当他们点击

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

它打开

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

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

Answer 1

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

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