Table with visually hidden heading row does not announce headings via VoiceOver
Categories
(Core :: Disability Access APIs, defect)
Tracking
()
People
(Reporter: web, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:83.0) Gecko/20100101 Firefox/83.0
Steps to reproduce:
Consider this code pen:
https://codepen.io/bennyp/pen/ZEOmgMZ
<template id="table-tpl">
<table>
<thead>
<tr part="column-headings">
<th part="column name first">Name</th>
<th part="column city">City</th>
<th part="column countryCode">Country</th>
<th part="column carbonFootprint last">TCO₂ (all-time)</th>
</tr>
</thead>
<tbody>
<tr class="row" data-id="site-m002">
<td part="cell data name site-m002 first">
<span>ABCD-D (UK)</span>
</td>
<td part="cell data city site-m002">London</td>
<td part="cell data countryCode site-m002">🇬🇧</td>
<td part="cell data carbonFootprint site-m002 last">12,828</td>
</tr>
<tr class="row" data-id="site-m001">
<td part="cell data name site-m001 first">
<span>ABCD-B (UK)</span>
</td>
<td part="cell data city site-m001">London</td>
<td part="cell data countryCode site-m001">🇬🇧</td>
<td part="cell data carbonFootprint site-m001 last">0</td>
</tr>
</tbody>
</table>
</template>
<main>
<section id="light">
<h2>Example: Light DOM with normal headings</h2>
</section>
<section id="hidden">
<h2>Example: Light DOM with visually headings</h2>
</section>
<section id="shadow">
<h2>Example: Shadow DOM with visually hidden headings</h2>
<shadow-table></shadow-table>
</section>
<style>
/* a11y hack */
#hidden [part="column-headings"],
shadow-table::part(column-headings) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
<script>
document.getElementById('light')
.append(document.getElementById('table-tpl').content.cloneNode(true));
document.getElementById('hidden')
.append(document.getElementById('table-tpl').content.cloneNode(true));
customElements.define('shadow-table', class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }).append(document.getElementById('table-tpl').content.cloneNode(true));
}
});
</script>
Actual results:
When navigating the table, VoiceOver announces the table headings row for Example 1, but skips over the (visually hidden) table headings in examples 2 and 3
Expected results:
VoiceOver should have announced the visually hidden table headings in all three examples, and this is the behaviour in Chrome, although Safari exhibits the same behaviour as FireFox
Comment 1•3 years ago
|
||
A few things here, I Was able to reproduce this issue easily in Nightly using the Voice Over on MacOS but in Beta 83 I was only able to select that table by accident where I noticed that the issue occurs there as well but for Release I just cant reach those tables or select them with any commands, Im not sure how I should update the flag for the Release version.
I was also using NVDA on Windows but that only works If I move my mouse cursor over any visible text, any hidden headings would not work on Windows.
If someone can provide a test page with a table that has hidden titles and can be reached in Release and Beta , I would be more than happy to test there as well.
Comment 2•3 years ago
|
||
Jamie, quick analysis shows that NVDA is theoretically able to traverse all three tables in full sequentially using the virtual cursor, but when using table navigation commands, there is no way to get from row 2 up to row 1. Also, when traversing columns using table navigation commands in examples 2 and 3, the column headers are not read.
This is a more general problem than just Mac, so setting operating system to all. The column header accessibles are there, and they have text leaves, but no names.
Comment 3•3 years ago
|
||
The table rows end up with display: block because they're being repositioned, so we probably use ARIARowAccessible and ARIAGridCellAccessible internally. ARIA Table accessibles and HTML table accessibles don't play together nicely, thus the breakage. Unfortunately, I think we're only going to see more and more of this kind of breakage going forward... and I think the only fix is to stop relying on layout for HTML tables and converge on a single implementation done purely in the a11y engine.
Comment 4•11 months ago
|
||
This is resolved by Cache the World, which is enabled by default in Firefox 113.
Comment 5•11 months ago
|
||
This issue is Verified as fixed in our latest Release, Beta and Nightly Builds.
Updated•11 months ago
|
Description
•