如何在React中为链接提供可访问的onClick处理程序?

时间:2019-01-02 14:11:10

标签: reactjs accessibility web-accessibility

我的React应用程序中有一个链接,该链接如下调用onClick处理程序:

<a onClick={handleClick}>Link</a>

但是,由于我没有使用原生的href属性,所以当我关注链接时,未激活此处理程序,然后按 Enter

现在,我当然可以添加一个onKeyDown处理程序,然后检查所按下的键是 Space 还是 Enter ,如果是,致电handleClick。但是,恐怕这不足以捕捉所有可访问性的细微差别,也不会完全像常规链接那样起作用。

因此,问题是:当链接后面跟随任何可能的交互方法时,有没有办法表明我希望我的函数被调用?

2 个答案:

答案 0 :(得分:3)

没有<a>的{​​{1}}标签不再有效。可以尝试使用href和样式,而不用尝试重新实现焦点和键盘逻辑。从语义上讲,如果它触发button,则它很可能应该是onClick,并且最容易访问。

供参考https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md

答案 1 :(得分:-1)

您有正确的主意onKeyDown,或者需要设置一些内容。 理想情况下,我建议使用像Microsoft的FabricUI或Material这样的库,它们在后台进行所有这些操作。

或者,您可以使用react-a11y软件包,该软件包可以检查此类情况。以下是对onClick的检查

https://github.com/reactjs/react-a11y/blob/master/docs/rules/click-events-have-key-events.md