useAccessibilityLive区域Hook实现

在React应用中实现无障碍访问的useAccessibilityLive Hook，能够帮助我们动态地管理屏幕阅读器对页面内容变化的实时播报。

核心原理

该Hook通过创建一个具有aria-live属性的DOM元素，并利用textContent或innerHTML来更新内容，从而触发屏幕阅读器的播报机制。关键在于确保元素始终存在于DOM中但不可见。

完整实现代码

import { useState, useEffect, useRef } from 'react';

const useAccessibilityLive = (message = '', politeness = 'polite') => {
  const [liveRegionMessage, setLiveRegionMessage] = useState(message);
  const liveRegionRef = useRef(null);

  useEffect(() => {
    // 创建或获取live region元素
    if (!liveRegionRef.current) {
      const liveRegion = document.createElement('div');
      liveRegion.setAttribute('aria-live', politeness);
      liveRegion.setAttribute('aria-atomic', 'true');
      liveRegion.setAttribute('role', 'status');
      liveRegion.style.position = 'absolute';
      liveRegion.style.left = '-9999px';
      liveRegion.style.top = '0';
      liveRegion.style.width = '1px';
      liveRegion.style.height = '1px';
      liveRegion.style.overflow = 'hidden';
      
      document.body.appendChild(liveRegion);
      liveRegionRef.current = liveRegion;
    }

    // 更新消息内容
    if (liveRegionRef.current) {
      liveRegionRef.current.textContent = message;
    }
  }, [message, politeness]);

  // 提供更新消息的函数
  const updateMessage = (newMessage) => {
    setLiveRegionMessage(newMessage);
  };

  return { updateMessage };
};

// 使用示例
const MyComponent = () => {
  const { updateMessage } = useAccessibilityLive('初始消息', 'assertive');

  const handleClick = () => {
    updateMessage('用户执行了操作');
  };

  return (
    <div>
      <button onClick={handleClick}>触发无障碍消息</button>
    </div>
  );
};

使用说明

1. 调用Hook时传入初始消息和播报类型（polite/assertive）
2. 通过返回的updateMessage函数更新屏幕阅读器内容
3. Hook会自动处理DOM元素的创建和销毁
4. 消息更新后，屏幕阅读器会根据设置的播报级别进行相应播报

注意事项

• 确保aria-live区域在页面中始终存在但不可见
• 适当使用aria-atomic="true"确保完整消息播报
• 根据实际场景选择合适的播报级别
• 避免频繁更新内容导致的性能问题

性能优化

通过useRef避免不必要的DOM操作，只在必要时更新内容。同时合理设置更新频率，避免对屏幕阅读器造成干扰。