Question

我正在从事WCAG合规工作，我需要修复＆＃34;清空链接＆＃34;错误。

这是提供错误的其中一个元素的示例：

<a style="bottom: 0px; left: 7px; width: 25px; cursor: default;" class="histogram_bar_link" title="Less than 2,016 (0)" href="#"
    onclick="AjaxControlToolkit.SliderRefinementControl.FindAndSetSliderHandlesAndValuesToRange(" ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5
    ", 0, 1, this); return false;" activebarid="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" disabled="disabled">
    <div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramBgBar0" class="histogram_bar_background">
        <div id="ctl00_ctl43_g_453d6d26_9535_440a_ba72_b7b88de22f31_csr5_HistogramActiveBar0" class="histogram_bar_active" style="height: 0px; margin-top: 50px;">
    </div>
</a>

我需要找到这个元素和其他不包含文本的锚标记，所以我可以通过JS

来修复它们

Answer 1

这不是链接。不要尝试修复客户端，只需更正HTML。理想情况下，如果您更新任何控件生成该HTML，那么您不需要依赖客户端脚本。

1。选择正确的控制

让我们使用正确的元素解决第一个问题...

控件是否将我带到另一页？使用锚点

如果，当点击，点击或通过键盘或语音激活（或在此处插入新颖的互动方法）时，用户将被带到另一个URL（包括同一页面上的锚点），然后使用<a href="[URL]">。确保使用href属性并且它具有真实的URL，而不是“＃”（否则您可能依赖于JavaScript，这对于超链接来说根本不是必需的）。如果href只指向“＃”，那么你可能做错了。如果它指向一个命名锚点作为渐进增强工作的一部分，那么这是完全有效的。

控件是否在当前页面上改变了某些内容？使用按钮

如果，在激活时，用户不会从页面移动（或移动到页面中的锚点），而是显示新视图（消息框，布局更改等），然后使用{ {3}}。虽然您可以使用<input type="button">，但您更有可能与预先存在的样式和后续开发人员（例如我）发生冲突。

控制提交表单字段？使用提交

如果在激活时，用户输入的信息（通过手动输入或通过选择屏幕上的项目）将被发送回服务器，然后使用<button>。这最好住在<form>。如果您需要更多样式控件或不仅仅需要嵌入简单的文本字符串，请改用<button type="submit">。我倾向于选择<input type="submit">，因为我发现它与开发人员之间的冲突（精神上和风格上）都较少。

键盘用户注意事项

想一想键盘用户。按Enter键可以触发超链接。但是按下回车键或空格键可以触发真正的按钮。当超链接具有焦点并且用户按下空格键时，该页面将滚动一个屏幕。如果没有更多要滚动，那么用户只会遇到任何事情。给定一组看起来相同的界面元素，如果某些界面元素使用空格键而某些界面元素没有，那么您不能指望用户对页面的行为有信心。

我有一个CodePen演示，其中显示了这一点：<input type="submit">

我认为值得一提的是，空格键触发的事件仅在释放键时触发，而使用Enter键会在您按下键时（在释放键之前）立即触发事件。

供参考：http://s.codepen.io/aardrian/debug/PZQJyd

2。给它一个可访问的名称

现在让我们谈谈如何在该按钮中获取可访问的名称。我假设你不希望它在视觉上被看到。在这种情况下，给它一个visually-hidden类并应用这些样式：

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

这将允许屏幕阅读器阅读。这也意味着你可以（并且应该）http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html。

3。结合它

现在控制并相应地调整它：

<button style="…" class="histogram_bar_link" onclick="…" disabled="disabled">
  <span class="visually-hidden">Less than 2,016 (0)</span>
  <div id="…" class="histogram_bar_background">
    <div id="…" class="histogram_bar_active" style="…"></div>
  </div>
</button>

我已将其转换为<button>，并通过插入<span> visually-hidden类来为其提供可访问的名称，以便将其隐藏起来。

如何找到没有文字的链接？

1 个答案: