I have a list of product cards, each wrapped in a link tag. When using voice-over and tabbing through on Mac, it announces the aria-label
description in the link
, the aria-label
description in the button
, and the one in the div element with role="note"
.
However, using the control+option+arrow
keys only announces the link while ignoring the button
and div
, and jumping to the next product card.
What could be causing this behaviour? Please help with suggestions on announcing the buttons and div using control+option+arrow
.
Code:
<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>;
You have a nested focusable elements problem. The button is inside a huge link which is itself focusable. This is an accessibility antipattern.
Focusable elements musn’t be nested.
- Upon clicking or pressing enter on the inner element, should the outer element also be triggered ?
- When on the inner element, should we consider that the outer element has also the focus ?
- Should the content of the inner element be read when the focus is on the outer element ? risking to read some content twice
OS, browsers, screen readers and assistive tools handle all that very differently one from another, so it must be avoided at all cost for a consistent experience.
Note also that the aria-label of your link completely replaces the whole natural content to be read. I guess it wasn’t what was intended here either.
2