VoiceOver使用Control+Option+箭头未播报按钮及role=note元素问题

问题 #

我有一组产品卡片，每张卡片都包裹在<a>标签中。在Mac上使用VoiceOver时：

• 通过Tab键导航，会播报<a>标签的aria-label、按钮的aria-label，以及带有role="note"的div元素的aria-label。
• 使用Control+Option+箭头键导航时，仅播报<a>标签内容，忽略按钮和该div元素，直接跳转到下一张产品卡片。

请问该行为的原因是什么？如何让Control+Option+箭头键也能播报按钮和该div元素？

示例代码 #

<div className={styles.card_container}>
  <div className={styles.card}>
    <a href={`/home`} aria-label={`${product_name} ${price}`}>
      <div className={styles.imgAndPriceWrapper}>
        <div className={styles.img_container}>
          <img src="/images/hilns" alt="hilns" />
        </div>
        <div className={styles.iconButton}>
          <button onClick={handleImageClick} aria-label="Zoom in">
            Zoom
          </button>
        </div>
        <div className={styles.text_container}>
          <div className={styles.product_title}>
            <h2>{heading}</h2>
          </div>
          <div
            className={styles.finance}
            aria-label="Finance options available"
            role="note"
            tabIndex={0}
          >
            <span>Finance options available</span>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div className="card">
    <a href={`/home`} aria-label={`${product_name} ${price}`}>
      <div className={styles.imgAndPriceWrapper}>
        <div className={styles.img_container}>
          <img src="/images/hilns" alt="hilns" />
        </div>
        <div className={styles.iconButton}>
          <button onClick={handleImageClick} aria-label="Zoom in">
            Zoom
          </button>
        </div>
        <div className={styles.text_container}>
          <div className={styles.product_title}>
            <h2>{heading}</h2>
          </div>
          <div
            className={styles.finance}
            aria-label="Finance options available"
            role="note"
            tabIndex={0}
          >
            <span>Finance options available</span>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

行为原因 #

1. 导航模式逻辑差异

   • Tab键导航聚焦的是所有可交互元素（默认包含链接、按钮、带tabIndex的元素等），所以会遍历页面中所有符合条件的节点，包括嵌套在<a>内的按钮和note元素。
   • Control+Option+箭头键属于VoiceOver的转子遍历模式，默认会将整个<a>链接识别为一个独立的“链接”区域，把容器内的所有内容合并为一个可访问单元，不会自动深入遍历内部子元素。

2. HTML语义冲突
   HTML规范明确禁止在<a>标签内嵌套其他可交互元素（如按钮），这种嵌套会导致辅助技术的语义解析混乱，是触发该问题的核心诱因。

解决方法 #

1. 修复语义结构（优先方案） #

彻底解决嵌套问题，将按钮移至<a>外部，或用JavaScript模拟链接跳转逻辑，把<a>改为普通容器：

<div className={styles.card}>
  <!-- 用div+JS替代a标签，避免嵌套可交互元素 -->
  <div 
    onClick={() => window.location.href = `/home`} 
    className={styles.cardLink}
    role="link"
    tabindex="0"
    onKeyDown={(e) => e.key === 'Enter' && window.location.href = `/home`}
  >
    <div className={styles.imgAndPriceWrapper}>
      <div className={styles.img_container}>
        <img src="/images/hilns" alt="hilns" />
      </div>
      <div className={styles.text_container}>
        <div className={styles.product_title}>
          <h2>{heading}</h2>
        </div>
        <div
          className={styles.finance}
          aria-label="Finance options available"
          role="note"
        >
          <span>Finance options available</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 按钮独立出来，不再嵌套在链接内 -->
  <div className={styles.iconButton}>
    <button onClick={handleImageClick} aria-label="Zoom in">
      Zoom
    </button>
  </div>
</div>

2. 优化辅助技术识别（临时兼容方案） #

如果无法修改结构，可通过以下方式强制VoiceOver识别内部元素：

• 给嵌套的按钮和note元素添加aria-roledescription，明确标记元素类型，让VoiceOver转子能识别到：

  <button onClick={handleImageClick} aria-label="Zoom in" aria-roledescription="按钮">
    Zoom
  </button>
  

• 引导用户手动切换VoiceOver转子类别（如按Control+Option+U打开转子，选择“按钮”类别），即可遍历到内部元素，但这需要用户主动操作。

3. 清理冗余属性 #

移除note元素上多余的tabIndex={0}，role="note"本身已具备可识别性，无需额外设置聚焦属性（除非业务需要该元素被Tab键访问）。

内容的提问来源于stack exchange，提问作者Sofiyullahi Olamilekan Jamiu