将焦点转移到通过单击按钮添加的输入

Question

我在表单输入列表下有一个按钮“添加内容”。当您单击按钮时，它会在列表底部的按钮上方添加另一个输入。

使用屏幕 reader 时，输入已添加不会立即显而易见，除非您使用 SHIFT + TAB 或屏幕 reader 控件向后导航。

我对是否应该将焦点转移到单击按钮时的输入（使用 JS）感到矛盾 - 这会让屏幕 reader 用户更加明显，但是如果你想单击它可能会很烦人多次“添加事物”以一次添加多个输入。

我在 WCAG 指南或其他地方找不到任何内容涵盖此内容。

有无障碍专家可以提供建议吗？我应该将焦点移到单击按钮时添加的输入吗？

Answer 1

aria-live 是你的朋友。

只需将 div 添加到具有 aria-live="polite" 属性的页面即可。

然后，当您添加新行时，将文本更改为“新行 [rowNumber] 添加到前一 table 的底部”或类似内容。

我们需要插入 rowNumber 的原因是因为 aria-live 仅当其中的文本发生变化时才会通知。它还有一个额外的小好处，它可以让使用屏幕 reader 的人想要添加 10 行知道他们所在的行号，这样他们就可以保持跟踪，而不必继续返回 table.

显然，如果这不是 table，那么请确保有某种方法可以识别添加的“行”数，例如使用有序或无序列表。

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, 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>

将焦点转移到通过单击按钮添加的输入

Shifting focus to input added by button click

accessibility

wcag

wcag2.0

web-accessibility