无障碍树与 DOM 树有什么区别？ARIA 如何影响无障碍树？
围绕“无障碍树与 DOM 树有什么区别？ARIA 如何影响无障碍树”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释无障碍树为辅助技术生成的简化树，ARIA 增加信息。
核心关键词无障碍树与 DOM 树区别 ARIA 影响
面试知识索引 · 分类、标签与搜索
无障碍 · Web 可访问性面试题，44 道完整答案
无障碍 · Web 可访问性面试题第 1 页，显示第 1–44 题，共找到 44 道完整解析，可继续按分类、标签与关键词缩小范围。
44筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
技术分类52 个
全部分类5000无障碍44AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138
查看全部 52 个分类
React Native135操作系统135数据库134Docker95计算机网络94API 设计90Kubernetes90HTML89Redis89全栈开发88分布式系统88系统设计86HTTP85Next.js60Angular58Linux53Nuxt51PostgreSQL46可观测性46设计模式46小程序45身份与权限45MongoDB43PWA43Web 安全43Git42前端测试42前端性能41WebAssembly40测试40AI 工程37SvelteKit37Go35前端数据管理30React Router29AI 全栈28Svelte27算法12Java10数据结构5前端手写题3
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
为什么推荐使用 role=alert 而不是自己设置 aria-live=assertive？它有什么特殊行为？
围绕“为什么推荐使用 role=alert 而不是自己设置 aria-live=assertive？它有什么特殊行为”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 alert 自动具有 assertive 特性，且仅用于重要信息。
核心关键词role=alert 与 aria-live=assertive 区别 - 0003
在包含多个变更的区域中使用 live region 时，aria-atomic 属性有什么作用？
围绕“在包含多个变更的区域中使用 live region 时，aria-atomic 属性有什么作用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 aria-atomic=true 时播报整个区域，否则只播报变化部分。
核心关键词aria-atomic 在 live region 中的作用 - 0004
自定义复选框如何向屏幕阅读器传达选中状态？请说明 role=checkbox 和 aria-checked。
围绕“自定义复选框如何向屏幕阅读器传达选中状态？请说明 role=checkbox 和 aria-checked”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释如何模拟原生复选交互，并同步状态属性。
核心关键词aria-checked 自定义复选框选中状态 - 0005
在实现 Tooltip 时，为什么推荐使用 aria-describedby 而不是 aria-label？
围绕“在实现 Tooltip 时，为什么推荐使用 aria-describedby 而不是 aria-label”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 tooltip 是描述性内容，与名称区分。
核心关键词tooltip 用 aria-describedby 的原因 - 0006
在可展开组件中，aria-expanded 与 aria-hidden 有何不同？它们分别用于什么目的？
围绕“在可展开组件中，aria-expanded 与 aria-hidden 有何不同？它们分别用于什么目的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分展开状态与内容隐藏，并说明何时使用 hidden 属性。
核心关键词aria-expanded 与 aria-hidden 区别 - 0007
元素不能同时是焦点可及又被 aria-hidden 吗？为什么？
围绕“元素不能同时是焦点可及又被 aria-hidden 吗？为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 aria-hidden 元素不应获得焦点，否则读屏用户感到困惑。
核心关键词aria-hidden 与可聚焦元素的冲突 - 0008
在给元素提供无障碍名称时，aria-label 与 aria-labelledby 有什么区别？各自的使用场景是什么？
围绕“在给元素提供无障碍名称时，aria-label 与 aria-labelledby 有什么区别？各自的使用场景是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须讲清优先级和引用外部文本的能力。
核心关键词aria-label 与 aria-labelledby 区别 可访问名称 - 0009
希望清空一个 live region 来强制读屏播报变化，但当新内容与旧内容相同时，需要如何操作？
围绕“希望清空一个 live region 来强制读屏播报变化，但当新内容与旧内容相同时，需要如何操作”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明需要先清空再插入，否则可能被忽略，涉及防抖和延迟。
核心关键词清空 live region 强制重新播报 - 0010
在动态内容更新时，如何通过 ARIA live region 向屏幕阅读器通知？请说明 aria-live 的取值。
围绕“在动态内容更新时，如何通过 ARIA live region 向屏幕阅读器通知？请说明 aria-live 的取值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分 polite 和 assertive，并讨论使用时机。
核心关键词aria-live polite assertive 动态通知读屏 - 0011
对于菜单栏（menubar）组件，键盘交互应支持哪些按键？请说明箭头键和 Home/End 键。
围绕“对于菜单栏（menubar）组件，键盘交互应支持哪些按键？请说明箭头键和 Home/End 键”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须列出完整键盘支持，涉及方向键、Home、End 和 Escape。
核心关键词menubar 菜单栏键盘交互 方向键 Home End - 0012
在按钮上使用方向键导航合适吗？为什么不推荐？
围绕“在按钮上使用方向键导航合适吗？为什么不推荐”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释方向键通常移动焦点，可能导致困惑，适合特定组件内。
核心关键词按钮上不推荐方向键导航的原因 - 0013
实现一个可编辑的组合框（如自动补全输入框）时，需要哪些 ARIA 属性和键盘交互？
围绕“实现一个可编辑的组合框（如自动补全输入框）时，需要哪些 ARIA 属性和键盘交互”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 combobox、listbox、aria-expanded 和方向键导航。
核心关键词combobox 组合框 ARIA 属性与键盘交互 - 0014
何时使用按钮 (button) 而不是链接 (a)？请从交互语义的角度说明。
围绕“何时使用按钮 (button) 而不是链接 (a)？请从交互语义的角度说明”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须根据操作类型或导航区分，指出按钮触发动作、链接改变 URL。
核心关键词按钮 button 与链接 a 的语义选择 - 0015
在 SPA 中更新一个区域后，如何判断该内容是否需要被读屏播报？如何避免过度播报？
围绕“在 SPA 中更新一个区域后，如何判断该内容是否需要被读屏播报？如何避免过度播报”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须基于用户操作和上下文判断，并说明 live region 的克制。
核心关键词SPA 读屏播报时机与避免过度播报 - 0016
禁用状态（disabled）的表单控件为何有时不适合？什么情况下应用 readonly 或 aria-disabled？
围绕“禁用状态（disabled）的表单控件为何有时不适合？什么情况下应用 readonly 或 aria-disable”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分禁用元素无法聚焦且不会朗读，而 readOnly 或 aria-disabled 仍可读。
核心关键词disabled readonly aria-disabled 区别 - 0017
对于展开/收起组件（如手风琴），键盘焦点应如何管理？展开内容后焦点应停留在哪里？
围绕“对于展开/收起组件（如手风琴），键盘焦点应如何管理？展开内容后焦点应停留在哪里”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明聚焦在触发按钮而非内容。
核心关键词手风琴展开收起组件键盘焦点管理 - 0018
表单项校验失败时，应如何将错误消息与输入框关联？为什么使用 aria-describedby？
围绕“表单项校验失败时，应如何将错误消息与输入框关联？为什么使用 aria-describedby”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释使用 aria-describedby 而不是 aria-label，并说明通知方式。
核心关键词表单错误消息 aria-describedby 关联 - 0019
在单页应用（SPA）中切换路由时，如果不手动管理焦点会发生什么？通常的做法是什么？
围绕“在单页应用（SPA）中切换路由时，如果不手动管理焦点会发生什么？通常的做法是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明焦点停留导致页面似乎没有变化，做法包括移到标题或主内容。
核心关键词SPA 路由切换焦点管理做法 - 0020
通过 CSS transform 或 flex 布局改变元素视觉位置，会不会改变键盘 Tab 顺序？
围绕“通过 CSS transform 或 flex 布局改变元素视觉位置，会不会改变键盘 Tab 顺序”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须明确视觉顺序与 DOM 顺序的关联，CSS 不影响 tab 顺序。
核心关键词CSS transform 视觉顺序与键盘 Tab 顺序 - 0021
当点击一个按钮打开弹出面板（popover）时，焦点是否应移动到面板内？请说出标准做法。
围绕“当点击一个按钮打开弹出面板（popover）时，焦点是否应移动到面板内？请说出标准做法”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖判断时要说明是否移入，根据面板复杂度，简单建议保留在按钮或移入第一个焦点项。
核心关键词popover 打开后焦点移动标准做法 - 0022
:focus-visible 伪类与 :focus 有什么区别？在设置焦点样式时应如何选择？
围绕“:focus-visible 伪类与 :focus 有什么区别？在设置焦点样式时应如何选择”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 :focus-visible 仅针对键盘，避免鼠标点击出现焦点环。
核心关键词:focus-visible 与 :focus 区别 - 0023
自定义下拉菜单（listbox）中，键盘焦点和视觉高亮如何管理？请说明 aria-activedescendant。
围绕“自定义下拉菜单（listbox）中，键盘焦点和视觉高亮如何管理？请说明 aria-activedescendant”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释通过 aria-activedescendant 让读屏跟随，而焦点保持在输入框内。
核心关键词aria-activedescendant listbox 焦点管理 - 0024
在表单中，label 元素的 for 属性和嵌套文本哪种方式更好？为什么？
围绕“在表单中，label 元素的 for 属性和嵌套文本哪种方式更好？为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须讨论两种方式均有效，但 for 更灵活，避免多次嵌套时歧义。
核心关键词label for 属性与嵌套文本 表单可访问性 - 0025
只含图标的按钮如何提供可访问名称？请说明 aria-label、alt 文本和 title 标题的最佳实践。
围绕“只含图标的按钮如何提供可访问名称？请说明 aria-label、alt 文本和 title 标题的最佳实践”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕必须选择合适方法，通常 aria-label 或替代文本。
核心关键词图标按钮可访问名称 aria-label alt 实践 - 0026
在自定义组件中绑定 click 事件后，为什么还需要支持键盘触发？如何支持？
围绕“在自定义组件中绑定 click 事件后，为什么还需要支持键盘触发？如何支持”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明键盘事件如 Enter 和空格，以及原生按钮自动支持。
核心关键词click 事件之外的键盘触发支持 - 0027
在 HTML 中，键盘 Tab 键的导航顺序与 DOM 顺序不一致时如何处理？请说明 tabindex 的正负值作用。
围绕“在 HTML 中，键盘 Tab 键的导航顺序与 DOM 顺序不一致时如何处理？请说明 tabindex 的正负值作用”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 tabindex=0、-1 和正值的区别，并说明为何应避免正值。
核心关键词tabindex 键盘 Tab 顺序与 DOM 顺序不一致 - 0028
iOS 和 Android 的读屏软件对键盘焦点管理有什么不同？web 端如何兼顾？
围绕“iOS 和 Android 的读屏软件对键盘焦点管理有什么不同？web 端如何兼顾”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明可能没有 Tab 键，仍需要正确的语义和支持焦点。
核心关键词VoiceOver TalkBack 焦点管理差异 - 0029
模态弹窗应使用哪些 ARIA 属性和语义结构来正确表示？请说明 role=dialog 和 aria-modal。
围绕“模态弹窗应使用哪些 ARIA 属性和语义结构来正确表示？请说明 role=dialog 和 aria-modal”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 role、aria-modal、labelledby、describedby 等关键属性。
核心关键词role=dialog 与 aria-modal 弹窗语义 - 0030
实现一个无障碍模态弹窗时，如何管理焦点循环？请说明焦点陷阱的实现要点。
围绕“实现一个无障碍模态弹窗时，如何管理焦点循环？请说明焦点陷阱的实现要点”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释焦点保持在弹窗内、恢复焦点到触发元素。
核心关键词模态弹窗焦点陷阱 focus trap 实现 - 0031
如果一个组件只用鼠标事件（如 onmouseover）来显示内容，键盘和读屏用户将如何无法访问？
围绕“如果一个组件只用鼠标事件（如 onmouseover）来显示内容，键盘和读屏用户将如何无法访问”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明需提供等价体验，如 hover 与 focus 结合，或不采用 hover。
核心关键词鼠标事件交互对键盘读屏不可访问 - 0032
为什么说优先使用原生 HTML 语义而不是 ARIA 角色？请举例说明。
围绕“为什么说优先使用原生 HTML 语义而不是 ARIA 角色？请举例说明”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 ARIA 不改变行为，原生如 button、input 更好。
核心关键词原生 HTML 语义优先于 ARIA 的原因 - 0033
通过 CSS 移出屏幕的可交互元素（例如 hidden focusable）为何会造成障碍？应如何避免？
围绕“通过 CSS 移出屏幕的可交互元素（例如 hidden focusable）为何会造成障碍？应如何避免”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明隐藏但可聚焦元素会让键盘用户迷失，用视觉隐藏类解决。
核心关键词移出屏幕可聚焦元素造成的障碍 - 0034
页面启动后，如何向屏幕阅读器播报自动更新的区域（如倒计时或状态变化）？
围绕“页面启动后，如何向屏幕阅读器播报自动更新的区域（如倒计时或状态变化）”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明注入内容顺序及延迟重要性，避免读屏过早读出。
核心关键词live region 页面加载时的初始播报 - 0035
表单必填字段除了视觉号外，还需要什么无障碍提示？aria-required 与 required 属性有何关系？
围绕“表单必填字段除了视觉号外，还需要什么无障碍提示？aria-required 与 required 属性有何关系”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明原生 required 已可被读屏识别，ARIA 用于增强。
核心关键词aria-required 与 required 属性区别 - 0036
为什么给一个元素添加 ARIA role 并不会改变其键盘行为？例如将 div 变为 role=button。
围绕“为什么给一个元素添加 ARIA role 并不会改变其键盘行为？例如将 div 变为 role=button”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明必须用 JavaScript 添加键盘事件、tabindex 等。
核心关键词ARIA role 不改变键盘行为 div role=button - 0037
在自定义可交互组件（如工具栏）中，什么叫做 roving tabindex？请说明其工作机制。
围绕“在自定义可交互组件（如工具栏）中，什么叫做 roving tabindex？请说明其工作机制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释只有一个 tabindex=0，箭头键移动焦点。
核心关键词roving tabindex 漫游焦点机制 工具栏 - 0038
如何创建仅对屏幕阅读器可见的文本（比如“跳转到内容”的隐藏链接）？常见实现方式是什么？
围绕“如何创建仅对屏幕阅读器可见的文本（比如“跳转到内容”的隐藏链接）？常见实现方式是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出 CSS 类实现（clip、position 等）。
核心关键词visually hidden 读屏专用文本实现 - 0039
原生 select 元素在选项变化时会自动播报吗？自定义下拉列表需要模拟什么？
围绕“原生 select 元素在选项变化时会自动播报吗？自定义下拉列表需要模拟什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须明确原生 select 已无障碍，自定义需实现列表和前导键等。
核心关键词原生 select 播报与自定义下拉模拟 - 0040
什么是跳过链接？它如何帮助键盘用户？请说明其工作原理和放置位置。
围绕“什么是跳过链接？它如何帮助键盘用户？请说明其工作原理和放置位置”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释跳到主内容的目标锚点，且链接默认隐藏但聚焦时可见。
核心关键词跳过链接 skip link 工作原理与位置 - 0041
为一个按钮绑定空格键操作时，如何避免页面滚动？请说明涉及的默认行为。
围绕“为一个按钮绑定空格键操作时，如何避免页面滚动？请说明涉及的默认行为”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明空格默认滚动页面，需要 preventDefault，但需注意时机。
核心关键词空格键默认滚动 preventDefault 按钮 - 0042
界面中出现的短暂通知（如 toast）应如何使用 ARIA live region？它适合用 aria-live=assertive 吗？
围绕“界面中出现的短暂通知（如 toast）应如何使用 ARIA live region？它适合用 aria-live=a”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须区分 toast 根据重要性选择 polite 或 assertive。
核心关键词toast 通知 aria-live assertive 是否合适 - 0043
表单输入校验在失去焦点时进行和提交时进行，对屏幕阅读器用户有何不同？
围绕“表单输入校验在失去焦点时进行和提交时进行，对屏幕阅读器用户有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须比较两类机制的可感知性。
核心关键词表单校验 blur 与 submit 读屏差异 - 0044
如何确保键盘用户能清晰地看到焦点位置？请给出焦点指示器的设计标准和实现方式。
围绕“如何确保键盘用户能清晰地看到焦点位置？请给出焦点指示器的设计标准和实现方式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出对比度要求（如 3:1）和 outline 实现。
核心关键词焦点指示器 focus style 可见性标准