在实现 Tooltip 时,为什么推荐使用 aria-describedby 而不是 aria-label?
在实现 Tooltip 时,为什么推荐使用 aria-describedby 而不是 aria-label? 本文先给出可直接复述的结论,再用最小代码说明tooltip 用 aria-describedby 的原因的工作方式、判断依据、项目边界和常见误区。
Web 可访问性专题面试题第 2 页,显示第 51–90 题,共找到 90 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
在实现 Tooltip 时,为什么推荐使用 aria-describedby 而不是 aria-label? 本文先给出可直接复述的结论,再用最小代码说明tooltip 用 aria-describedby 的原因的工作方式、判断依据、项目边界和常见误区。
在可展开组件中,aria-expanded 与 aria-hidden 有何不同?它们分别用于什么目的? 本文先给出可直接复述的结论,再用最小代码说明aria-expanded 与 aria-hidden 区别的工作方式、判断依据、项目边界和常见误区。
元素不能同时是焦点可及又被 aria-hidden 吗?为什么? 本文先给出可直接复述的结论,再用最小代码说明aria-hidden 与可聚焦元素的冲突的工作方式、判断依据、项目边界和常见误区。
在给元素提供无障碍名称时,aria-label 与 aria-labelledby 有什么区别?各自的使用场景是什么? 本文先给出可直接复述的结论,再用最小代码说明aria-label 与 aria-labelledby 区别 可访问名称的工作方式、判断依据、项目边界和常见误区。
希望清空一个 live region 来强制读屏播报变化,但当新内容与旧内容相同时,需要如何操作? 本文先给出可直接复述的结论,再用最小代码说明清空 live region 强制重新播报的工作方式、判断依据、项目边界和常见误区。
在动态内容更新时,如何通过 ARIA live region 向屏幕阅读器通知?请说明 aria-live 的取值。 本文先给出可直接复述的结论,再用最小代码说明aria-live polite assertive 动态通知读屏的工作方式、判断依据、项目边界和常见误区。
对于菜单栏(menubar)组件,键盘交互应支持哪些按键?请说明箭头键和 Home/End 键。 本文先给出可直接复述的结论,再用最小代码说明menubar 菜单栏键盘交互 方向键 Home End的工作方式、判断依据、项目边界和常见误区。
在按钮上使用方向键导航合适吗?为什么不推荐? 本文先给出可直接复述的结论,再用最小代码说明按钮上不推荐方向键导航的原因的工作方式、判断依据、项目边界和常见误区。
实现一个可编辑的组合框(如自动补全输入框)时,需要哪些 ARIA 属性和键盘交互? 本文先给出可直接复述的结论,再用最小代码说明combobox 组合框 ARIA 属性与键盘交互的工作方式、判断依据、项目边界和常见误区。
何时使用按钮 (button) 而不是链接 (a)?请从交互语义的角度说明。 本文先给出可直接复述的结论,再用最小代码说明按钮 button 与链接 a 的语义选择的工作方式、判断依据、项目边界和常见误区。
在 SPA 中更新一个区域后,如何判断该内容是否需要被读屏播报?如何避免过度播报? 本文先给出可直接复述的结论,再用最小代码说明SPA 读屏播报时机与避免过度播报的工作方式、判断依据、项目边界和常见误区。
禁用状态(disabled)的表单控件为何有时不适合?什么情况下应用 readonly 或 aria-disabled? 本文先给出可直接复述的结论,再用最小代码说明disabled readonly aria-disabled 区别的工作方式、判断依据、项目边界和常见误区。
对于展开/收起组件(如手风琴),键盘焦点应如何管理?展开内容后焦点应停留在哪里? 本文先给出可直接复述的结论,再用最小代码说明手风琴展开收起组件键盘焦点管理的工作方式、判断依据、项目边界和常见误区。
表单项校验失败时,应如何将错误消息与输入框关联?为什么使用 aria-describedby? 本文先给出可直接复述的结论,再用最小代码说明表单错误消息 aria-describedby 关联的工作方式、判断依据、项目边界和常见误区。
在单页应用(SPA)中切换路由时,如果不手动管理焦点会发生什么?通常的做法是什么? 本文先给出可直接复述的结论,再用最小代码说明SPA 路由切换焦点管理做法的工作方式、判断依据、项目边界和常见误区。
通过 CSS transform 或 flex 布局改变元素视觉位置,会不会改变键盘 Tab 顺序? 本文先给出可直接复述的结论,再用最小代码说明CSS transform 视觉顺序与键盘 Tab 顺序的工作方式、判断依据、项目边界和常见误区。
当点击一个按钮打开弹出面板(popover)时,焦点是否应移动到面板内?请说出标准做法。 本文先给出可直接复述的结论,再用最小代码说明popover 打开后焦点移动标准做法的工作方式、判断依据、项目边界和常见误区。
:focus-visible 伪类与 :focus 有什么区别?在设置焦点样式时应如何选择? 本文先给出可直接复述的结论,再用最小代码说明:focus-visible 与 :focus 区别的工作方式、判断依据、项目边界和常见误区。
自定义下拉菜单(listbox)中,键盘焦点和视觉高亮如何管理?请说明 aria-activedescendant。 本文先给出可直接复述的结论,再用最小代码说明aria-activedescendant listbox 焦点管理的工作方式、判断依据、项目边界和常见误区。
在表单中,label 元素的 for 属性和嵌套文本哪种方式更好?为什么? 本文先给出可直接复述的结论,再用最小代码说明label for 属性与嵌套文本 表单可访问性的工作方式、判断依据、项目边界和常见误区。
只含图标的按钮如何提供可访问名称?请说明 aria-label、alt 文本和 title 标题的最佳实践。 本文先给出可直接复述的结论,再用最小代码说明图标按钮可访问名称 aria-label alt 实践的工作方式、判断依据、项目边界和常见误区。
在自定义组件中绑定 click 事件后,为什么还需要支持键盘触发?如何支持? 本文先给出可直接复述的结论,再用最小代码说明click 事件之外的键盘触发支持的工作方式、判断依据、项目边界和常见误区。
在 HTML 中,键盘 Tab 键的导航顺序与 DOM 顺序不一致时如何处理?请说明 tabindex 的正负值作用。 本文先给出可直接复述的结论,再用最小代码说明tabindex 键盘 Tab 顺序与 DOM 顺序不一致的工作方式、判断依据、项目边界和常见误区。
iOS 和 Android 的读屏软件对键盘焦点管理有什么不同?web 端如何兼顾? 本文先给出可直接复述的结论,再用最小代码说明VoiceOver TalkBack 焦点管理差异的工作方式、判断依据、项目边界和常见误区。
模态弹窗应使用哪些 ARIA 属性和语义结构来正确表示?请说明 role=dialog 和 aria-modal。 本文先给出可直接复述的结论,再用最小代码说明role=dialog 与 aria-modal 弹窗语义的工作方式、判断依据、项目边界和常见误区。
实现一个无障碍模态弹窗时,如何管理焦点循环?请说明焦点陷阱的实现要点。 本文先给出可直接复述的结论,再用最小代码说明模态弹窗焦点陷阱 focus trap 实现的工作方式、判断依据、项目边界和常见误区。
如果一个组件只用鼠标事件(如 onmouseover)来显示内容,键盘和读屏用户将如何无法访问? 本文先给出可直接复述的结论,再用最小代码说明鼠标事件交互对键盘读屏不可访问的工作方式、判断依据、项目边界和常见误区。
为什么说优先使用原生 HTML 语义而不是 ARIA 角色?请举例说明。 本文先给出可直接复述的结论,再用最小代码说明原生 HTML 语义优先于 ARIA 的原因的工作方式、判断依据、项目边界和常见误区。
通过 CSS 移出屏幕的可交互元素(例如 hidden focusable)为何会造成障碍?应如何避免? 本文先给出可直接复述的结论,再用最小代码说明移出屏幕可聚焦元素造成的障碍的工作方式、判断依据、项目边界和常见误区。
页面启动后,如何向屏幕阅读器播报自动更新的区域(如倒计时或状态变化)? 本文先给出可直接复述的结论,再用最小代码说明live region 页面加载时的初始播报的工作方式、判断依据、项目边界和常见误区。
表单必填字段除了视觉号外,还需要什么无障碍提示?aria-required 与 required 属性有何关系? 本文先给出可直接复述的结论,再用最小代码说明aria-required 与 required 属性区别的工作方式、判断依据、项目边界和常见误区。
为什么给一个元素添加 ARIA role 并不会改变其键盘行为?例如将 div 变为 role=button。 本文先给出可直接复述的结论,再用最小代码说明ARIA role 不改变键盘行为 div role=button的工作方式、判断依据、项目边界和常见误区。
在自定义可交互组件(如工具栏)中,什么叫做 roving tabindex?请说明其工作机制。 本文先给出可直接复述的结论,再用最小代码说明roving tabindex 漫游焦点机制 工具栏的工作方式、判断依据、项目边界和常见误区。
如何创建仅对屏幕阅读器可见的文本(比如“跳转到内容”的隐藏链接)?常见实现方式是什么? 本文先给出可直接复述的结论,再用最小代码说明visually hidden 读屏专用文本实现的工作方式、判断依据、项目边界和常见误区。
原生 select 元素在选项变化时会自动播报吗?自定义下拉列表需要模拟什么? 本文先给出可直接复述的结论,再用最小代码说明原生 select 播报与自定义下拉模拟的工作方式、判断依据、项目边界和常见误区。
什么是跳过链接?它如何帮助键盘用户?请说明其工作原理和放置位置。 本文先给出可直接复述的结论,再用最小代码说明跳过链接 skip link 工作原理与位置的工作方式、判断依据、项目边界和常见误区。
为一个按钮绑定空格键操作时,如何避免页面滚动?请说明涉及的默认行为。 本文先给出可直接复述的结论,再用最小代码说明空格键默认滚动 preventDefault 按钮的工作方式、判断依据、项目边界和常见误区。
界面中出现的短暂通知(如 toast)应如何使用 ARIA live region?它适合用 aria-live=assertive 吗? 本文先给出可直接复述的结论,再用最小代码说明toast 通知 aria-live assertive 是否合适的工作方式、判断依据、项目边界和常见误区。
表单输入校验在失去焦点时进行和提交时进行,对屏幕阅读器用户有何不同? 本文先给出可直接复述的结论,再用最小代码说明表单校验 blur 与 submit 读屏差异的工作方式、判断依据、项目边界和常见误区。
如何确保键盘用户能清晰地看到焦点位置?请给出焦点指示器的设计标准和实现方式。 本文先给出可直接复述的结论,再用最小代码说明焦点指示器 focus style 可见性标准的工作方式、判断依据、项目边界和常见误区。