这里有一个无障碍网络开发检查单-请你查收

无障碍网络的好处

世界上大约 16%的人口患有某种残疾，但只有 3%的网络可供残疾人使用。我们不仅应该努力适应这部分人群，而且无障碍网络对非残疾人也非常有帮助。考虑老年人、互联网连接速度慢的人，或者行动不便的人（手臂骨折等）。

是时候让无障碍网络让更多的人了解，而作为前端工程师的我们，正是可以为此做出贡献的人。

让我们深入了解最常见、最重要的无障碍检查点及其实施方法。

交互元素应该获得键盘焦点 。使用键盘导航时，按钮、可点击的卡片、复选框、选项卡等应突出显示。添加tabindex以允许元素通过 Tab 键获得焦点，并且不要忘记为:hover、:focus和:active添加 CSS 样式。
没有href的锚点应该接收键盘焦点 。除了锚点元素之外，这个规则与上面几乎相同在<a>上。根据浏览器的不同，您会发现即使没有，也可以使用键盘选择锚点tabindex，但没有 href 则不能。添加tabindex到所有锚点。
工具提示应该接收键盘焦点。工具提示通常提供额外的信息，当鼠标悬停在组件上时通常可以访问这些信息。我们需要确保当锚元素处于焦点时也显示工具提示。

标志性区域应明确界定 。网页应分为单独的标志性区域，每个区域都有明确的角色。识别网页的逻辑结构，分配并标记区域。
页面结构应该按语义进行标记 。与上述相关，使用main, nav, footer, header, section,aside来标记网页。

表格应该有表格标题 。不要忘记向表格添加th标签。
表单字段和视觉标签应该相关联 。将aria-label或aria-labelby添加到输入元素。
错误消息应与输入字段相关联 。输入错误消息应与其控件相关联。添加aria-describedby或area-label到错误消息如果其显示在标签中。
标题应该按语义进行标记 。使用从 h1 开始的标题标签，并确保它们按重要性顺序排列。例如，避免将 h3 放在 <nav> 中，将 h1 放在 <main> 中。
不应跳过标题级别 。与上面相关，不要将 <h3> 在语义上直接放在 <h1> 下。
列表应该按语义进行标记。这包括有序列表、无序列表和描述列表。

Bad：

html 复制代码

<ul>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</ul>

Good：

htmo 复制代码

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

常规文本应该有足够的对比度 。不要将红色文字放在绿色背景上！在文本和背景颜色之间使用足够的对比度，使视力低下或色盲的人可以阅读内容。
应该支持动态文本调整大小 。当用户在浏览器设置中将字体大小设置为 200% 时，网页字体应自动缩放，而不会丢失内容或功能。避免硬编码大小单位 ，例如px使用em和%来代替。

页面应该有描述性标题 。利用<title>标签。不仅仅是出于可访问性的原因，它也是改善 SEO 的关键工具之一。
iFrame 应该有描述性标题。iFrame 是页面中的页面，同样的规则也适用于它。
<html>标签应该有lang属性 。它可以帮助屏幕阅读器使用正确的发音。如果您网站的某些部分使用不同的语言，也应向相应的元素添加lang属性。
角色：ARIA 角色定义元素的类型及其用途。角色可用于指示元素是否是button、link、manu、input或其他交互式组件。例如，role="button"可以添加到<div>元素以传达其功能为按钮。
标签。交互元素内部应该有可访问的名称aria-label
不应使用 aria-hidden 不适当地抑制元素语义。避免从可访问性树中隐藏元素；如果需要，可使用 CSS 样式通过改变不透明度或可见性使元素不可见。
图像应该有 alt 属性 。你是否曾经遇到过网络连接缓慢的情况，并面对一个白色方块，想知道那是什么？添加alt属性，以便文本阅读器可以轻松识别图像。

事实上，网页或应用程序越大，就越需要花费更多精力来查找和解决这些问题。

幸运的是，有一些优秀的工具可以快速启动这个过程。

WAVE：一款免费的在线工具，可提供有关网络内容可访问性的视觉反馈、突出显示潜在问题并提供改进建议。
ax DevTools：适用于 Google Chrome 和 Firefox 的辅助功能测试扩展，可以直接在浏览器的开发人员工具中使用。
Pa11y：一种开源自动化可访问性测试工具，您可以从命令行运行或集成到 CI/CD 管道中。
Lighthouse 可访问性审核：Lighthouse 非常适合快速获取可访问性洞察，可与 Google Chrome 开发工具一起使用，并检查突出显示提高 Web 应用程序可访问性的机会。

自动化工具对于识别许多常见的无障碍问题很有价值，但要充分了解和解决残障人士的用户体验问题，通常还需要进行手动测试。将自动测试和手动测试结合起来，并致力于持续的无障碍性，是维护无障碍网页的关键。