Accessibility

Nuxt UI components are accessible by default, but here's how to use them properly.

Keyboard Navigation

All Nuxt UI components support keyboard navigation:

• Tab - Navigate between focusable elements
• Enter/Space - Activate buttons and links
• Arrow keys - Navigate menus and dropdowns
• Escape - Close modals and dropdowns

ARIA Attributes

Components include proper ARIA attributes:

<template>
  <!-- Button with accessible label -->
  <UButton aria-label="Close modal" icon="i-heroicons-x-mark" />

  <!-- Input with description -->
  <UInput
    v-model="email"
    aria-describedby="email-hint"
  />
  <span id="email-hint">We'll never share your email</span>
</template>

Focus Management

<script setup>
const modalRef = ref()

function openModal() {
  isOpen.value = true
  nextTick(() => {
    modalRef.value?.$el.focus()
  })
}
</script>

<template>
  <UModal ref="modalRef" v-model="isOpen">
    <!-- Modal content -->
  </UModal>
</template>

Color Contrast

Ensure sufficient contrast:

<template>
  <!-- ✅ Good contrast -->
  <div class="bg-gray-900 text-white">
    High contrast text
  </div>

  <!-- ❌ Poor contrast -->
  <div class="bg-gray-100 text-gray-300">
    Low contrast text
  </div>
</template>

Screen Reader Support

<template>
  <!-- Skip to main content -->
  <a href="#main" class="sr-only focus:not-sr-only">
    Skip to main content
  </a>

  <!-- Visually hidden but readable by screen readers -->
  <span class="sr-only">Loading...</span>
  <UIcon name="i-heroicons-arrow-path" class="animate-spin" />
</template>

Best Practices

• ✅ Always provide alt text for images
• ✅ Use semantic HTML
• ✅ Ensure keyboard navigation works
• ✅ Test with screen readers
• ✅ Maintain proper heading hierarchy
• ✅ Use ARIA labels when needed
• ✅ Ensure sufficient color contrast

Accessible UIs are better UIs for everyone!