Vue 56: Accessibility Basics
easy⏱ 5 mincoursevue
Native elements first, ARIA second
The first rule of ARIA is: don't use ARIA if you don't have to. A real <button> is keyboard-operable, focusable, and announced correctly for free. Reach for role, tabindex, and key handlers only when you truly need a custom-styled interactive widget that no native element covers - and then you own re-implementing everything the browser used to give you for free: focus, keyboard support, and announcements.
Live regions
aria-live='polite' (or its shorthand role='status') tells assistive technology to announce content changes inside that element without stealing focus - essential for things like counters, form validation messages, or notifications that update without a page reload.
<p role="status" aria-live="polite">
Count is {{ count }}
</p>
<!-- screen readers announce this text every time it changes,
without moving keyboard focus away from whatever the user
was doing -->
Try it: keyboard-only pass
Try operating both controls below using only Tab, Enter, and Space - no mouse. If both respond the same way they do to a click, you have real keyboard parity - the minimum bar for any custom interactive widget.