React/NextJS产品卡片：如何让屏幕阅读器仅播报aria-label指定内容？

要让屏幕阅读器仅播报aria-label中的产品名称和价格，只需让卡片内部的<h2>元素对辅助技术不可见即可，具体实现如下：

解决方案：给h2添加aria-hidden="true" #

在<h2>标签上添加aria-hidden="true"属性，该属性会告诉屏幕阅读器忽略这个元素及其内容，但不会影响它在页面上的视觉显示。

修改后的代码：

<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>Zoom</button>
    </div>
    <div className={styles.text_container}>
      <div className={styles.product_title}>
        <h2 aria-hidden="true">{heading}</h2>
      </div>
    </div>
  </div>
</a>

注意事项 #

• 确认aria-label中的内容已经完整包含了需要播报的信息（产品名称+价格），避免遗漏关键内容。
• 测试不同的屏幕阅读器（如VoiceOver、NVDA等），确保播报效果符合预期。

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