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

【问题标题】：How do I find links with no text?如何找到没有文字的链接？
【发布时间】：2017-05-04 17:17:35
【问题描述】：

我正在处理 WCAG 合规性问题，我需要修复“空链接”错误。

这是提供错误的元素之一的示例：

<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 修复它们

【问题讨论】：

&nbsp 如何比"" 更能帮助盲人？我不确定你是否考虑过这一点。
你说得对，我实际上更多的是考虑消除错误而不是实际解决问题。但是，如果我在那里插入文本，它会完全破坏滑块，那么对于这种情况，推荐的解决方案是什么？
您真正需要做的是提供合理的文本，当该链接获得焦点时屏幕阅读器会大声朗读该文本，然后在视觉上隐藏该文本以防止有视力的用户看到。用空虚填充那些可能会关闭合规性检查器，但它实际上并没有帮助合规性。
我可以注入文本并应用字体 0 以便读者可以阅读它并且不会破坏滑块吗？

标签： javascript jquery wcag wcag2.0

【解决方案1】：

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

1。选择正确的控件

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

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

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

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

如果激活后，用户没有从页面移动（或移动到页面内的锚点），而是呈现一个新视图（消息框、布局更改等），则使用 @ 987654323@。虽然您可以使用 <input type="button">，但您更有可能会与预先存在的样式和后续开发人员（如我）发生冲突。

控件是否提交表单域？使用提交

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

键盘用户注意事项

想一想键盘用户。按下回车键可以触发超链接。但是可以通过按回车键或空格键来触发真正的按钮。当超链接具有焦点并且用户按下空格键时，页面将滚动一屏。如果没有更多可滚动的内容，那么用户将什么也没有体验到。给定一组看起来相同的界面元素，如果其中一些使用空格键而另一些不使用，您就不能指望用户对页面的行为有多大信心。

我有一个 CodePen 演示，展示了这一点：http://s.codepen.io/aardrian/debug/PZQJyd

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

供参考：http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html

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;
 }

这将允许屏幕阅读器阅读它。这也意味着您可以（并且应该）dump that title attribute。

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>，并通过插入带有 visually-hidden 类的 <span> 以将其隐藏起来，从而为其赋予一个可访问的名称。

【讨论】：