文章目录
- 前言
- 一、什么是 ARIA？
- 二、ARIA 的核心概念
- 三、如何正确使用 ARIA 属性
- 四、实际案例分析
- 结语
前言
随着互联网的普及和技术的发展，确保网页对所有用户都是可访问的变得越来越重要。这不仅符合道德责任，也是法律要求的一部分（例如，在美国，《美国残疾人法案》要求网站必须是无障碍的）。WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一套技术标准，旨在提高动态内容和高级用户界面控件在辅助技术中的可访问性。
一、什么是 ARIA？
WAI-ARIA 是由 W3C（World Wide Web Consortium）开发的一组属性，用于增强网页和应用程序的可访问性。这些属性可以添加到 HTML 元素中，帮助屏幕阅读器和其他辅助技术理解页面上复杂的用户界面组件，如滑块、菜单、模态对话框等。ARIA 的主要目的是填补现有 HTML 标签语义不足的地方，使网页内容更加丰富和交互性强，同时保持可访问性。
二、ARIA 的核心概念
ARIA 主要通过三个核心概念来实现其目标：角色（Roles）、状态（States）和属性（Properties）。
- 角色（Roles）
- 角色定义了元素的基本类型或功能。每个角色都有其特定的用途和预期行为。常见的角色包括：
- Landmark Roles：用于标识页面的主要部分，如
banner、navigation、main、complementary、contentinfo等。 - Widget Roles：用于描述交互式组件，如
button、checkbox、combobox、menu、menubar、option、progressbar、radio、slider、spinbutton、tab、tabpanel等。 - Document Structure Roles：用于描述文档结构，如
article、heading、list、listitem、definition等。 - Live Region Roles：用于实时更新的内容区域，如
alert、log、marquee、status等。
- Landmark Roles：用于标识页面的主要部分，如
- 角色定义了元素的基本类型或功能。每个角色都有其特定的用途和预期行为。常见的角色包括：
- 状态（States）
- 状态描述了元素的当前条件，可以随用户的交互而改变。状态通常用于动态更新元素的状态信息，以便辅助技术能够及时通知用户。常见的状态包括：
aria-checked：表示复选框或单选按钮是否被选中。aria-expanded：表示一个可展开/折叠的元素当前是展开还是折叠。aria-selected：表示选项是否被选中。aria-pressed：表示按钮是否被按下。aria-busy：表示元素是否正在处理某些任务。aria-disabled：表示元素是否被禁用。
- 状态描述了元素的当前条件，可以随用户的交互而改变。状态通常用于动态更新元素的状态信息，以便辅助技术能够及时通知用户。常见的状态包括：
- 属性（Properties）：
- 属性提供了关于元素的额外信息，这些信息不会因用户操作而变化。属性通常用于提供静态的信息，帮助辅助技术更好地理解元素的功能和用途。常见的属性包括：
- aria-label：为元素提供一个明确的文本标签，特别是在没有可见文本标签的情况下。
aria-labelledby：指定一个或多个元素作为当前元素的标签。aria-describedby：指定一个或多个元素作为当前元素的描述。aria-valuenow、aria-valuemin、aria-valuemax：用于滑块或其他数值输入控件，表示当前值、最小值和最大值。aria-controls：表示当前元素控制的其他元素。aria-owns：表示当前元素拥有其他元素，即使这些元素不在 DOM 树的层次结构中。aria-live：表示元素的内容何时需要实时更新，值可以是off、polite或assertive。
- 属性提供了关于元素的额外信息，这些信息不会因用户操作而变化。属性通常用于提供静态的信息，帮助辅助技术更好地理解元素的功能和用途。常见的属性包括：
三、如何正确使用 ARIA 属性
- 优先使用语义化 HTML
- 在可能的情况下，首先尝试使用具有固有语义的 HTML 标签。例如，使用
<button>而不是带有role="button"的<div>或<span>。 - 语义化的 HTML 不仅对可访问性有益，还提高了代码的可读性和维护性。
<button>Click me</button> - 在可能的情况下，首先尝试使用具有固有语义的 HTML 标签。例如，使用
- 确保 ARIA 属性与实际行为一致
- 如果你为某个元素指定了一个特定的角色或状态，那么这个元素的行为必须与该角色或状态相匹配。例如，如果一个元素被赋予了
role="slider"，它就应该能够响应键盘导航并支持相应的 ARIA 属性，如aria-valuemin和aria-valuemax。
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div> - 如果你为某个元素指定了一个特定的角色或状态，那么这个元素的行为必须与该角色或状态相匹配。例如，如果一个元素被赋予了
- 避免过度使用 ARIA
- 只在必要时使用 ARIA。过度使用或错误使用 ARIA 属性可能会导致混淆，甚至降低可访问性。
- 例如，不要在普通的链接上使用
role="link"，因为<a>标签已经具有这种语义。
<!-- 正确 --> <a href="#">Link</a><!-- 错误 --> <div role="link" href="#">Link</div> - 使用
aria-hidden隐藏非相关内容- 有时，页面上的某些内容对视觉用户是有用的，但对于屏幕阅读器用户来说可能是多余的或干扰的。在这种情况下，可以使用
aria-hidden="true"来隐藏这些内容。
<img src="logo.png" alt="Company Logo" aria-hidden="true"> - 有时，页面上的某些内容对视觉用户是有用的，但对于屏幕阅读器用户来说可能是多余的或干扰的。在这种情况下，可以使用
- 使用
aria-live实现实时更新- 对于动态更新的内容，如通知、错误消息等，可以使用
aria-live属性来实现实时更新，确保屏幕阅读器用户能够及时获取这些信息。
<div id="alerts" aria-live="polite" aria-atomic="true"></div> <script>document.getElementById('alerts').textContent = 'Your order has been placed successfully.'; </script> - 对于动态更新的内容，如通知、错误消息等，可以使用
- 确保键盘可访问性
- 许多 ARIA 组件需要键盘导航才能完全可用。确保所有交互式元素都可以通过键盘访问，并且焦点管理得当。
<button onclick="alert('Button clicked!')">Click me</button> <div role="button" tabindex="0" onclick="alert('Div clicked!')">Click me</div> - 测试和验证
- 使用屏幕阅读器等辅助技术进行测试，确保你的网页对所有用户都友好且易于使用。
- 利用在线工具和服务来检查 ARIA 属性的正确性和一致性。一些常用的工具包括：
- WAVE Web Accessibility Evaluation Tool：一个在线工具，可以检测网页的可访问性问题。
- axe-core：一个开源的 JavaScript 库，可以集成到自动化测试中，检测可访问性问题。
- Chrome DevTools：现代浏览器的开发者工具通常包含可访问性审计功能，可以帮助你发现和修复问题。
四、实际案例分析
假设我们有一个复杂的滑块控件，需要支持屏幕阅读器用户。我们可以使用以下 ARIA 属性来增强其可访问性：
<div id="slider" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0" onkeydown="handleKeydown(event)"><div class="track"></div><div class="thumb" style="left: 50%;"></div>
</div><script>
function handleKeydown(event) {const slider = document.getElementById('slider');let value = parseInt(slider.getAttribute('aria-valuenow'));switch (event.key) {case 'ArrowLeft':value = Math.max(value - 1, parseInt(slider.getAttribute('aria-valuemin')));break;case 'ArrowRight':value = Math.min(value + 1, parseInt(slider.getAttribute('aria-valuemax')));break;default:return;}slider.setAttribute('aria-valuenow', value);slider.querySelector('.thumb').style.left = `${value}%`;
}
</script>
在这个例子中，我们使用了 role="slider" 来定义滑块的角色，并使用 aria-valuemin、aria-valuemax 和 aria-valuenow 来定义滑块的范围和当前值。此外，我们还使用了 tabindex="0" 使滑块可以通过键盘访问，并添加了一个 onkeydown 事件处理器来处理键盘导航。
结语
通过合理地应用 ARIA 属性，开发者可以显著提高网页的可访问性，让更多的用户能够顺畅地浏览和使用网页内容。然而，重要的是要记住，ARIA 应该作为语义化 HTML 的补充，而不是替代品。始终遵循最佳实践，并持续测试，以确保所有用户都能获得良好的体验。通过这些方法，我们可以创建更加包容和友好的网络环境，使每个人都能平等地享受互联网带来的便利。
