屏幕阅读器不阅读基于单选按钮更改的文本

Question

我有两个不同的标题（例如标题 A 和标题 B），用于根据单选按钮的选择显示的单个表格。 我的屏幕阅读器正在阅读默认标题“标题 A”，但是当我使用 select 另一个选项时，它会显示文本，但无法读取标题“标题 B”。

下面是我正在尝试的代码：

$('#myTable').append("<caption class='cA'>Caption A</caption>");
$('#myTable').append("<caption class='cB hide'>Caption B</caption>");
$('input[type=radio]').change(function() {
 if(this.value == 'captionA') {
    $('.main-wrapper').find('.cB').addClass('hide');
    $('.main-wrapper').find('.cA').removeClass('hide');
 }
 else if(this.value == 'captionB'){
    $('.main-wrapper').find('.cA').addClass('hide');
    $('.main-wrapper').find('.cB').removeClass('hide');
 }
});

Output：

第一次：

您的标题 A 显示 10 个条目中的 1 到 10 个

在选择第二个选项时，它说：

表格显示 10 个条目中的 1 到 10 个

 $('#myTable').append("<caption class='cA'>Caption A</caption>"); $('#myTable').append("<caption class='cB hide'>Caption B</caption>"); $('input[type=radio]').change(function() { if(this.value == 'captionA') { $('.main-wrapper').find('.cB').addClass('hide'); $('.main-wrapper').find('.cA').removeClass('hide'); } else if(this.value == 'captionB'){ $('.main-wrapper').find('.cA').addClass('hide'); $('.main-wrapper').find('.cB').removeClass('hide'); } });

 .sr-only { position: absolute; top: -30em; } table.sortable td, table.sortable th { padding: 0.125em 0.25em; width: 8em; } table.sortable th { font-weight: bold; border-bottom: thin solid #888; position: relative; } table.sortable th.no-sort { padding-top: 0.35em; } table.sortable th:nth-child(5) { width: 10em; } table.sortable th button { position: absolute; padding: 4px; margin: 1px; font-size: 100%; font-weight: bold; background: transparent; border: none; display: inline; right: 0; left: 0; top: 0; bottom: 0; width: 100%; text-align: left; outline: none; cursor: pointer; } table.sortable th button span { position: absolute; right: 4px; } table.sortable th[aria-sort="descending"] span::after { content: "▼"; color: currentcolor; font-size: 100%; top: 0; } table.sortable th[aria-sort="ascending"] span::after { content: "▲"; color: currentcolor; font-size: 100%; top: 0; } table.show-unsorted-icon th:not([aria-sort]) button span::after { content: "♢"; color: currentcolor; font-size: 100%; position: relative; top: -3px; left: -4px; } table.sortable td.num { text-align: right; } table.sortable tbody tr:nth-child(odd) { background-color: #ddd; } /* Focus and hover styling */ table.sortable th button:focus, table.sortable th button:hover { padding: 2px; border: 2px solid currentcolor; background-color: #E5F4FF; } table.sortable th button:focus span, table.sortable th button:hover span { right: 2px; } table.sortable th:not([aria-sort]) button:focus span::after, table.sortable th:not([aria-sort]) button:hover span::after { content: "▼"; color: currentcolor; font-size: 100%; top: 0; }.hide{display: none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div class="table-wrap main-wrapper"> Sample test <a href="#">tttttt</a> <div role="radiogroup"> <label class="radio-inline"> <input name="test" type="radio" value="captionA" checked="checked">Opt A </label> <label class="radio-inline"> <input name="test" type="radio" value="captionB">opt B </label> </div> <table id="myTable" class="sortable"> <thead> <tr> <th> <button> First Name <span aria-hidden="true"></span> </button> </th> <th aria-sort="ascending"> <button> Last Name <span aria-hidden="true"></span> </button> </th> <th> <button> Company <span aria-hidden="true"></span> </button> </th> <th class="no-sort">Address</th> <th class="num"> <button> Favorite Number <span aria-hidden="true"></span> </button> </th> </tr> </thead> <tbody> <tr> <td>Fred</td> <td>Jackson</td> <td>Canary, Inc.</td> <td>123 Broad St.</td> <td class="num">56</td> </tr> <tr> <td>Sara</td> <td>James</td> <td>Cardinal, Inc.</td> <td>457 First St.</td> <td class="num">7</td> </tr> <tr> <td>Ralph</td> <td>Jefferson</td> <td>Robin, Inc.</td> <td>456 Main St.</td> <td class="num">513</td> </tr> <tr> <td>Nancy</td> <td>Jensen</td> <td>Eagle, Inc.</td> <td>2203 Logan Dr.</td> <td class="num">3.5</td> </tr> </tbody> </table></div>

根据条件，它会更改文本但不读取第二个标题。 我在这里错过了什么吗？

谢谢

Answer 1

因此，我一直在尝试重现该问题，似乎 Firefox 通过使用 Orca 和 NVDA 的辅助功能 API 正确地公开了更改的标题。

Chrome 和 Edge 不支持 NVDA。

该问题可能与被引用的元素交换为另一个（ <caption> ）有关。 更改用于计算可访问名称的 DOM 总是有点危险。

我发现也可以与 Chrome 和 Edge 一起使用的是另外将表格的aria-label设置为相同的内容。

 const table = document.querySelector('table'); const captions = document.querySelectorAll('caption'); document.querySelectorAll('input[type="radio"]').forEach(el => el.addEventListener('change', e => { captions.forEach(el => el.hidden = true); // stubbornly hide all first // then figure out which one to show const caption = document.querySelector('#caption-' + e.currentTarget.value); caption.hidden = false; table.setAttribute('aria-label', caption.textContent); }))

 <fieldset> <legend>Choose caption</legend> <label><input type="radio" name="caption" value="a" checked> Caption A</label> <label><input type="radio" name="caption" value="b"> Caption B</label> </fieldset> <table> <caption id="caption-a">Caption Alpha</caption> <caption id="caption-b" hidden>Caption Bravo</caption> <thead> <tr> <th> <button> First Name </button> </th> <th aria-sort="ascending"> <button> Last Name </button> </th> </tr> </thead> <tbody> <tr> <td>Fred</td> <td>Jackson</td> </tr> <tr> <td>Sara</td> <td>James</td> </tr> </tbody> </table>