前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库accesskey 可访问性 键盘冲突
HTML语义与文档

为什么大多数网站不该随意给按钮设置 accesskey?

accesskey 为元素提供由浏览器组合键触发的快捷访问,但组合键因环境而异,还可能抢占系统或辅助技术快捷键。普通网站通常不应随手给每个按钮分配它。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档#Web 可访问性
先看核心答案读代码示例
理解线索

快捷键要兼顾可用性

  1. accesskey为元素指定一个访问键
  2. 快捷键冲突与系统或辅助技术功能争用按键
  3. 可发现性让用户知道快捷键存在及如何使用

accesskey="s" 不等于单独按 S,通常还要按平台相关的修饰键。

核心回答

先记住这个答案

accesskey 允许给元素指定访问键,但用户实际要按的组合键由浏览器、操作系统和辅助技术共同决定。一个字母可能与浏览器菜单或读屏命令冲突,也可能在某种键盘布局里难以输入。对一般网站,稳定的原生 Tab 导航、清晰标签与显式可见操作通常更可靠;只有明确目标环境和高频操作需求时,才谨慎考虑访问键。

  • 组合键由浏览器和系统决定
  • 可能与已有快捷键冲突
  • 不同键盘布局未必都有目标键
  • 功能必须有正常可见操作入口

一个保存键在不同电脑上不一样

后台系统想给“保存”按钮设 S 键。开发者电脑上组合键可用,不代表其他浏览器、Mac 或读屏环境也可用;用户也不一定知道页面有这条捷径。

访问键仍需可见按钮HTML
<button type="submit" accesskey="s">
  保存
</button>
<p>可通过页面帮助查看可用快捷键。</p>

这个按钮仍能用鼠标点击和 Tab 加回车操作,访问键只是额外入口。实际组合键不能在帮助里只写“按 S”,应根据目标平台说明,并检查是否与常用系统命令冲突。 页面上有多个重复访问键时行为也可能让用户困惑。快捷键设计要成体系,避免不同组件各自占用同一个字母。

什么时候可以考虑使用

受控的内部工具、固定浏览器和键盘环境,且某个操作一天要重复许多次,访问键才可能带来实际收益。即便如此,也要先测试目标环境的冲突和国际键盘,并提供关闭或修改策略。

面向公众的网站设备太多,隐藏快捷键通常不是改善可访问性的捷径。先确保语义控件、焦点顺序和可见标签可靠,必要时再提供用户可配置的快捷键方案。

把 accesskey="s" 写在保存按钮上,实际按键组合由浏览器和操作系统决定,用户未必能猜到,更可能与屏幕阅读器或浏览器快捷键冲突。若产品确需快捷操作,应在按钮附近明确说明按键,并允许用户查看或修改快捷键。不要给每个按钮都分配访问键;页面一多,冲突和记忆负担会迅速增加。普通表单优先保证 Tab 顺序、可见焦点和按钮标签清楚,通常比增加 accesskey 更有帮助。

回答前,多想一步

容易答错的地方

以为 accesskey="s" 就是按一次 S
浏览器通常要求修饰键,组合方式随平台变化。
把快捷键当成按钮的唯一入口
用户可能不知道、无法输入或遇到冲突,重要操作仍应有可见且可聚焦的控件。
试着用自己的话回答

面试官还会怎么问?

能在移动设备上依赖 accesskey 吗?

不适合。触屏设备可能没有物理键盘,访问键不应承担唯一操作路径。

如何减少冲突?

了解目标系统和辅助技术的常用组合键,限制数量,测试实际环境,并让用户能发现或调整。

键盘可访问性最先检查什么?

先用 Tab 和回车、空格走完整个流程,保证自然焦点顺序和原生控件能用。

从一道题,走向一组知识

把知识连起来

语义与文档

有原生 button 时,为什么别给 div 直接加 role=button?

ARIA 也应补充原生元素,而不是为了快捷键牺牲原生交互。

语义与文档

audio 里面的文字什么时候会显示,能当音频加载失败提示吗?

音频播放控件需要完整的可见与键盘操作,隐藏快捷键不能替代。

参考资料

  • MDN 参考文档

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 一个保存键在不同电脑上不一样
  3. 什么时候可以考虑使用
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑