设置像按钮这样的链接是不是很难进行访问?

时间:2016-05-23 12:36:16

标签: button reactjs hyperlink accessibility react-router

在我的情况下,将className: "btn btn-default"之类的内容添加到react-router Link

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

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

3 个答案:

答案 0 :(得分:7)

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

  • 如果用户要访问新页面(或页面上的锚点),请使用<a href>spec)。
  • 如果用户正在更改当前页面上的状态,请使用<button>spec)。
  • 如果用户正在提交表单,请使用<input type="submit"><button type="submit">spec)。

我提醒不要更改具有role属性的元素的默认角色,因为这最终会导致某些混淆并且可能会对某些辅助技术产生冲突。这些也违反了ARIA使用的firstsecond规则。

考虑键盘体验。按Enter键可以触发超链接(<a href>)。但是按下回车键或空格键可以触发真<button>。当超链接具有焦点并且用户按下空格键时,该页面将滚动一个屏幕。某些辅助技术的用户将期望基于所使用的元素的行为。

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

首先使用上面的列表开始使用正确的任务元素,然后根据需要设置样式。

答案 1 :(得分:2)

最好的做法是让事情看起来像他们的行为,但你可能没有奢侈品,所以现在元素应该扮演什么角色?

您应该对链接和按钮设置样式并对其进行设置,以便他们将此信息传达给用户。这是一般的良好可用性实践。

但是,这只适用于品牌推广和营销人员没有发言权的世界。你有没有听说过“我们需要让这个链接更加突出,以便访问者更多地点击它......”这就是链接开始转变为这些怪物的地方,这些怪物无法通过它们的外观和行为来识别。

所以现在你偶然发现了一个关于可访问性的重大争论:某些角色应该具有与其行为相匹配的角色,还是应该具有与其外观相匹配的角色?

链接是将浏览器定向到其他位置(另一个页面或同一页面上的其他位置)的元素。这就是它的设计方式。

另一方面,按钮旨在与页面交互或提交数据。

复杂的是,当你有一个看起来像按钮的链接和盲人用户电话支持而支持人员说“点击X按钮”并且屏幕阅读器宣布Y链接(因为按钮的文本替代是然后盲人用户真的感到沮丧,因为他们既没有找到按钮也没有找到与X匹配的东西。

但是,如果您尝试以正确的方式进行辅助功能,并且链接文本与元素的可见信息匹配,则IMO应始终在元素上具有与其行为方式相匹配的角色。

在您的具体示例中,使用像Dragon这样的语音识别系统的人将难以点击链接,因为他们可能会使用“按钮”之类的命令列出所有按钮而不会看到他们期望的元素。然后,该用户必须猜测它实际上是一个链接,或者使用鼠标定位来与元素进行交互。

答案 2 :(得分:0)

上面提到的aadrian和unobf提出的观点是准确的并且说得很清楚。还有另一个无法避免的现实迫使开发者的手。

设计师经常deemphasize one or more actionable element in a group,例如删除按钮,因为如果误用,它会被频繁使用或灾难性使用。 Research表明使用此策略可以减少灾难性错误。

由于许多经验丰富的专业人士要求markup for the control matches the presentation,开发人员的第一直觉可能是将删除控件标记为链接。

视力障碍者的辅助技术(如颌骨)依赖于单一类型的控制列表。 Surveys表明视障者经常使用这种策略。

考虑到这些可访问性现实,将操作列表标记为具有一个或多个用于删除等操作的链接的按钮是一种非常糟糕的做法。视障用户可能不会将链接与按钮相关联,并且可能完全错过链接。

这种现实基本上迫使开发人员动手。如果设计要求在按钮列表中添加删除链接,则开发人员必须将链接标记为按钮,即使键盘导航不能完美地与有视力的用户对齐。