Avatar stack interactive img repeats button aria-label (double AT announcement) #1106

New Issue

2026-08-13T14:44:36Z

spikerj commented

2026-08-13 14:44:36 +00:00

lib-avatar-stack in interactive mode (#752) renders:

<button [attr.aria-label]="avatar.alt" ...>
  <img [src]="avatar.url" [alt]="avatar.alt" />
</button>

The button already names the control. The inner <img alt> is announced again, so VoiceOver/NVDA reads the member name twice on the family-card spotlight toggle.

Fix: alt="" (and aria-hidden="true" on the img) in the interactive branch only. Keep the real alt on the non-interactive <span> branch, where there is no button label.

`lib-avatar-stack` in interactive mode (#752) renders: ```html <button [attr.aria-label]="avatar.alt" ...> <img [src]="avatar.url" [alt]="avatar.alt" /> </button> ``` The button already names the control. The inner `<img alt>` is announced again, so VoiceOver/NVDA reads the member name twice on the family-card spotlight toggle. Fix: `alt=""` (and `aria-hidden="true"` on the img) in the interactive branch only. Keep the real alt on the non-interactive `<span>` branch, where there is no button label.

spikerj commented

2026-08-13 21:54:42 +00:00

Resolved in spikersoft-angular PR #818 (merged to master). Interactive avatar-stack images are decorative (alt="" + aria-hidden) so AT no longer announces the name twice. Closing.

Resolved in spikersoft-angular [PR #818](https://git.spikersoft.com/spikerj/spikersoft-angular/pulls/818) (merged to `master`). Interactive avatar-stack images are decorative (`alt=""` + `aria-hidden`) so AT no longer announces the name twice. Closing.

spikerj closed this issue

2026-08-13 21:54:50 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1106