Search code examples
reactjsaccessibilityvoiceoverhtml-heading

Voice over announcing unneccesary information

Using React and NextJs, I have product cards, each wrapped in a link, and an aria-label is added to the link to announce information about each product. I have only added the product name and price information to the aria-label, but it keeps announcing an h2 tag that is part of the content. I do not want this behaviour, though. How can I solve this, please?

Code used:

  <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>{heading}</h2>
        </div>
      </div>
    </div>
  </a>

This is what the voice over announces when I tab through product cards

I want the voice-over only to announce the product name and price.

Solution

  • You could use the attribute role="none" or role="presentation" on that h2.

    For more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role