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. The browser doesn't throw an error - it silently ignores the invalid attribute. Your element appears accessible in your code but provides zero information to users who need it.

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 (Common Source of Errors)

<!-- 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

Some attributes seem logical but don't 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 sometimes 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 often 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 ensure consistent accessibility across all pages.