button - 将链接设置为按钮样式是不好的可访问性做法吗？

Question

就我而言，添加类似 className: "btn btn-default" 的内容到 react-router Link .

像这样:<Link className="btn btn-default" to={linkUrl}>Go!</Link>

使用辅助技术查看网站的人会被绊倒吗？

Answer 1

有关何时使用 <a href> 的一些一般提示与 <button> 相比或<input type="submit"> :

• 如果用户要转到新页面(或页面上的 anchor )，请使用 <a href> (spec)。
• 如果用户要更改当前页面上的状态，请使用 <button> (spec)。
• 如果用户提交表单，请使用 <input type="submit">或<button type="submit"> (spec)。

我警告不要使用 role 更改元素的默认角色属性，因为这最终可能会导致一些困惑，并可能与某些辅助技术发生冲突。这些也违反了first和second ARIA 使用规则。

还要考虑键盘体验。按 Enter 键可以触发超链接 ( <a href> )。但一个真实的<button>可以通过按 Enter 键或空格键来触发。当超链接获得焦点并且用户按空格键时，页面将滚动一屏。某些辅助技术的用户会期望基于所使用的元素的行为。

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

因此，使用上面的列表从适合任务的正确元素开始，然后将其样式设置为您想要的外观。