Service One
We offer consulting and development services that scale with your needs.
Welcome to Our Site
This is a clean and semantic demo layout using all structural HTML5 tags.
Service Two
We support businesses with tailored strategies and long-term guidance.
ARIA Labels in Action: Accessible vs. Inaccessible
ARIA (Accessible Rich Internet Applications) helps describe UI components when native HTML isn’t enough. But used incorrectly, ARIA can hide or mislabel content.
✅ aria-label on Icon Button
aria-label="Close" adds an invisible label to a button that has no visible text.
❌ aria-label on non-focusable element
⚙️
Problem: No tabindex="0" or role — screen readers can see it, but keyboard users can't reach it.
✅ aria-labelledby Example
Sign In
This modal is labeled by its heading.
Screen readers announce “Dialog: Sign In” by referencing the visible heading.
❌ aria-labelledby with Broken Reference
No visible title.
Problem: The ID doesn’t exist. Screen readers announce: “Dialog” — without context.
✅ aria-describedby for Instructions
We’ll never share your email with anyone.
Screen readers announce the field plus the help text.
❌ aria-describedby Missing Element
Problem: The reference is broken. Screen readers try to find help text that isn’t there.
❌ Conflicting aria-label + aria-labelledby
My Dashboard
This region has both a label and labeledby — only one should be used.
Problem: Conflicting labels confuse assistive tech. Pick one: aria-label or aria-labelledby.
✅ Accessible Landmark with aria-labelledby
Notifications
You have 3 new messages.
Screen reader says: “Region: Notifications” — thanks to the linked visible heading.