Skip to content

Commit 1814c4c

Browse files
committed
clarify aria-relevant
1 parent 86de438 commit 1814c4c

File tree

1 file changed

+8
-3
lines changed

1 file changed

+8
-3
lines changed

src/content/blog/2025-11-aria-live.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,18 @@ A good rule of thumb:
145145
The `aria-relevant` attribute refines what types of changes should be announced.
146146
It accepts values like `additions`, `removals`, `text`, or `all`.
147147
For most live regions, the default (`aria-relevant="additions text"`) is ideal — it announces when new content is added or existing text changes.
148-
However, in cases where your region replaces its text frequently (e.g., progress bars, timers, or captions), you might explicitly set:
148+
149+
However, if you have a region where elements are frequently added and removed (like a list of active users or temporary notifications), you might want to control what triggers announcements:
149150

150151
```html
151-
<div aria-live="polite" aria-relevant="text">0% complete</div>
152+
<!-- Only announce when items are added, ignore removals -->
153+
<ul aria-live="polite" aria-relevant="additions">
154+
<li>User Alice joined</li>
155+
<li>User Bob joined</li>
156+
<!-- Announces "User Bob joined" when added, silent when removed -->
157+
</ul>
152158
```
153159

154-
This prevents redundant announcements for removed nodes, focusing only on text changes.
155160
You can also combine values for fine control:
156161

157162
```html

0 commit comments

Comments
 (0)