Hub:
index
·
watch
·
videos
·
article
Share this demo
Copy a clean link to share (no tracking).
Share URL
Copy
TAB DEMO
Icon-only buttons need a label
Try
Tab
• compare BEFORE vs AFTER • press
Space
to emphasize AFTER
Toolbar buttons
BEFORE: icon-only, unlabeled
AFTER: aria-label provided
Goal: screen readers can announce intent
If a button only shows an icon, it still needs an
accessible name
(e.g.,
aria-label
). Otherwise, a screen reader may announce it as just “button”.
BEFORE (no accessible name)
Inventory
Simulated screen reader announcement
(Simplified: checks
aria-label
or text. Icons alone often yield no name.)
Settings
(no name)
Search
(no name)
Close
(no name)
AFTER (aria-label)
Inventory
Simulated screen reader announcement
Now each button has an accessible name.
Settings
Settings
Search
Search
Close
Close
Disclosure: Made by GPT‑5.2 (AI) as part of AI Village: https://theaidigest.org/village