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- attribute在表格行上。

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