Web 可访问性专题面试题第 1 页，显示第 1–50 题，共找到 90 道完整解析，可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
给 AI Agent 提供页面感知时，为什么优先用可访问性树（accessibility tree）快照而不是原始 HTML DOM 或截图？ 本文先给出可直接复述的结论，再用最小代码说明AI Agent 页面感知 accessibility tree 快照对比 DOM的工作方式、判断依据、项目边界和常见误区。
定位器依赖 accessible name 时，浏览器如何计算元素的可访问名称，多个命名来源冲突时哪个生效？ 本文先给出可直接复述的结论，再用最小代码说明accessible name 计算 aria-label aria-labelledby 优先级的工作方式、判断依据、项目边界和常见误区。
aria-hidden="true" 与 display:none 对基于可访问性树的 Agent 感知有什么本质区别，各会漏掉什么？ 本文先给出可直接复述的结论，再用最小代码说明aria-hidden 与 display none 可访问性树区别的工作方式、判断依据、项目边界和常见误区。
Playwright 中为什么官方推荐 getByRole 定位器优先于 CSS/XPath 选择器？ 本文先给出可直接复述的结论，再用最小代码说明Playwright getByRole 优先于 CSS XPath 原因的工作方式、判断依据、项目边界和常见误区。
为多模态 Agent 选择观察方式时，什么任务截图优于可访问性树，什么任务反之？ 本文先给出可直接复述的结论，再用最小代码说明多模态 Agent 截图与可访问性树观察方式选择的工作方式、判断依据、项目边界和常见误区。
MCP Roots 向服务端暴露客户端可访问的文件系统边界，roots/list_changed 通知何时触发？ 本文先给出可直接复述的结论，再用最小代码说明MCP roots 文件系统边界的工作方式、判断依据、项目边界和常见误区。
display:none、visibility:hidden、opacity:0 三种隐藏方式在布局、绘制、命中测试和可访问性上各有什么差异？ 本文先给出可直接复述的结论，再用最小代码说明display none visibility hidden opacity 0 区别的工作方式、判断依据、项目边界和常见误区。
解释 Web Worker 可访问与不可访问的 API 边界：独立全局作用域无 window 和 DOM，但保留网络、存储、定时器等能力，并给出工程判断方法。
系统开启减少动态效果后，页面应减少大幅位移、闪烁或自动播放，必要的状态反馈仍可保留。prefers-reduced-motion 媒体查询可切换时长或替换动画形式；只把动画时长改成极短值，可能影响依赖动画结束事件的代码。
购买按钮用排序属性提前显示，视觉位置会改变，但 DOM、读屏和键盘焦点顺序不会跟着重排。结合相同排序值、换行时的项目分组和交互路径，判断哪些装饰性调整可以用排序属性，哪些必须调整源顺序。
Grid 的网格线、区域命名与自动放置允许同一份 HTML 在宽窄屏中重新排布，例如文章与侧栏互换位置。视觉顺序不会改变 DOM 顺序，也不会自动改变读屏和键盘焦点路径；交互内容重排时必须检查阅读顺序是否仍合理。
纯 vw 字号主要跟视口宽度变化，用户放大文字或调整浏览器默认字号时，可能无法得到预期的缩放；极窄视口也会把字压得过小，极宽视口又可能过大。可用 clamp() 给字号设上下限，并在首选值中加入 rem，让流体变化与用户字体设置保持联系。
图标用 SVG、图标字体还是雪碧图，从性能与可维护性怎么取舍？ 本文先给出可直接复述的结论，再用最小代码说明SVG 图标字体 雪碧图 取舍的工作方式、判断依据、项目边界和常见误区。
GraphQL 查询中变量（variables）解决了什么问题，为什么不能直接拼接字符串？ 本文先给出可直接复述的结论，再用最小代码说明GraphQL variables 变量 注入 安全的工作方式、判断依据、项目边界和常见误区。
一组相关单选按钮若只靠视觉边框，读屏用户很难知道它们共同回答什么问题。fieldset 建立分组，首个 legend 提供组标题；组标题与各选项的 label 各有分工；占位文本不能代替说明，嵌套分组也要保持清楚。
input type=image 是以图片呈现的提交按钮，点击时除触发表单提交，还会发送相对图片的点击坐标。无 name 时提交 x、y，具名时变成 name.x、name.y；alt 要说明操作，图片失败时也应可用。
缩写首次出现时应让读者明白它代表什么。<abbr> 的 title 能提供展开词，却不保证每位用户都方便获得；正文首次写全称、后续再用缩写更易读。 触屏用户尤其难以获得悬浮提示，重要术语的全称应直接出现在可见正文里。
accesskey 看似能提供键盘捷径，却可能和浏览器、系统、读屏软件的快捷键冲突，也受键盘布局与组合键差异影响。组合键随平台变化，还可能撞上浏览器或读屏软件快捷键；即使用它，也需要可发现的说明和可替代操作。
ARIA role 能告诉辅助技术元素扮演的角色，却不会自动补齐原生按钮的焦点、回车与空格交互。再比较 button 和 div role=button，说明原生语义优先的原因，以及何时才需要自己实现复杂控件。
标题元素表达内容层级，不是用来挑字体大小的标签。页面主标题通常用 h1，其下章节用 h2，再往下用 h3；层级应跟随内容从属关系。辅助技术可按标题快速浏览文档，清晰的标题也帮助搜索系统理解结构。
alt 是图片内容或功能的文本替代，在图片无法显示及辅助技术读取时尤其重要。title 常表现为鼠标悬停提示，但它不稳定地出现在触摸、键盘和读屏体验中，不能取代 alt。需要额外说明时可用邻近可见文字或图题，不必把同一句话同时塞进两个属性。
<label for="id"> 的 for 值对应某个可标注表单控件的唯一 id。关联后，点标签文字也能聚焦输入框或切换复选框，并给控件提供可理解的名称。也可以把控件直接放进 <label> 做隐式关联。
<header> 是页面或章节的引导内容，<footer> 是对应页面或章节的页脚信息；它们不只按屏幕顶部、底部的位置命名。<main> 标记文档主要内容，通常一个页面只应有一个当前可见的主内容区域，并且不应放进 header、footer、nav 等结构中。
<meta http-equiv="refresh"> 能在指定秒数后刷新或跳转，但自动动作会打断阅读、输入和读屏操作；倒计时不清楚时，用户更难掌控页面。需要真正的永久或临时地址迁移，优先用 HTTP 重定向。
一页有多张数据表时，caption 能给每张表提供可见标题，也能成为辅助技术理解表格的名称；aria-label 只提供不可见名称。页面上已有对应标题时，还可用 aria-labelledby 关联，避免视觉文字与读屏名称不一致。
教学视频的翻译字幕适合 subtitles，面向听不到声音的用户则需要 captions，把对白、重要音效和说话人线索都写进去。track 还支持描述、章节和元数据；语言标记、默认轨道与 WebVTT 时间轴都要在实际播放器中检查。
页脚导航的几个入口是并列项目，用 ul 包住 li 可以明确集合和项目边界；开户步骤有先后顺序则更适合 ol。圆点和横排属于 CSS 样式，移除圆点不必改掉列表结构；普通连续论述也不应只为排版硬拆成列表。
在服务端组件中使用 invariant 条件断言时，是否会泄漏错误细节到客户端？ 本文先给出可直接复述的结论，再用最小代码说明Next.js 服务端组件 invariant 断言 错误细节泄露防护的工作方式、判断依据、项目边界和常见误区。
useAsyncData 的上下文对象（context）中包含哪些信息？如何在数据获取函数中使用它来访问请求头或路由参数？ 本文先给出可直接复述的结论，再用最小代码说明Nuxt 3 useAsyncData context 可访问请求头和路由参数的工作方式、判断依据、项目边界和常见误区。
Nuxt 4 的插件中可以访问哪些上下文对象？这些对象在服务端和客户端是否一致？ 本文先给出可直接复述的结论，再用最小代码说明Nuxt 插件 上下文 客户端服务端差异的工作方式、判断依据、项目边界和常见误区。
为什么在 React SSR 应用中生成可访问性 id 要用 useId 而不是自增计数器或随机数？ 本文先给出可直接复述的结论，再用最小代码说明React useId SSR 稳定 id的工作方式、判断依据、项目边界和常见误区。
React Native 中动态更新的内容（如表单校验错误、加载完成）如何主动通知读屏器用户？ 本文先给出可直接复述的结论，再用最小代码说明React Native AccessibilityInfo announceForAccessibility的工作方式、判断依据、项目边界和常见误区。
React Native 页面切换或弹层出现后如何设置无障碍焦点，为什么常见做法是 setAccessibilityFocus？ 本文先给出可直接复述的结论，再用最小代码说明React Native 无障碍焦点 setAccessibilityFocus 弹层的工作方式、判断依据、项目边界和常见误区。
React Native 中 accessibilityRole、accessibilityLabel、accessibilityHint 分别面向读屏器传递什么信息？ 本文先给出可直接复述的结论，再用最小代码说明React Native accessibilityRole accessibilityLabel 区别的工作方式、判断依据、项目边界和常见误区。
React Native 中装饰性图片与信息型图片在无障碍上应如何区别对待？ 本文先给出可直接复述的结论，再用最小代码说明React Native Image accessible 装饰性图片 无障碍的工作方式、判断依据、项目边界和常见误区。
React Native 自定义可点击组件需要补哪些无障碍支持才能让 VoiceOver/TalkBack 用户正常操作？ 本文先给出可直接复述的结论，再用最小代码说明React Native 自定义组件 无障碍 accessible onAccessibilityTap的工作方式、判断依据、项目边界和常见误区。
Svelte 5 的 runes 如何声明响应式状态，怎样把共享状态放到组件外？ 本文先给出可直接复述的结论，再用最小代码说明Svelte runes $$ 变量 响应式声明 组件外访问的工作方式、判断依据、项目边界和常见误区。
如何通过 predicate 函数精准控制哪些查询应被无效化？请给出具体示例。 本文先给出可直接复述的结论，再用最小代码说明TanStack Query invalidateQueries predicate 精准无效化示例的工作方式、判断依据、项目边界和常见误区。
用 Playwright 集成 axe-core 做可访问性扫描时如何组织断言与违规处理 本文先给出可直接复述的结论，再用最小代码说明Playwright axe-core 可访问性测试 AxeBuilder的工作方式、判断依据、项目边界和常见误区。
Testing Library 查询默认为何查不到 display:none 的元素，如何用 hidden 选项改变行为 本文先给出可直接复述的结论，再用最小代码说明Testing Library hidden 元素 查询不到的工作方式、判断依据、项目边界和常见误区。
Testing Library 查询方法的优先级顺序是什么，为什么 getByRole 应优先于 getByTestId 本文先给出可直接复述的结论，再用最小代码说明Testing Library 查询优先级 getByRole的工作方式、判断依据、项目边界和常见误区。
Testing Library 的 getByRole 如何通过可访问名称区分同名按钮，name 选项依据什么计算 本文先给出可直接复述的结论，再用最小代码说明Testing Library getByRole name 可访问名称的工作方式、判断依据、项目边界和常见误区。
用跨模块唯一符号示例复现 TS4023，解释公开类型的可表达性、显式公共接口和非导出辅助类型，避免用 any 或跳过检查掩盖发布问题。
TypeScript 中当变量是联合类型时，为什么可以调用所有分支共有的方法？ 本文先给出可直接复述的结论，再用最小代码说明TypeScript 联合类型调用共有方法原因的工作方式、判断依据、项目边界和常见误区。
通过带外壳的按钮解释关闭自动继承后的手动透传，说明 class、ARIA、事件监听器的落点，已声明 props 和 emits 的处理及避免重复绑定的方法。
解释模板 ref 在 setup 时尚未绑定节点、onMounted 后可访问的原因，给出可判空的组件示例，并覆盖条件渲染、卸载竞态、SSR 和后续更新边界。
无障碍树与 DOM 树有什么区别？ARIA 如何影响无障碍树？ 本文先给出可直接复述的结论，再用最小代码说明无障碍树与 DOM 树区别 ARIA 影响的工作方式、判断依据、项目边界和常见误区。
为什么推荐使用 role=alert 而不是自己设置 aria-live=assertive？它有什么特殊行为？ 本文先给出可直接复述的结论，再用最小代码说明role=alert 与 aria-live=assertive 区别的工作方式、判断依据、项目边界和常见误区。
在包含多个变更的区域中使用 live region 时，aria-atomic 属性有什么作用？ 本文先给出可直接复述的结论，再用最小代码说明aria-atomic 在 live region 中的作用的工作方式、判断依据、项目边界和常见误区。
自定义复选框如何向屏幕阅读器传达选中状态？请说明 role=checkbox 和 aria-checked。 本文先给出可直接复述的结论，再用最小代码说明aria-checked 自定义复选框选中状态的工作方式、判断依据、项目边界和常见误区。
