question about markup for a <table> with toggled rows with a detail view

Question for the community, probably a bit of an edge case.

I'm building a table that has your standard markup with rows of information contained within the usual <tbody> tag and everything that you'd expect for the markup.  But for each visible row, which is a short summary of table data, there'll be a control that would toggle the display of an additional detailed row of information.  I'd like to take advantage of the native <table> markup as possible, which is why I'm guessing that a secondary row of detailed information might simply be placed in the row that immediately follows, like this (for the sake of time, I'm only putting in the basic HTML):

....
<tr>
    <td>visible column 1</td>
    <td>visible column 2</td>
    <td><button --toggle-functionality-here--->view additional information</button></td>
<tr style="display: none;" aria-hidden="true">
    <td colspan="3">
        Detailed information here
    </td>
</tr>
---

I'm aware of all the markup that's required for toggle functionality and am not asking about that.  What I am asking about is regarding what markup is essential to ensure that semantically the visible row and the detailed (hidden) row are connected together.  Namely, should I be placing an ID attribute in the first <tr> tag, and in the second tag adding in an aria-labeledby="" attribute, referencing the preceding row?  Or is there a better way of going about this?  I want to make sure that those with visual impairments will instinctively know that the hidden detail row is tied to its preceding visible row.

If you need clarifying information, please don't hesitate to ask.

Warmest regards,
Michael



Michael Tangen

Sr. Interface Designer & Developer  |  Application Development for Web/mn.gov


Minnesota IT Services | Partners in Performance

Information Technology for Minnesota Government | mn.gov/mnit<http://mn.gov/mnit>




[cid:3b85cb54-7f72-4bec-b665-87800a6f1c11]