accesskey是一个在国内很冷门的属性，一般只有做无障碍才需要使用到它，目前我发现的国内网站有使用的一个是淘宝，另一个是京东，此处点名表扬👍，现在也有越来越多的网站在使用这个属性，并且国内的很多网站都开始支持起了无障碍，目前 微博，京东，淘宝等都支持无障碍通道模式。

我们来仔细看看京东和淘宝是怎么做的，不难发现它们都是在同一个地方使用了这个属性，那就是搜索🔍!

简介ℹ️

在HTML4.0.1的时候，HTML accesskey属性请可以作用在以下元素上：<a>, <area>, <button>, <input>, <label>, <legend>以及<textarea>元素。然后到了HTML5规范的时候，accesskey属性可以作用在任意的元素上，变成了“全局属性”，但是由于它糟糕的浏览器支持⬆️，依然只建议在这些元素上使用。

基本使用

1

<a accesskey="s" href="">自定义快捷访问搜索</a>

这里的属性值 s 对应的就是键盘上的字母s，如果是accesskey="1"则1对应的就是键盘上的数字1。

需要注意的是，虽然说accesskey属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的，下面是一张交互图。

MDN文档显示Opera浏览器是：Shift + Esc 打开可访问的快捷键定义列表，此时可以按下对应的 key 进行访问。但是根据自己的测试，Shift + Esc 打开的是浏览器的任务管理器，和Chrome浏览器一致。我想，MDN文档对Opera的描述应该是Opera还没有采用Blink内核之前的行为吧，所以现在应该是和Chrome一致了。

IE浏览器和Chrome浏览器的组合键是一样的，但是其交互行为却和其他浏览器不一样，举个例子：

1

<a accesskey="s" href="">自定义快捷访问搜索链接</a>

在windows操作系统下，按下ctrl + s，IE浏览器只是让<a>元素获得焦点，但是其他所有浏览器都是直接触发click行为。在我看来，IE浏览器的这种行为是不友好的，对于普通的控件元素而言，还可以获得焦点后回车访问，但是，对于类似<div>这类元素，accesskey属性几乎是没有任何意义的，因为根本无法通过键盘触发<div>点击行为。而Chrome等浏览器就没有这个问题，如下HTML：

1

<a accesskey="s" href="">测试自定义快捷访问搜索链接（点我或者使用快捷键可以让我变成红色触发click事件）</a>

如果你是mac系统，你可以按下ctrl + option + s，上面这段话就会变成红色，win系统可以按下alt + s

隐藏的元素能否可以触发accesskey快捷访问？

一个元素，如果CSS display属性的计算值是none，是无法通过Tab键进行索引聚焦的。那设置的accesskey快捷访问是否可以访问呢？

根据我的测试，Chrome浏览器和Firefox浏览器是可以的，元素即使隐藏，只要设置了accesskey快捷访问，按下对应组合键的时候就能触发click行为。例如：

1

<a href="" accesskey="s" hidden>链接</a>

在windows操作系统Chrome浏览器下，按下Alt + a，页面会直接刷新。
在mac操作系统Chrome浏览器下，按下ctrl + option + a，页面会直接刷新。

包括对于最新的Edge浏览器（IE11）也会被直接刷新！这就很神奇了，我们可以利用这一点做很多事情，嘿嘿

多个元素使用相同的accesskey属性值会怎样？

如下测试代码：

1
2

<div accesskey="b" tabindex="0" onClick="this.style.color='red';">测试1</div>
<div accesskey="b" tabindex="0" onClick="this.style.color='red';">测试2</div>

在Chrome浏览器和Edge浏览器(IE11)下，上面一行