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

Question

在Web应用程序中，我列出了具有以下结构的东西：

正如您所看到的，当我们列出项目（用户，角色或任何基本内容）时，我们在右侧有一些相关的操作，以黄色突出显示。在这种情况下，所有项目都有Delete选项。

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

  

警告：确保指向不同HREF的链接使用不同的链接   链接文字。

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

我不想将链接文本更改为Delete XYZ，因为它会多余，也可能不适合屏幕。

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

修改：使用屏幕阅读器时，标签顺序为Administrator，Delete，Advisor，Delete，Instructor，Delete ，...因为这些项目也是链接，带您进入每个项目的详细信息/编辑。我不是可访问性专家，但它看起来多余，因为它已经在每个Delete之前阅读了该项目。

Answer 1

如果您不想放入正确的文字标签，请在更具描述性的元素上使用仅限屏幕阅读器的课程。

https://github.com/nuxeo/nuxeo-drive/blob/master/nuxeo-drive-client/nxdrive/data/ui5/js/ndrive-settings.js有一个非常方便的小样式.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类，但是我会将它分配给仅包含额外单词的范围，这样您只能在按钮中看到“删除”而可访问隐藏文本是按钮具有语义，当按钮具有焦点时将被读取。

像这样：

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