I manage several websites that use a featured article scroller on their homepages, which allows the user to click a forward or back arrow in order to see the next article headline and blurb while remaining on the same page.
I use WAVE's accessibility checker and any sites that have this particular plugin throw an error back because within the code there is an empty link, written as <a href="#">. Is there any way around this? I've defined a title attribute but the # is causing the empty link error to still come up.
Some places I've seen that this is perfectly acceptable and others claim this is a problem. What's the actual answer and potential workaround?
答案 0 :(得分：9)
将<a href="#">更改为<button>并将事件处理程序放在其上。
关于哪些元素属于......的更多上下文....
控件是否将我带到另一页？使用锚点
如果在点击，点击或通过键盘或语音激活（或在此处插入新颖的互动方法）时，用户将被带到另一个URL（包括同一页面上的锚点），然后使用<a href="[URL]">。确保使用href属性并且它具有真实的URL，而不是“＃”（否则您可能依赖于JavaScript，这对于超链接来说根本不是必需的）。如果href只指向“＃”，那么你可能做错了。如果它指向一个命名锚点作为渐进增强工作的一部分，那么这是完全有效的。
控件是否会更改当前页面上的内容？使用按钮
如果，在激活时，用户不会从页面移动（或移动到页面中的锚点），而是显示新视图（消息框，布局更改等），然后使用{ {1}}。虽然您可以使用<button>，但您更有可能与预先存在的样式和后续开发人员（例如我）发生冲突。
控制提交表单字段？使用提交
如果在激活时，用户输入的信息（通过手动输入或通过选择屏幕上的项目）将被发送回服务器，然后使用<input type="button">。这最好住在<input type="submit">。如果您需要更多样式控件或不仅仅需要嵌入简单的文本字符串，请改用<form>。
键盘注意事项
想一想键盘用户。按Enter键可以触发超链接。但是按下回车键或空格键可以触发真正的按钮。当超链接具有焦点并且用户按下空格键时，该页面将滚动一个屏幕。如果没有更多要滚动，那么用户只会遇到任何事情。给定一组看起来相同的界面元素，如果某些界面元素使用空格键而某些界面元素没有，那么您不能指望用户对页面的行为有信心。
我认为值得一提的是，空格键触发的事件仅在释放键时触发，而使用Enter键会在您按下键时（在释放键之前）立即触发事件。
答案 1 :(得分：0)
Some source表示<a href="#">link</a>将是无效的超文本引用，但实际上问题只存在于非JavaScript浏览器中，这超出了WCAG 2的范围。这不是你的问题如这不是WAVE考虑的错误。
此处的问题是您有一个空的链接内容 <a href="#"></a>，并且添加title属性不符合WAVE算法。
如果您唯一关心的是满足WAVE，只需在链接中添加一些内容并使用任何CSS技巧来隐藏此内容。