画外音使用 Control+Option+箭头跳过公告，但使用 Tab 键来公告

Question

我有一个产品卡列表，每个卡都包含在链接标签中。在 Mac 上使用画外音和按 Tab 键切换时，它会播报

aria-label

中的

link

描述、

aria-label

中的

button

描述以及带有

role="note"

的 div 元素中的描述。

但是，使用

control+option+arrow

键仅宣布链接，而忽略

button

和

div

，并跳转到下一个产品卡。

什么可能导致这种行为？请提供有关使用

control+option+arrow

公布按钮和 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>;

Answer 1

您有一个嵌套的可聚焦元素问题。该按钮位于一个巨大的链接内，该链接本身是可聚焦的。这是一个可访问性反模式。 可聚焦元素不得嵌套。

• 在内部元素上单击或按 Enter 键时，外部元素是否也会被触发？
• 当位于内部元素上时，我们是否应该考虑外部元素也具有焦点？
• 当焦点位于外部元素时是否应该读取内部元素的内容？冒着阅读某些内容两次的风险

操作系统、浏览器、屏幕阅读器和辅助工具处理所有这些问题的方式都截然不同，因此必须不惜一切代价避免这种情况，以获得一致的体验。

另请注意，链接的 aria-label 完全取代了要阅读的整个自然内容。我想这也不是这里的意图。