Skip to content

Accessibility

Label controls, wire overlay close, and use MCP get_a11y_guide for interactive surfaces.

Checklist

Interactive controls have a name: label, visible text, or aria-label
Icon-only buttons always set aria-label (see Icons)
Dialogs / drawers: keep focus trapped, wire onVuClose / @vu-close / v-model:open so Escape and overlay dismiss sync state
Do not remove focus rings or keyboard paths with custom CSS

Prefer MCP get_a11y_guide for interactive surfaces before inventing ARIA patterns.

<VuDialog open={open} onVuClose={() => setOpen(false)} closable>
  <span slot="header">Title</span>
  <div slot="body">Body</div>
</VuDialog>

Next steps

Events
MCP servers — get_a11y_guide