如何为HTML通知消息添加可访问性？-html教程-PHP中文网

要让html通知消息对所有用户都可访问，核心在于使用wai-aria的实时区域（live regions）机制。1. 使用role属性定义通知类型：role="alert"用于紧急信息，role="status"用于非紧急状态更新，role="log"用于日志类信息。2. 配合aria-live属性控制播报优先级：aria-live="assertive"立即打断当前播报，aria-live="polite"在空闲时播报。3. 设置aria-atomic="true"确保播报完整内容，避免理解偏差。4. 保持默认的aria-relevant="all"以涵盖所有变化类型。此外，还需注意视觉设计、对比度、文案清晰度、一致位置、显示时长、手动关闭功能及真实环境测试，确保全面可访问性。

如何为HTML通知消息添加可访问性？

要让HTML通知消息对所有用户都可访问，核心在于确保辅助技术，尤其是屏幕阅读器，能够及时、准确地感知并播报这些动态出现的信息。这不仅仅是视觉上的呈现，更是信息传递的完整性问题，需要我们主动地去“告诉”辅助设备这里发生了变化。

解决方案

为HTML通知消息添加可访问性，最直接且有效的方法是利用WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）规范中的实时区域（Live Regions）。这套机制允许开发者声明页面上的某个区域是动态变化的，当其内容更新时，辅助技术会自动检测并播报，而无需用户主动聚焦。

具体操作上，你需要创建一个HTML元素来承载通知消息，并为其添加role属性和aria-live属性。

立即学习“前端免费学习笔记（深入）”；

role属性：
- role="status"：用于非紧急但重要的状态更新，比如“文件已保存”、“商品已加入购物车”。屏幕阅读器会以非打断的方式在空闲时播报。
- role="alert"：用于紧急、需要用户立即关注的错误或警告，比如“密码错误”、“会话已过期”。屏幕阅读器会立即打断当前播报并播报此消息。
- role="log"：用于历史记录或日志信息，如聊天消息、游戏事件流。它更像是一个持续更新的列表。
aria-live属性：
- aria-live="polite"：这是role="status"和role="log"的默认行为。屏幕阅读器会在用户完成当前任务或播报完当前内容后，再播报实时区域内的更新。
- aria-live="assertive"：这是role="alert"的默认行为。屏幕阅读器会立即打断当前播报，优先播报实时区域内的更新。
aria-atomic属性：当实时区域内容更新时，屏幕阅读器是播报整个区域的内容，还是只播报变化的部分？
- aria-atomic="true"：播报整个实时区域的内容。
- aria-atomic="false"：只播报变化的部分（默认值）。通常建议设置为true，以确保用户获取完整上下文。
aria-relevant属性：定义哪些类型的变化会触发播报。
- additions：当内容被添加时。
- removals：当内容被移除时。
- text：当文本内容发生变化时。
- all：所有类型变化都触发（默认值）。

一个典型的例子是：

<div id="notification-area" role="status" aria-live="polite" aria-atomic="true">
    <!-- 通知消息会动态插入到这里 -->
</div>

<script>
    function showNotification(message, type = 'status') {
        const notificationArea = document.getElementById('notification-area');
        notificationArea.setAttribute('role', type === 'alert' ? 'alert' : 'status');
        notificationArea.setAttribute('aria-live', type === 'alert' ? 'assertive' : 'polite');

        // 清空旧内容，确保新内容被完整播报
        notificationArea.innerHTML = ''; 
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationArea.appendChild(messageElement);

        // 如果通知不是持续性的，可以设置一个延时来清空
        if (type !== 'log') { // log类型的通知可能需要持续显示
            setTimeout(() => {
                notificationArea.innerHTML = '';
            }, 5000); // 5秒后清除
        }
    }

    // 示例调用
    // showNotification('您的设置已保存。', 'status');
    // showNotification('错误：请输入有效邮箱地址。', 'alert');
</script>

登录后复制

这里有个小细节，动态更新role和aria-live可能在某些旧版屏幕阅读器上表现不佳，更稳妥的做法是为不同类型的通知预设不同的实时区域，或者在通知出现时，动态创建一个新的元素并插入到预设的实时区域中。但对于大多数现代浏览器和屏幕阅读器，上述方法是可行的。

为什么常规的HTML元素不足以满足通知的可访问性需求？

你可能会想，我直接把一个<div>或者<span>的内容改掉不就行了？屏幕阅读器难道检测不到吗？答案是：检测得到，但它不会“主动”播报，或者说，它不会意识到这是一个需要立即引起用户注意的“通知”。

常规的HTML元素，例如一个普通的<div>，它们是“静态”的，或者说，它们的内容变化不会被辅助技术视为一个需要立即播报的事件。屏幕阅读器通常是根据用户的操作（比如Tab键导航、方向键浏览）或者页面的初始加载来解析和播报内容的。当一个通知消息突然在页面某个角落出现时，屏幕阅读器并不知道它的存在，除非用户恰好导航到那个位置，或者页面发生了完整的重绘。

这就像你在一个安静的房间里，有人在你面前放了一张纸条。你可能不会立刻发现，除非你抬头去看。但如果有人在你耳边轻声说了一句，或者大声喊了一声，你就会立即注意到。ARIA实时区域就是那个“耳边的声音”或“大声喊叫”。它改变了辅助技术处理动态内容的方式，让它们能够“监听”特定区域的变化，并在变化发生时主动告知用户，而不是被动等待用户发现。

如果没有实时区域，一个视力障碍用户可能在提交表单后，页面上出现了一个“保存成功”的提示，但他却毫不知情，因为屏幕阅读器没有播报。他可能会以为操作失败了，或者重复提交。这种用户体验是灾难性的，因为它阻碍了信息流的顺畅，甚至可能导致用户误操作。

如何选择合适的ARIA live region角色和属性？

选择正确的ARIA实时区域角色和属性，是确保通知消息既能被辅助技术播报，又不至于过度打扰用户的关键。这有点像给信息分级，哪些是“紧急警报”，哪些是“背景信息”。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

role="alert" (或 aria-live="assertive")：
- 适用场景： 任何需要用户立即关注并可能需要采取行动的错误、警告或关键信息。比如：
  - 表单验证失败：“请输入有效的邮箱地址。”
  - 系统错误：“服务器连接中断，请稍后再试。”
  - 会话过期：“您的会话已过期，请重新登录。”
- 特点： 屏幕阅读器会立即中断当前正在播报的内容，转而播报此通知。这可能会打断用户的思考或操作流程，所以务必谨慎使用，只用于真正紧急的情况。滥用assertive会导致用户体验极差，因为他们会不断被打断。
role="status" (或 aria-live="polite")：
- 适用场景： 非紧急但重要的状态更新，用户无需立即采取行动，但了解这些信息有助于理解当前系统状态。比如：
  - 操作成功提示：“您的设置已保存。”
  - 加载状态：“数据正在加载中…”
  - 购物车更新：“商品已添加到购物车。”
- 特点： 屏幕阅读器会在用户完成当前任务（例如，播报完当前焦点元素的内容）后，再播报此通知。它不会打断用户，是一种更“礼貌”的通知方式。这是最常用的实时区域类型，因为它提供了必要的信息，同时又不会过度干扰。
role="log"：
- 适用场景： 持续更新的、历史性的信息流，比如聊天消息、游戏事件日志、构建过程的输出。
- 特点： 类似于polite，屏幕阅读器会在不打断用户的情况下播报新增内容。它特别适用于那些用户可能希望回顾但不需要立即响应的连续信息。
aria-atomic="true" vs. aria-atomic="false"：
- aria-atomic="true"： 当实时区域内的内容发生变化时，屏幕阅读器会播报整个区域的完整内容。
  - 建议： 大多数情况下，建议设置为true。这确保了用户在每次更新时都能获得完整的上下文，避免了只播报变化部分可能导致的理解偏差。例如，如果你的通知区域是“商品X已加入购物车”，然后更新为“商品Y已加入购物车”，如果aria-atomic="false"，屏幕阅读器可能只播报“Y已加入购物车”，用户可能会疑惑“X”去哪了。设置为true则会完整播报“商品Y已加入购物车”。
- aria-atomic="false"： 屏幕阅读器只会播报实时区域内发生变化的部分。
  - 适用场景： 极少数情况下，当你确定用户只需要知道增量变化时。但这很容易造成信息不完整。
aria-relevant：
- 通常，保持默认值all（即对所有内容变化都触发播报）就足够了。只有在非常特定的场景下，你才可能需要将其限制为additions、removals或text。例如，一个只关心新增聊天消息的日志区域，你可能只设置为additions。

记住，没有一劳永逸的解决方案。最佳实践是根据通知的性质、紧急程度以及对用户操作的影响来选择合适的角色和属性。在开发过程中，一定要用真实的屏幕阅读器（如NVDA、JAWS或VoiceOver）进行测试，以确保你的选择能带来预期的可访问性体验。

除了ARIA，还有哪些辅助性策略可以提升通知的用户体验？

虽然ARIA实时区域是核心，但可访问性不仅仅是技术层面的实现，它还关乎用户体验的整体设计。有一些非ARIA的策略，可以显著提升通知消息的可用性和包容性。

视觉设计与清晰度：
- 简洁明了的文案： 通知文本应该直白、易懂，避免行话和模糊的表达。直接告诉用户发生了什么，以及他们可能需要做什么。
- 足够的对比度： 确保通知消息的文字与背景之间有足够的颜色对比度，以便低视力用户也能清晰阅读。WCAG 2.1 AA级标准建议至少4.5:1的对比度。
- 醒目的视觉提示： 使用图标（例如，绿色的勾表示成功，红色的叉表示错误）可以帮助用户快速识别通知的类型和情绪。但要确保这些图标也有可访问的替代文本（通过alt属性或aria-label），以便屏幕阅读器用户也能理解。
- 一致的位置： 通知消息应该出现在页面上预期的、一致的位置（例如，屏幕顶部中央或角落），这样用户更容易找到它们，并形成习惯。
通知的生命周期与持久性：
- 适当的显示时长： 非紧急通知不应立即消失。给用户足够的时间阅读和理解。通常3-7秒是一个合理的范围，但对于复杂信息，可能需要更长。
- 可手动关闭： 所有的通知，尤其是那些持续时间较长的或可能阻挡内容的，都应该提供一个明确的关闭按钮（例如一个“X”图标），并且这个按钮必须是可聚焦和可操作的（使用<button>元素，并提供清晰的aria-label="关闭通知"）。这赋予了用户控制权。
- 持久性通知： 对于非常关键的、需要用户解决才能继续操作的错误（比如表单提交失败），通知应该保持可见，直到用户采取了纠正措施。
避免焦点劫持：
- 除非通知是模态对话框（Modal Dialog）且需要用户立即响应（如确认删除），否则不要强制将键盘焦点移动到通知消息上。突然的焦点转移会极大地扰乱屏幕阅读器用户的导航流程，让他们感到迷失。实时区域的目的是在不移动焦点的情况下提供信息。
提供多种反馈方式（可选）：
- 声音提示： 对于某些关键通知，可以考虑播放一个简短、不刺耳的声音提示。但这应该是可选的，并且用户应该能够关闭声音。
- 触觉反馈： 在移动设备上，短暂的震动（触觉反馈）可以作为通知的补充，但同样，这应该是用户可控的。
用户偏好与定制：
- 如果应用有大量的通知，考虑提供用户自定义通知设置的选项，例如：
  - 选择接收哪些类型的通知。
  - 调整通知的显示时长。
  - 开关声音提示。
  - 这赋予了用户更大的灵活性和控制感，提升了整体满意度。
真实环境测试：
- 最重要的一点：不要仅仅依赖规范和理论。在实际开发中，务必使用真实的屏幕阅读器（如Windows上的NVDA或JAWS，macOS上的VoiceOver，以及移动设备上的TalkBack或VoiceOver）进行测试。让不同背景的用户（包括有障碍的用户）参与测试，他们的反馈是无价的，能帮你发现文档和模拟器中难以察觉的问题。