Android平板Firefox浏览器中屏幕阅读器无法读取Toast.announce求助

方案1：手动实现ARIA Live区域替代组件 #

部分React UI库的Toast.announce在Android Firefox下对ARIA live区域的处理存在兼容性问题，手动构建标准的ARIA live区域可以绕过这个问题：

// 自定义播报组件
import { useEffect, useRef, useState } from 'react';

export const ScreenReaderAnnouncer = () => {
  const [message, setMessage] = useState('');
  const announcerRef = useRef(null);

  useEffect(() => {
    if (message && announcerRef.current) {
      // 先清空再设置，确保Firefox能检测到内容变化
      announcerRef.current.textContent = '';
      setTimeout(() => {
        announcerRef.current.textContent = message;
      }, 100);
    }
  }, [message]);

  // 对外暴露播报方法
  const announce = (text) => {
    setMessage(text);
  };

  return (
    <div
      ref={announcerRef}
      aria-live="polite"
      aria-atomic="true"
      style={{
        position: 'absolute',
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: 'hidden',
        clip: 'rect(0, 0, 0, 0)',
        border: 0
      }}
    />
  );
};

// 使用方式：替换原来的announcePageNumber
export const announcePageNumber = (currentIndex, screensCount, announcer) => {
  announcer.announce(`Page ${currentIndex} of ${screensCount}`);
};

使用时需在应用根组件中实例化ScreenReaderAnnouncer，并将其announce方法传递给需要播报的逻辑。

方案2：调整ARIA Live区域属性配置 #

如果坚持使用原Toast组件，可尝试强制设置更兼容的ARIA属性：

• 将Toast元素的aria-live属性改为assertive（部分场景下比polite更易被Firefox识别）
• 开启aria-atomic="true"，确保屏幕阅读器读取完整内容而非仅变化部分

方案3：检查Android Firefox辅助功能设置 #

1. 打开Android Firefox设置菜单
2. 进入「辅助功能」选项
3. 确认「屏幕阅读器支持」已开启
4. 尝试关闭并重新开启该选项，或重启浏览器后再测试

内容的提问来源于stack exchange，提问作者Test1 Account