How to make clickable <tr> accessible?

Viewed 1712

I have a table where every <tr> opens the <tr> below it. How can I make it accessible to the user so that they can know the <tr> is clickable and will open the <tr> below it?

Example:

<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>

The user (who uses a screen reader) needs to know that when they click

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

it opens

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

I know that the aria-expanded attribute can be used on <button> and <a>. https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions

1 Answers

You can use the data- attribute on table row.

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