时间戳

首页 > 解决方案 > 将焦点转移到通过按钮单击添加的输入

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

问题描述

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

使用屏幕阅读器时，除非您使用 SHIFT + TAB 或屏幕阅读器控件向后导航，否则输入已添加并不是很明显。

我对是否应该将焦点转移到按钮单击上的输入（使用 JS）感到矛盾——这对于屏幕阅读器用户来说会更明显，但是如果你想多次单击“添加东西”以添加多个，这可能会很烦人一次输入。

我在 WCAG 指南或其他地方找不到任何可以涵盖这一点的内容。

任何可访问性专家都可以提供建议吗？我应该将焦点移到按钮单击时添加的输入吗？

标签： accessibilitywcagwcag2.0web-accessibility

解决方案

aria-live是你的朋友吗？

只需使用该属性向页面添加一个视觉隐藏的 div 。aria-live="polite"

然后，当您添加新行时，将文本更改为“新行 [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, 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>

推荐阅读