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

Question

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

我试过使用隐藏标签，但没有用。本来以为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

我发现在 JAWS 和其他屏幕 reader 中更容易理解，如果您在实际 <a> 标签中有唯一标识符并使用 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 属性。这里有一个 link 有关 aria-label 属性的更多信息。这将使屏幕 reader 知道编辑按钮的用途，您可以使用 @Html.ActionLink 方法：

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

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

Changing Edit | Details | Delete Action links to have alt text for 508 compliance readers

c#

asp.net-mvc

section508