useAccessibilityAlert警告Hook

在React应用中实现无障碍警告提示是提升用户体验的重要环节。useAccessibilityAlert是一个专门用于处理屏幕阅读器通知的自定义Hook，它确保重要信息能够被视觉障碍用户及时感知。

核心实现

import { useEffect, useRef } from 'react';

const useAccessibilityAlert = (message, type = 'assertive') => {
  const alertRef = useRef(null);

  useEffect(() => {
    if (message && alertRef.current) {
      // 清除之前的文本
      alertRef.current.textContent = '';
      // 延迟设置新文本以确保屏幕阅读器能检测到变化
      setTimeout(() => {
        alertRef.current.textContent = message;
      }, 100);
    }
  }, [message]);

  return (
    <div
      ref={alertRef}
      aria-live={type}
      aria-atomic="true"
      className="sr-only"
      style={{
        position: 'absolute',
        left: '-10000px',
        width: '1px',
        height: '1px',
        overflow: 'hidden'
      }}
    />
  );
};

使用示例

function MyComponent() {
  const [alertMessage, setAlertMessage] = useState('');

  useAccessibilityAlert(alertMessage, 'polite');

  const handleClick = () => {
    setAlertMessage('操作成功完成');
  };

  return (
    <button onClick={handleClick}>
      执行操作
    </button>
  );
}

关键要点

1. 使用aria-live属性控制屏幕阅读器的通告优先级
2. 添加aria-atomic="true"确保整个内容被重新读取
3. 通过CSS将元素置于屏幕外但保持可访问性
4. 使用延迟设置文本内容以确保屏幕阅读器能够检测变化
5. 支持两种类型：'assertive'(紧急)和'polite'(温和)

这个Hook可以有效提升应用的无障碍访问能力，特别适用于表单验证、操作反馈等场景。