辅助功能：2 个链接具有相同的文本和不同的 HREF

Question

在网络应用程序中，我有具有以下结构的事物列表：

如您所见，当我们列出项目（用户、角色或其他基本内容）时，我们在右侧有一些关联的操作，以黄色突出显示。在这种情况下，所有项目都有一个 Delete 选项。

但是，如果我运行 ADA 合规工具，我会收到一条警告：

Warn: Ensure that links that point to different HREFs use different link text.

解决此问题的正确方法是什么，因为所有 Delete link 显然都指向不同的 link（例如：javascript:Delete(123)）。我知道这只是一个我可以忽略的警告，但修复它可能会很好。

我不想将 link 文本更改为 Delete XYZ，因为它是多余的，而且它可能也不适合屏幕。

我正在使用 Firefox 的 Accessibility Evaluation Toolbar 进行测试。

编辑：使用屏幕 reader 时，Tab 键顺序为 Administrator、Delete、Advisor、Delete、Instructor , Delete, ... 因为这些项目也是 link，它们会将您带到每个项目的 details/edit。我不是可访问性方面的专家，但它看起来多余，因为它已经在每个 Delete.

之前阅读该项目

Answer 1

如果您不想在其中放置正确的文本标签，请仅在更具描述性的元素上使用屏幕阅读器class。

Bootstrap 有一个非常方便的小样式 .sr-only 您可以将您只希望屏幕阅读器看到的元素添加到样式表中：

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

只需将样式放在 'delete' div/span 的更详细版本上：

<div class="sr-only">Delete Administrator</div>

Answer 2

与 staypuftman 的建议类似，我也会使用 Bootstrap 的 .sr-only class 但我会将其分配给仅围绕额外单词的范围，以便您只能看到"Delete" 在按钮中，而可访问的隐藏文本在语义上是按钮的一部分，当按钮具有焦点时将被读取。

像这样：

<button type="button" id="deleteAdvisor">
    Delete
    <span class="sr-only"> Advisor</span>
</button>

辅助功能：2 个链接具有相同的文本和不同的 HREF

Accessibility: 2 links with same text and different HREF

html

javascript

accessibility

screen-readers