移动端Safari Voiceover加载时读页面标题而非指定元素问题求助

这不是预期行为 #

iOS上的Voiceover本应响应焦点变化或role="alert"的内容播报，但WebKit在页面导航后的处理逻辑和桌面端存在差异，导致你的代码没触发预期效果。

可能的问题点 #

• h1不可聚焦：默认<h1>没有焦点能力，必须添加tabindex="-1"才能通过focus()让它获得焦点，否则焦点设置操作无效，自然不会触发朗读。
• useEffect时机滞后：React的useEffect是异步执行的，页面切换时浏览器会优先朗读<title>内容，等useEffect执行时，Voiceover已经完成初始播报，不会再响应后续的焦点设置。
• alert弹窗渲染时机晚：如果弹窗是依赖状态更新后才渲染，等它出现在DOM中时，Voiceover已经完成页面初始播报，不会主动重新读取内容。

不用超时的优化方案 #

1. 确保h1可聚焦并调整执行时机 #

给h1添加tabindex="-1"，同时用useLayoutEffect替代useEffect——它会在DOM更新后同步执行，能抢在浏览器默认标题朗读前触发焦点：

import { useLayoutEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

function Page() {
  const h1Ref = useRef(null);
  const location = useLocation();

  useLayoutEffect(() => {
    // 优先处理alert弹窗
    const alertEl = document.querySelector('[role="alert"]');
    if (alertEl) {
      alertEl.setAttribute('tabindex', '-1');
      alertEl.focus();
    } else if (h1Ref.current) {
      h1Ref.current.focus();
    }
  }, [location.pathname]);

  return <h1 ref={h1Ref} tabindex="-1">页面主标题</h1>;
}

2. 用aria-live区域辅助播报 #

如果不想修改h1的焦点状态，可以添加一个视觉隐藏的aria-live区域，页面切换时更新内容让Voiceover自动朗读：

import { useLayoutEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

function Page() {
  const liveRegionRef = useRef(null);
  const location = useLocation();

  useLayoutEffect(() => {
    const alertEl = document.querySelector('[role="alert"]');
    if (alertEl) {
      liveRegionRef.current.textContent = alertEl.textContent;
    } else {
      liveRegionRef.current.textContent = document.querySelector('h1').textContent;
    }
  }, [location.pathname]);

  return (
    <>
      <div 
        ref={liveRegionRef} 
        aria-live="polite" 
        className="sr-only"
      ></div>
      <h1>页面主标题</h1>
    </>
  );
}

对应的视觉隐藏样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

3. 优化alert弹窗的渲染 #

确保role="alert"的弹窗在页面切换时同步渲染到DOM中，不要延迟过久。另外，role="alert"属于自动播报的live区域，不需要手动设置焦点，但如果是动态添加的，要保证DOM更新时它的内容已经存在。

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