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

Hi,

The simplest and most effective way I’ve done this before is to simply add aria-expanded on the button element to convey when the sub-row is expanded or collapsed. Since it appears inline in the reading order, the intent has always been well received. I’ve experimented with adding aria-controls to convey what specifically is being controlled, but never noticed a difference one way or the other. Same too with aria-describedby, which is often overly verbose. Keeping it simple often works best from my experience, and it’s less likely to get screwed up.

All the best,

Bryan

 

From: Tangen, Michael (MNIT) <Michael.Tangen@state.mn.us> 
Sent: Friday, November 7, 2025 7:14 PM
To: W3C WAI ig <w3c-wai-ig@w3.org>
Subject: 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 |  <http://mn.gov/mnit> mn.gov/mnit