前言
对于许多人来说,互联网和数字世界已成为重要的沟通和交流平台。但是对于一些身体上或认知上存在障碍的用户来说,这些平台的使用可能会带来挑战。因此,为了确保所有用户都能平等获得信息和服务,无障碍设计就显得尤为重要了。
ARIA(Accessible Rich Internet Applications)即无障碍富互联网应用程序,是一种用于设计和构建残障人士友好的富互联网应用程序的技术规范。本文将探讨 ARIA 的不同组件类型及其使用示例,帮助开发者更好地理解和实现无障碍设计。
ARIA 控件分类
ARIA 控件可分为四类:表单控件、状态和属性、结构控件和焦点控制。下面分别介绍这四类控件以及其使用示例。
表单控件
表单控件是用于构建表单的组件,包括输入框、单选框、多选框、下拉框等等。
输入框
输入框是添加信息的主要控件。使用 ARIA 的属性 aria-label
可以增加一个文本标签,以帮助屏幕阅读器更好地识别输入框。
<label for="username">用户名:</label> <input type="text" id="username" name="username" aria-label="输入用户名">
单选框
单选框是用于给用户提供多个选择项,但只允许选中其中一个选项的控件。使用 ARIA 的属性 aria-checked
可以表示单选框是否选中。
<label for="gender-male">男</label> <input type="radio" id="gender-male" name="gender" aria-checked="true"> <label for="gender-female">女</label> <input type="radio" id="gender-female" name="gender" aria-checked="false">
多选框
多选框是用于给用户提供多个选择项,并允许选中其中多个选项的控件。使用 ARIA 的属性 aria-checked
可以表示多选框是否选中。
<label for="color-red">红色</label> <input type="checkbox" id="color-red" name="color" aria-checked="true"> <label for="color-blue">蓝色</label> <input type="checkbox" id="color-blue" name="color" aria-checked="false">
下拉框
下拉框是用于给用户提供多个选项,并允许用户从中选择一个选项的控件。使用 ARIA 的属性 aria-expanded
可以表示下拉框是否被展开,aria-selected
可以表示当前选中的选项。
<label for="city">城市</label> <select id="city" name="city" aria-expanded="false" aria-selected="1"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select>
状态和属性
状态和属性是用于描述控件当前状态和属性的组件,包括 aria-disabled
、aria-hidden
等。
aria-hidden
使用属性 aria-hidden
可以将元素标记为屏幕阅读器无需阅读的元素。例如,下面的 div 元素就是不需要被屏幕阅读器阅读的。
<div aria-hidden="true">这个 div 元素不需要被屏幕阅读器阅读。</div>
aria-disabled
使用属性 aria-disabled
可以将元素标记为被禁用的元素。被禁用的元素无法接受用户输入。
<button aria-disabled="true">这个按钮被禁用了。</button>
结构控件
结构控件是一些基于 HTML 文档结构和语义的组件,例如面包屑、导航栏等。
面包屑
面包屑是一种导航机制,用户可以从面包屑中看到当前页面所属的层次结构。使用 ARIA 的属性 aria-current
可以指定当前页面对应的面包屑的状态。
<nav aria-label="面包屑" role="navigation"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li aria-current="page">Books</li> </ol> </nav>
导航栏
导航栏是一种常见的网站菜单。使用 role
属性可以将元素标记为导航栏,使用 aria-label
可以为导航栏添加文本标签。
<nav role="navigation" aria-label="主导航栏"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav>
焦点控制
焦点控制是一种通过键盘控制焦点移动的组件。使用 tabindex
属性可以将元素添加到键盘焦点顺序中。
<button tabindex="0">这个按钮可以通过键盘控制焦点。</button>
总结
无障碍设计旨在确保所有用户都能轻松使用互联网和数字服务,并获得平等的服务体验。ARIA 是一种用于设计和构建残障人士友好的富互联网应用程序的技术规范。本文中,我们详细介绍了 ARIA 的不同控件类型及其使用示例,希望能帮助开发者更好地实现无障碍设计,以更好地服务于所有用户。
参考资料:
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647586a2968c7c53b028f7b7