使用按钮而不是链接的可访问性影响

Question

我正在开发一个客户项目，该项目充当弱势群体的资源和支持系统。由于预期的用户，可访问性合规性被吹捧为本网站的绝对最高优先级，因此我们目前正在努力与WCAG 2.0 Level AA 尽可能密切地会面。

目前标题中登录/注册链接的代码如下所示：

<div class="profile-summary">
    <a class="profile-summary__link" href="/login">Login</a>
    or
    <a class="profile-summary__link" href="/register">sign up</a>
</div>

另一位开发用户管理系统的开发人员想要将登录链接更改为包含提交按钮的表单。像这样的东西（假设）：

<div class="profile-summary">
    <form action="/login" method="get">
        <button type="submit">Login</button>
    </form>
    or
    <a class="profile-summary__link" href="/register">sign up</a>
</div>

这对我来说并不好，似乎屏幕阅读器和其他辅助软件会绊倒（例如，在总结页面时不会读取登录选项）。据我所知，其中一些在遇到表单时会切换到“表单模式”，这在这种情况下会很不协调。

在这种情况下，在普通链接上使用表单和按钮是否会对可访问性产生不利影响？

谢谢！

Answer 1

在这种情况下，href="#" 的链接是正确的。

添加表单可能比任何事情都更令人困惑，因为这意味着在两个原本相似的控件之间会发生不同的事情。没有字段而只有一个按钮的表单让许多 SR 用户更加困惑。这可能是比链接更大的问题。

记住not all screen reader users are blind，所以如果这些控件看起来相同但行为不同，这也是一个问题。

如果不了解这两个控件的作用，就很难就哪个元素是正确的选择提供具体建议。

这通常是我处理这个问题的方式......

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

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

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

如果激活后，用户没有从页面移动（或移动到页面内的锚点），而是呈现一个新视图（消息框、布局更改等），则使用 @ 987654324@。虽然您可以使用 <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