一个空元素（比如 <a href="#">）在无障碍性方面是否有效？

Question

一个空元素（比如 <a href="#">）在无障碍性方面是否有效？

htmlaccessibility

5

我管理几个网站，它们在主页上使用了特色文章滚动器，允许用户点击向前或向后箭头以查看下一篇文章的标题和简介，同时仍停留在同一页。

我使用WAVE的可访问性检查工具，任何使用此插件的网站都会返回一个错误，因为在代码中存在一个空链接，写作<a href="#">。有没有什么解决方法？我定义了一个title属性，但是#仍然导致空链接错误出现。

一些地方认为这是完全可以接受的，而其他人则认为这是一个问题。真正的答案和潜在的解决方法是什么？

- NiamLeeson

2

可能相关的答案在这里。您不需要href属性，只需使用类似于<a>返回</a> / <a>下一页</a>的内容即可。这个答案也很相关。 - misterManSam

我被踩了一下，有什么线索吗？ - aardrian

2个回答

0

某些来源建议<a href="#">链接</a>是无效的超文本引用，但实际上问题只存在于非JavaScript浏览器中，这超出了WCAG 2的范围。这不是你在这里需要考虑的问题，因为这不是WAVE考虑的错误。

问题在于你有一个空链接内容<a href="#"></a>，添加title属性并不能满足WAVE算法。

如果你唯一关心的是满足WAVE，只需在链接中放置一些内容并使用任何CSS技巧隐藏此内容即可。

- Adam

谢谢大家的建议，我通过删除href属性使其正常工作了。 :-) - NiamLeeson

请注意，删除 href 属性可能会导致屏幕阅读器无法宣读链接，从而产生不兼容性。 - Adam

那么，Adam，你认为最好的解决方案是使用上述的<button>实现来满足屏幕阅读器吗？ - NiamLeeson

你的问题的全局答案是你必须要有一个文本替换。无论你使用 a[href] 还是 button。使用 a[href] 而不是 button 对于屏幕阅读器来说并不是问题，唯一的例外是你会听到“链接”而不是“按钮”，这并不是什么大问题。此外，你不应该信任可访问性“验证器”，而应该使用屏幕阅读器进行测试。 - Adam

对于一些屏幕阅读器用户来说，这是非常重要的。当他们听到链接时，他们期望特定的交互方式。因此，他们可能选择在新窗口中打开链接。他们也可以从<button>提供的额外键盘交互中受益。我鼓励您使用最合适的元素。 - aardrian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aardrian · Accepted Answer

将<a href="#">改为<button>，并在该按钮上添加事件处理程序。

以下是有关元素属于何处的更多上下文...

控件是否把用户带到另一个页面？使用锚点

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

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

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

控件是否提交表单字段？使用提交

如果在激活时，用户输入的信息（手动输入或通过屏幕上选择项目）正在发送回服务器，则使用 <input type="submit">。这最好放置在一个 <form> 中。如果您需要更多的样式控制或必须嵌入不止一个简单文本字符串，请改用 <button type="submit">。

键盘考虑因素

请考虑一下键盘用户。通过按下回车键可以触发超链接，但通过按下回车键或空格键可以触发真正的按钮。当一个超链接获得焦点并且用户按下空格键时，页面将滚动一屏。如果没有更多内容需要滚动，那么用户就什么也不会感受到。假设有一组外观相同的界面元素，如果其中一些可以用空格键工作而其他一些则不能，您不能指望用户对页面的行为有太多信心。

我认为值得一提的是，只有在释放空格键时才触发由空格键触发的事件，而使用回车键会在按下键之前立即触发事件（在释放键之前）。