c# - 更改编辑 |详情 |删除操作链接，为 508 位合规读者提供替代文本

Question

MVC @Html.ActionLink 编辑，如果您运行像 JAWS 这样的合规程序，只需说“编辑”视觉就可以了，但如果您作为视障人士进行查找。数以千计的“编辑”无法帮助您了解自己的位置。我需要合规程序说“编辑 CustomerX”，但将视觉空间缩小为“编辑”。删除和详细信息也是如此。

我试过使用隐藏标签，但没有用。本来以为titles可以的，结果没看到，看了一篇title属性不好的文章。仍在寻找更多关于此的论据。

不利于 508 搜索正常设置:

@Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) 

隐藏标签不起作用:

@Html.ActionLink("Edit", "Edit", new { id = item.CustomerID })
<label class="hidden">&nbsp @item.CustomerName &nbsp</label>

试图找出优点和缺点:@Html.ActionLink("Edit", "Edit", new { id = item.ApplicationID }, new{ title="Edit "+ item.CustomorName }) 不确定它的效果如何。

Answer 1

我发现，如果您在实际 <a> 中具有唯一标识符，则在 JAWS 和其他屏幕阅读器中更容易理解标记并使用 CSS 隐藏它。不幸的是，我们需要使用 @Url.Action而不是 @Html.ActionLink实现这一目标。

<a href="@Url.Action("Edit", "ControllerName")">Edit <span class="visual-hidden"> for @item.CustomorName</span></a>

和CSS:

.visual-hidden {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

另一个(更简单的)解决方案是使用 aria-label HTML 属性。这是有关 aria-label 的更多信息的链接属性。这将使屏幕阅读器知道编辑按钮的用途，您可以使用 @Html.ActionLink方法:

@Html.ActionLink("Edit", "Edit", new { id = item.ApplicationID }, new{ aria_label="Edit for " + item.CustomorName })