html 属性Accesskey详细解析-工具盒子

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

我们来仔细看看京东和淘宝是怎么做的，不难发现它们都是在同一个地方使用了这个属性，那就是搜索🔍!
[{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a01fd29c767.webp!blogimg","alt":""},{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a020547c995.webp!blogimg","alt":""}] 加载更多

简介ℹ️ {#简介ℹ️}

在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快捷访问？ {#隐藏的元素能否可以触发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属性值会怎样？ {#多个元素使用相同的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)下，上面一行
的accesskey属性设置会被忽略，作用的是后来居上的元素，从此处看来，Edge已经彻底向Chrome靠齐了，前端人振奋！

但是在Safair浏览器上就是只有第一个测试1会变为红色，下面一行的不会触发。

糟糕的浏览器支持 {#糟糕的浏览器支持}

为什么🧐说它是糟糕的浏览器支持呢，首先我们来看看它的支持程度
[{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a0220ac6038.png!blogimg","alt":""},{"url":"https://img02.anheyu.com/adminuploads/1/2023/07/01/64a0220ac6087.png!blogimg","alt":""}] 加载更多

从mdn查询的和从caniuse查询的都看起来很不错，几乎是在有浏览器存在的时代就已经有了这个属性，说明它从很久很久以前就已经有了，可能比你我的年龄都大，看起来好像不是那么"糟糕"，那么为什么要说它是"糟糕"的呢，原因就是它产生的实在是太早了，导致众多浏览器都不给面子，各家都有自己的想法，实现方式不一样且没有被统一规范，没有统一的实践。

从上面mdn查询的和从caniuse看到的交互图我们可以发现，每个浏览器与平台系统都有自己的看法，谁也不服谁🫤，这使得开发者无所适从，需要适配去尝试每一个浏览器是一件很麻烦的事情，所以它是糟糕的浏览器支持。

是否要使用? {#是否要使用}

当然要用啊！简简单单加一个HTML属性，又不要你做任何其他多余的事情，就可以让浏览器支持快捷访问，举手之劳，何乐而不为呢？几乎所有的网站都有导航，导航都是公用的，是不是可以从accesskey="s"开始依次设置下；很多网站都有搜索功能，是不是可以像京东一样，在<input>输入框HTML上设置accesskey="/"。如果大家都这么设置和处理，久而久之，就会形成约定俗成的行业规范标准，对用户而言其实非常好的一件事情。就好像回车支持表单提交一样的，一旦大家都这么做了，用户就很容易形成习惯，一种更方便快捷高效访问使用网站的习惯，此时如果你的网站不支持，对于多年浸染网络的用户就觉得你这个网站体验做的不好。