无障碍性是指网站或应用程序将每个人都纳入其用户体验，无论他们是否有身体、听力、视力或认知障碍。在今天越来越注重用户体验的环境下，实现无障碍性是一个非常重要的领域。如何在前端工作中实现无障碍呢？这篇文章将介绍如何使用 ARIA role 属性提高无障碍性。
什么是 ARIA？
ARIA 是 Accessible Rich Internet Applications 的缩写，意思是无障碍丰富的互联网应用程序。ARIA 规范为纯 HTML 应用程序提供了一种扩展机制，以帮助开发人员创建访问性更好、更易于阅读和理解的应用程序。
ARIA role 属性是什么？
ARIA roles 是一组属性，它们为编写无障碍 Web 内容提供了一种机制。通过将角色属性添加到 HTML 标记中，我们可以向屏幕阅读器告诉页面元素或组件的用途或意义。
为什么要使用 ARIA role？
虽然 HTML 标记语言提供了“语义化”标记的概念，但它并不足以提供与人类用户的交互所需的所有上下文和含义。ARIA 规范允许开发人员在 HTML 标记中指定特定角色，并将页面元素视为适当上下文中的一部分。
ARIA 角色属性是 Web 内容无障碍性文档格式的重要组成部分。 通过使用 ARIA roles，开发人员可以让屏幕阅读器读取屏幕上的元素的含义和用途，从而使用户更容易使用 Web 应用程序。
ARIA role 属性的使用
按钮
<button aria-label="play button example" role="button"> Play </button>
<button> 元素将自动具有默认的 button 角色，但是你可以在这个元素上添加 role 属性来显式地定义它按照其它的角色。例如，设置 role="link" 是为了让它作为一个链接而不是按钮，同时，我们可以使用 aria-label 属性为元素添加描述。
菜单
-- -------------------- ---- ------- ---- ------------------ --- ------------ --- ---------- ---------------- -------- ----------------------------- --- ---------- ---------------- -------- --------------------------------- --- ---------- ---------------- -------- --------------------------------- --- ---------- ---------------- -------- ----------------------------- --- ---------- ---------------- -------- ----------------------- ----------- ----- ------展开代码
对于下拉菜单，我们可以使用 role="menu" 和 role="menuitem" 为无障碍性提供帮助。可以通过添加 role="none presentation" 来从无障碍性上忽略某些元素，如添加 ul 元素的列表项外层。
图片
<img src="/image/example.jpg" role="img" alt="This is example image" />
在 <img> 元素上使用 role 属性，为图片添加描述，帮助屏幕阅读器用户更好地理解它是什么。同时，在 alt 属性中使用描述性的文本，而不仅仅是重复文件名或标题。
模态框
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" tabindex="-1"> <h2 id="modal-title">Modal Title</h2> <div id="modal-content"> <p>This is modal content.</p> </div> <button id="modal-close" aria-label="Close this modal" type="button">Close</button> </div>
在模态框对话框中，使用 role="dialog" 属性表示这是一个对话框，而 aria-modal="true" 可以通知屏幕阅读器该对话框是一个控制焦点的模态对话框。在这个例子中，还通过 tabindex="-1" 使其成为在没有被 JavaScript 手动聚焦的情况下被访问的唯一方式。
Conclusion
通过使用 ARIA roles，开发人员可以提升网站或应用程序的无障碍性。Aria 角色属性可以帮助开发人员通过 HTML 标记和语言机制使页面元素更易理解，并向屏幕阅读器告知页面元素或组件的用途或意义。还应该明确了解 WAI-ARIA 规范、开发适合所有人使用的网站、构建文档结构时考虑语义化标记。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c179ef314edc26849b22c7
