时间戳

首页 > 解决方案 > 更改编辑 | 详情 | 删除操作链接，为 508 位合规性读者提供替代文本

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

问题描述

MVC @Html.ActionLinkEdit，如果您运行像 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 })虽然不确定这有多好。

标签： c#asp.net-mvcsection508

解决方案

我发现如果您在实际<a>标签中有唯一标识符并使​​用 CSS 隐藏它，那么在 JAWS 和其他屏幕阅读器中更容易理解。不幸的是，我们需要使用@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-labelHTML 属性。aria-label这是有关该属性的更多信息的链接。这将使屏幕阅读器知道编辑按钮的用途，您可以使用以下@Html.ActionLink方法：

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

推荐阅读