A11y

A11y Module

Nuxt is planning to into an A11y Module for hinting and assistive technologies. See Nuxt Core Modules Roadmap.

NuxtRouteAnnouncer

Add to each layout.

<NuxtRouteAnnouncer /><!-- Announce route changes to assistive technologies -->

Loading Feedback

Use skeleton UI elements that get replaced once a third-party script (like video embed or payment modal) loads, thus reducing visual noise and improving performance.

a11y feedback is rqd to inform the user when the script is loading or on failure to load.

Load Failed Alert

<ComplicatedComponent>
  <template #error>
    <UAlert color="red" title="ComplicatedComponent to load" description="Refresh page to try again." />
  </template>
</ComplicatedComponent>

Loading Indication

<ComplicatedComponent>
  <template #loading>
  <ScriptLoadingIndicator />
  </template>
</ComplicatedComponent>

Toggles

In the absence of visible text, ensure screen reader users understand what will happen when they activate a button or toggle, for example:

<UButton
    :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
    @click="isDark = !isDark"
/>