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

问题描述

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

在使用屏幕阅读器时，除非您使用 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>