如何解决将焦点转移到按钮点击添加的输入
我在表单输入列表下有一个按钮“添加内容”。当您单击按钮时,它会在按钮上方、列表底部添加另一个输入。
在使用屏幕阅读器时,除非您使用 SHIFT + TAB 或屏幕阅读器控件向后导航,否则不会立即明显添加输入。
我对是否应该在单击按钮时将焦点转移到输入上(使用 JS)感到矛盾 - 这会让屏幕阅读器用户更明显,但是如果您想多次单击“添加内容”可能会很烦人一次添加多个输入。
我在 WCAG 指南或其他地方找不到任何可以涵盖这一点的内容。
是否有无障碍专家可以提供建议?我应该在点击按钮时将焦点移到添加的输入上吗?
解决方法
aria-live
是您的朋友。
只需使用 aria-live="polite"
属性向页面添加一个 visually hidden div。
然后,当您添加新行时,将文本更改为“新行 [rowNumber] 添加到上一个表格的底部”或类似内容。
我们需要插入 rowNumber 的原因是因为 aria-live
只通知其中的文本是否发生变化。它还有一个额外的小好处,它让使用屏幕阅读器的人想要添加 10 行,知道他们所在的行号,这样他们就可以跟踪,而不必一直回到表格中。
显然,如果这不是表格,那么请确保有某种方法可以识别添加的“行”数,例如使用有序或无序列表。
var btn = document.querySelector("button");
var announcer = document.querySelector("div");
btn.addEventListener("click",addRow);
var rowNumber = 1;
function addRow(){
rowNumber++;
announcer.innerHTML = "new row " + rowNumber + " added to bottom of previous table";
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6,IE7 - a 0 height clip,off to the bottom right of the visible 1px box */
clip: rect(1px,1px,1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers,clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<button class="add-new-row">Add Row</button>
<div class="visually-hidden" aria-live="polite"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。