在构建网站或应用程序时，考虑到无障碍性是非常重要的。HTML5 提供了一些特性，以帮助我们为残障人士提供更好的用户体验。在本文中，我们将介绍 25 种最佳实践，以实现 HTML5 无障碍特性。
1. 使用语义化标记
使用语义化标记可以提高网站的可读性和可访问性。语义化标记不仅可以让屏幕阅读器更容易理解网站的内容，还可以提高搜索引擎优化（SEO）的效果。
-- -------------------- ---- ------- ---- ----- --- ---- ---------------- ---- --------------- ------------- ------ ---- ---------------- ----------- ------ ------ ---- ----- --- --------- -------- ------------- --------- --------- ----------- ---------- ----------展开代码
2. 使用 alt 属性
为图像添加 alt 属性可以帮助屏幕阅读器用户理解图像的内容。如果图像是链接，alt 属性还可以提供更好的可访问性。
<!-- 错误的示例 --> <img src="example.jpg"> <!-- 正确的示例 --> <img src="example.jpg" alt="这是一个示例图像">
3. 使用标题标记
使用标题标记可以帮助屏幕阅读器用户快速浏览网页的结构。请确保标题标记按正确的顺序使用，以确保网页的结构正确。
-- -------------------- ---- ------- ---- ----- --- ----- -------------- -------------- -------------- ------ ---- ----- --- ------------ ------------ ------------展开代码
4. 避免使用纯 CSS 图像
纯 CSS 图像可能无法被屏幕阅读器识别。请使用实际的图像，并为其添加 alt 属性。
/* 错误的示例 */ div { background: url(example.jpg); } /* 正确的示例 */ <img src="example.jpg" alt="这是一个示例图像">
5. 使用表单标记
使用表单标记可以帮助屏幕阅读器用户理解表单的目的和使用方法。请为表单元素添加标签，并使用 label 元素将标签与表单元素关联起来。
-- -------------------- ---- ------- ---- ----- --- ----- -------------- ------ ------------ ------ ---- ----- --- ------ -------------------------- ------ ----------- --------------展开代码
6. 使用 ARIA 标准
ARIA（Accessible Rich Internet Applications）是一种用于增强用户体验的技术标准。使用 ARIA 标准可以帮助屏幕阅读器用户更好地理解网页的结构和功能。
<!-- 错误的示例 --> <div role="button" onclick="alert('点击了按钮')">按钮</div> <!-- 正确的示例 --> <button onclick="alert('点击了按钮')">按钮</button>
7. 使用 aria-label 属性
使用 aria-label 属性可以为没有文本标签的元素提供描述。请确保描述足够详细，以帮助屏幕阅读器用户理解元素的用途。
<!-- 错误的示例 --> <button>删除</button> <!-- 正确的示例 --> <button aria-label="删除文章">删除</button>
8. 使用 aria-labelledby 属性
使用 aria-labelledby 属性可以将元素与描述元素关联起来。请确保描述元素存在，并使用唯一的 ID 标识符。
-- -------------------- ---- ------- ---- ----- --- ---- ----------------- ----------------------------------- ---- -------------------------------- --------------- ------ ---- ----- --- ---- ----------------- ----------------------------------- --- ------------------------------- --------------- ------展开代码
9. 使用 tabindex 属性
使用 tabindex 属性可以为非链接元素添加键盘焦点。请确保 tabindex 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div onclick="alert('点击了元素')">元素</div> <!-- 正确的示例 --> <div onclick="alert('点击了元素')" tabindex="0">元素</div>
10. 使用 WAI-ARIA 规范
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一个用于增强用户体验的规范。使用 WAI-ARIA 规范可以帮助屏幕阅读器用户更好地理解网页的结构和功能。
<!-- 错误的示例 --> <div role="button" onclick="alert('点击了按钮')">按钮</div> <!-- 正确的示例 --> <button aria-role="button" onclick="alert('点击了按钮')">按钮</button>
11. 使用 fieldset 和 legend 标记
使用 fieldset 和 legend 标记可以帮助屏幕阅读器用户理解表单的结构和用途。请为每个表单元素添加标签，并使用 label 元素将标签与表单元素关联起来。
-- -------------------- ---- ------- ---- ----- --- ----- -------------- ------ ------------ ------ ----- ------------- ------ ---------------- ------ ---- ----- --- ---------- --------------------- ------ -------------------------- ------ ----------- -------------- ------ ------------------------- ------ --------------- -------------- -----------展开代码
12. 使用 title 属性
使用 title 属性可以为元素提供描述。请确保描述足够详细，以帮助屏幕阅读器用户理解元素的用途。
<!-- 错误的示例 --> <a href="example.html">链接</a> <!-- 正确的示例 --> <a href="example.html" title="查看示例页面">链接</a>
13. 使用 aria-describedby 属性
使用 aria-describedby 属性可以将元素与描述元素关联起来。请确保描述元素存在，并使用唯一的 ID 标识符。
<!-- 错误的示例 --> <input type="text" placeholder="请输入邮箱地址"> <!-- 正确的示例 --> <input type="text" aria-describedby="email-description" placeholder="请输入邮箱地址"> <div id="email-description">请填写您的电子邮件地址</div>
14. 使用 tabindex="-1" 属性
使用 tabindex="-1" 属性可以将元素从键盘焦点序列中排除。请确保 tabindex 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div onclick="alert('点击了元素')" tabindex="0">元素</div> <!-- 正确的示例 --> <div onclick="alert('点击了元素')" tabindex="-1">元素</div>
15. 使用块级元素
使用块级元素可以帮助屏幕阅读器用户理解网页的结构。请确保块级元素按正确的顺序使用，以确保网页的结构正确。
-- -------------------- ---- ------- ---- ----- --- ---------------- ---------------- ---------------- ---- ----- --- ----- ---------- ---------- ---------- ------展开代码
16. 使用 tabindex="0" 属性
使用 tabindex="0" 属性可以为元素添加键盘焦点。请确保 tabindex 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div onclick="alert('点击了元素')">元素</div> <!-- 正确的示例 --> <div onclick="alert('点击了元素')" tabindex="0">元素</div>
17. 使用元数据标记
使用元数据标记可以帮助屏幕阅读器用户理解网页的结构和内容。请确保元数据标记按正确的顺序使用，以确保网页的结构正确。
-- -------------------- ---- ------- ---- ----- --- ----- -------------- -------------- -------------- ------ ---- ----- --- -------- ----- ---- ------ --------------------- ------ --------------------- ------ --------------------- ----- ------ --------- ------ --------- -------- ------------- ------------ --------------------- --------- --------- ----------- ---------- ---------- ------- -------- ------- - -------- ---------展开代码
18. 使用 aria-hidden 属性
使用 aria-hidden 属性可以将元素从屏幕阅读器中排除。请确保 aria-hidden 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div>元素</div> <!-- 正确的示例 --> <div aria-hidden="true">元素</div>
19. 使用 role 属性
使用 role 属性可以为元素添加语义。请确保 role 值正确，以确保屏幕阅读器用户可以更好地理解元素的用途。
<!-- 错误的示例 --> <div onclick="alert('点击了元素')">元素</div> <!-- 正确的示例 --> <button role="button" onclick="alert('点击了按钮')">按钮</button>
20. 使用 aria-live 属性
使用 aria-live 属性可以将元素标记为动态区域，以便屏幕阅读器可以即时通知用户内容的更改。请确保 aria-live 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div>新消息：1</div> <!-- 正确的示例 --> <div aria-live="polite">新消息：1</div>
21. 使用 aria-disabled 属性
使用 aria-disabled 属性可以将元素标记为禁用状态。请确保 aria-disabled 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <button onclick="alert('点击了按钮')">按钮</button> <!-- 正确的示例 --> <button onclick="alert('点击了按钮')" aria-disabled="true">按钮</button>
22. 使用 aria-selected 属性
使用 aria-selected 属性可以将元素标记为已选中状态。请确保 aria-selected 值正确，以确保用户可以按正确的顺序导航。
-- -------------------- ---- ------- ---- ----- --- ---- ------------ ------------ ------------ ----- ---- ----- --- ---- --- ----------------------------- ------------ ------------ -----展开代码
23. 使用 aria-haspopup 属性
使用 aria-haspopup 属性可以将元素标记为包含弹出菜单或下拉菜单的元素。请确保 aria-haspopup 值正确，以确保用户可以按正确的顺序导航。
<!-- 错误的示例 --> <div onclick="alert('点击了元素')">元素</div> <!-- 正确的示例 --> <button onclick="alert('点击了按钮')" aria-haspopup="true">按钮</button>
24. 使用 aria-expanded 属性
使用 aria-expanded 属性可以将元素标记为已展开或已折叠状态。请确保 aria-expanded 值正确，以确保用户可以按正确的顺序导航。
-- -------------------- ---- ------- ---- ----- --- ---- ------------------ --------------- --------------- ------ ---- ----- --- ---- ------------------ ------------- ---- -------------------------------- ------展开代码
25. 使用 aria-controls 属性
使用 aria-controls 属性可以将元素与控制元素关联起来。请确保控制元素存在，并使用唯一的 ID 标识符。
<!-- 错误的示例 --> <button onclick="document.getElementById('menu').style.display='block'">显示菜单</button> <div id="menu">菜单内容</div> <!-- 正确的示例 --> <button aria-controls="menu" aria-expanded="false" onclick="document.getElementById('menu').style.display='block'">显示菜单</button> <div id="menu" style="display:none">菜单内容</div>
结论
在本文中，我们介绍了 25 种最佳实践，以实现 HTML5 无障碍特性。这些实践涵盖了许多方面，包括语义化标记、alt 属性、标题标记、ARIA 标准等。我们希望这些实践对您有所帮助，并使您的网站或应用程序更具可访问性和用户友好性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767dd0d98e3e1ab1a7c0135
