Aria-expanded for multi-level table cells

[miherlosev]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded page is not described how to use the aria-expanded attribute for multi-level horizontal (colspan > 1) and vertical (rowspan > 1) table cells.

There is the following table with rows and columns that can be expanded/collapsed.

On which element (expand/collapse button, table cell or table row) I should add the aria-expanded attribute?

What did you expect to see?

How to add the aria-expanded attribute for the multi-level table cells.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

[Shrinivassab]

@miherlosev Thanks again for the suggestion!

I have proposed an addition to enhance accessibility for table cells, particularly those with expandable content (using colspan or rowspan). Here's the preferred approach:

• If the cell contains a button: use aria-expanded on the <button> element along with aria-controls.

  <td><button aria-expanded="false" aria-controls="expanded-content">▼</button></td>

• If the entire <td> is clickable: apply role="button" directly on the <td>, along with aria-expanded and aria-controls.

Would this approach work for your use case? ---- Please share your thought...

[miherlosev]

I my case, the cell contains a button.
The <td><button aria-expanded="false">▼</button></td> approach looks good, but I cannot specify the aria-controls property.

Expanded markup:

<tr>
    <td rowspan="3">Europe</td>
    <td>1</td>
   ...
</tr>
<tr>
    <td>Spain</td>
    <td></td>
    ...
</tr>
<tr>
    <td>United Kingdom</td>
    <td></td>
    ...
</tr>

Collapsed markup:

<tr>
    <td colspan="2">Europe</td>
    <td>1</td>
    ...
</tr>