Misspelled ARIA attributes are ignored by assistive technologies, making your accessibility efforts invisible.

What's happening

ARIA attributes must match the exact specification. A typo like aria-lable instead of aria-label means screen readers see nothing at all. Browsers ignore invalid attributes without warning. Your element appears accessible in your code but provides zero information to users.

Diagnose

1. Open Chrome DevTools (F12)
2. Go to Elements panel
3. Find the flagged element
4. Look for attributes starting with aria-
5. Check for typos or non-existent attribute names

Common misspellings:

• aria-lable → aria-label
• aria-labelled-by → aria-labelledby
• aria-role → role (aria-role doesn't exist)
• aria-description → aria-describedby
• aria-pressed on wrong elements

Fix

1. Correct typos

<!-- Before: Misspelled attribute -->
<button aria-lable="Close dialog">×</button>

<!-- After: Correct spelling -->
<button aria-label="Close dialog">×</button>

2. Use correct attribute names

<!-- Before: Non-existent attribute -->
<div aria-role="navigation">...</div>

<!-- After: Correct attribute -->
<div role="navigation">...</div>

3. Fix aria-labelledby

<!-- Before: Hyphenated incorrectly -->
<input aria-labelled-by="name-label">
<label id="name-label">Name</label>

<!-- After: No hyphen between "labelled" and "by" -->
<input aria-labelledby="name-label">
<label id="name-label">Name</label>

4. Replace made-up attributes

These attributes do not exist:

<!-- Before: aria-description doesn't exist -->
<button aria-description="This saves your work">Save</button>

<!-- After: Use aria-describedby with a referenced element -->
<button aria-describedby="save-desc">Save</button>
<span id="save-desc" class="sr-only">This saves your work</span>

Framework examples

<script setup lang="ts">
// Define labels as typed constants
const buttonLabel = 'Close dialog'
</script>

<template>
  <!-- TypeScript won't catch ARIA typos in templates -->
  <!-- Use eslint-plugin-vuejs-accessibility instead -->
  <button :aria-label="buttonLabel">
    <Icon name="close" />
  </button>
</template>

Verify the fix

1. Re-run Lighthouse accessibility audit
2. In DevTools Elements panel, confirm attribute names are valid
3. Test with screen reader:
   • Navigate to the element
   • Confirm the accessible name/description is announced
4. Use browser accessibility inspector (F12 → Accessibility tab)

Common mistakes

• Assuming aria-role exists: The attribute is role, not aria-role.
• Hyphenating labelledby: It's aria-labelledby (one word), not aria-labelled-by.
• Inventing attributes: Only use attributes defined in the WAI-ARIA specification.
• Copying code without checking: Stack Overflow answers often contain typos. Verify against MDN or W3C.

Valid ARIA attributes reference

The most commonly used valid attributes:

• aria-label - Accessible name as a string
• aria-labelledby - Accessible name from another element's ID
• aria-describedby - Additional description from another element
• aria-hidden - Hide from assistive technology
• aria-expanded - Expandable element state
• aria-pressed - Toggle button state
• aria-checked - Checkbox/switch state
• aria-disabled - Disabled state
• aria-live - Announce dynamic content changes

Related issues

Invalid attribute issues often appear alongside:

• Required ARIA attributes - Fix spelling first, then check completeness
• ARIA hidden focus - Incorrect attributes can create focus traps
• Link name - Misspelled aria-label leaves links unnamed

Test your entire site

ARIA typos hide in component libraries or get copy-pasted across pages. Unlighthouse scans your entire site to find every invalid ARIA attribute, so you can fix typos in one place and make sure accessibility is consistent across all pages.