# 我们检测的无障碍问题 每个页面讲解我们的自动化测试发现的一个问题：它的含义、与哪项 WCAG 标准相关、如何在任何网站以及 Shopify 和 WooCommerce 上修复，以及如何检查修复效果。 ## 无障碍问题 - [被设定为 ARIA 隐藏的元素不可聚焦，且不包含可聚焦的元素](https://www.fixreports.com/zh/issues/aria-hidden-focus): WCAG 4.1.2 · A 级. 可获得焦点的元素对屏幕阅读器隐藏，但仍可通过键盘到达。 (ARIA 属性和角色) - [autocomplete 属性必须正确使用](https://www.fixreports.com/zh/issues/autocomplete-valid): WCAG 1.3.5 · AA 级. 某个表单字段使用了浏览器无法识别的 autocomplete 值。 (表单字段缺少标签) - [按钮必须有可辨识的文本](https://www.fixreports.com/zh/issues/button-name): WCAG 4.1.2 · A 级. 部分按钮没有无障碍名称，屏幕阅读器用户只能听到“按钮”。 (缺少名称的链接和按钮) - [元素必须满足最小颜色对比度比率阈值](https://www.fixreports.com/zh/issues/color-contrast): WCAG 1.4.3 · AA 级. 部分文字与背景的区分度不够，低视力用户难以阅读。 (颜色对比度不足) - [页面必须有 元素以帮助导航](https://www.fixreports.com/zh/issues/document-title): WCAG 2.4.2 · A 级. 某个页面没有标题，用户无法分辨自己所在的页面。 (页面标题) - [在 ARIA 和标签中使用的 ID 必须唯一](https://www.fixreports.com/zh/issues/duplicate-id-aria): WCAG 4.1.2 · A 级. 多个元素共用一个用于标注或描述的 id，辅助技术可能会读出错误的标签。 (ARIA 属性和角色) - [框架必须有可访问名称](https://www.fixreports.com/zh/issues/frame-title): WCAG 4.1.2 · A 级. 嵌入的框架（通常是地图、视频或应用小组件）没有标题，屏幕阅读器用户不知道其中包含什么。 (页面结构、标题和地标区域) - [标题级别只应递增一](https://www.fixreports.com/zh/issues/heading-order): 无障碍最佳实践. 标题层级出现跳级（例如从 H2 直接跳到 H4），让屏幕阅读器用户难以理解页面结构。 (页面结构、标题和地标区域) - [<html> 元素必须有一个 lang 属性](https://www.fixreports.com/zh/issues/html-has-lang): WCAG 3.1.1 · A 级. 页面没有声明语言，屏幕阅读器可能会用错误的发音朗读。 (页面语言) - [<html> 元素的 lang 属性必须有一个有效值](https://www.fixreports.com/zh/issues/html-lang-valid): WCAG 3.1.1 · A 级. 页面的语言代码无效，屏幕阅读器无法选择正确的语音。 (页面语言) - [图像必须有替代文本](https://www.fixreports.com/zh/issues/image-alt): WCAG 1.1.1 · A 级. 图片缺少文本替代内容，屏幕阅读器用户无法得知图片显示的内容。 (缺少替代文本的图片) - [输入按钮必须有可辨识的文本](https://www.fixreports.com/zh/issues/input-button-name): WCAG 4.1.2 · A 级. 某个 input 按钮没有文字，屏幕阅读器无法说明它的作用。 (表单字段缺少标签) - [图像按钮必须有替代文本](https://www.fixreports.com/zh/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · A 级. 某个图片按钮没有替代文本，屏幕阅读器无法说明它的作用。 (缺少替代文本的图片) - [表单元素必须有标签](https://www.fixreports.com/zh/issues/label): WCAG 4.1.2 · A 级. 部分表单字段没有标签，屏幕阅读器用户不知道应该输入什么。 (表单字段缺少标签) - [页面应有一个主要 landmark](https://www.fixreports.com/zh/issues/landmark-one-main): 无障碍最佳实践. 页面没有 main 地标区域，屏幕阅读器用户无法直接跳到主要内容。 (页面结构、标题和地标区域) - [链接必须能够不依赖颜色而被区分](https://www.fixreports.com/zh/issues/link-in-text-block): WCAG 1.4.1 · A 级. 段落中的链接只靠颜色区分，无法分辨颜色差异的人会错过它们。 (颜色对比度不足) - [链接必须有可辨识的文本](https://www.fixreports.com/zh/issues/link-name): WCAG 2.4.4, 4.1.2 · A 级. 部分链接没有可供屏幕阅读器朗读的文字，通常是只有图标的链接，例如社交媒体图标或购物车图标。 (缺少名称的链接和按钮) - [不得禁用缩放](https://www.fixreports.com/zh/issues/meta-viewport): WCAG 1.4.4 · AA 级. 页面在手机上禁止双指缩放。 (缩放和重排) - [页面应包含一个一级标题](https://www.fixreports.com/zh/issues/page-has-heading-one): 无障碍最佳实践. 页面没有一级标题。 (页面结构、标题和地标区域) - [所有页面内容应包含在 landmark 中](https://www.fixreports.com/zh/issues/region): 无障碍最佳实践. 部分内容不在页面地标区域（header、nav、main 或 footer）内。 (页面结构、标题和地标区域) - [[role="img"] 元素必须有一个替代文本](https://www.fixreports.com/zh/issues/role-img-alt): WCAG 1.1.1 · A 级. 某个以图片形式呈现的元素没有文本替代内容。 (缺少替代文本的图片) - [可滚动区域必须可以键盘访问](https://www.fixreports.com/zh/issues/scrollable-region-focusable): WCAG 2.1.1 · A 级. 某个滚动区域无法通过键盘到达，键盘用户无法滚动它。 (键盘访问和焦点) - [select 元素必须有一个可访问的名称](https://www.fixreports.com/zh/issues/select-name): WCAG 4.1.2 · A 级. 一个下拉菜单（通常是排序或变体选择器）没有标签。 (表单字段缺少标签) - [有 img 角色的 <svg> 元素必须有一个替代文本](https://www.fixreports.com/zh/issues/svg-img-alt): WCAG 1.1.1 · A 级. 某个传达信息的 SVG 图片没有文本替代内容。 (缺少替代文本的图片) - [所有触摸目标的大小必须为 24px，或留出足够的空间](https://www.fixreports.com/zh/issues/target-size): WCAG 2.5.8 · AA 级. 部分点按目标小于 24 × 24 像素且彼此距离太近，在手机上很难点中。 (键盘访问和焦点)