[英]Screen reader not reading the text based on radio button changes
I have two different captions (say Caption A and Caption B) for a single table that display based on the selection of the radio buttons.我有两个不同的标题(例如标题 A 和标题 B),用于根据单选按钮的选择显示的单个表格。 My screen reader is reading the default caption 'Caption A', but when I select the other option, it displays the text but fails in reading that caption 'Caption B'.我的屏幕阅读器正在阅读默认标题“标题 A”,但是当我使用 select 另一个选项时,它会显示文本,但无法读取标题“标题 B”。
Below is the code I am trying:下面是我正在尝试的代码:
$('#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: Output:
First time:第一次:
Your Caption A Showing 1 to 10 of 10 entries您的标题 A 显示 10 个条目中的 1 到 10 个
While selecting the second option, it says:在选择第二个选项时,它说:
table Showing 1 to 10 of 10 entries表格显示 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>
Based on the condition, it changes the text but does not read the second caption.根据条件,它会更改文本但不读取第二个标题。 Am I missing anything here?我在这里错过了什么吗?
Thanks谢谢
So I've been trying to reproduce the issue, and it seems that Firefox correctly exposes the changed caption through the accessibility API, both with Orca and NVDA.因此,我一直在尝试重现该问题,似乎 Firefox 通过使用 Orca 和 NVDA 的辅助功能 API 正确地公开了更改的标题。
Chrome and Edge don't, with NVDA. Chrome 和 Edge 不支持 NVDA。
The issue might be related to a referenced element being exchanged for another ( <caption>
).该问题可能与被引用的元素交换为另一个( <caption>
)有关。 Changing DOM which is used to calculate accessible names is always a bit dangerous.更改用于计算可访问名称的 DOM 总是有点危险。
What I found to work also with Chrome and Edge was to additionally set the aria-label
of the table to the same contents.我发现也可以与 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.