The A11y Path

WAI-ARIA was one of those things that took me a minute to fully make sense of, it's powerful, seems straightforward, but also very easy to mess up if you're not careful. I started digging into this earlier in my prep, and this post is me writing out the notes before they escape my brain 😅

What I learned

WAI-ARIA (Accessible Rich Internet Applications) is a spec by W3C that helps us describe how things behave on a page when HTML alone can't do the job, especially for screen readers and other assistive tech. It's meant to supplement, not replace, semantic HTML.

Don't use ARIA if you can use native HTML is a golden rule — and for good reason!

The Basics

I updated my WAS Prep sheet to reflect what I learned on ARIA:

Roles

Roles define what an element is (e.g. button, dialog, tab, checkbox). Roles fall into categories like:

• Landmark roles (banner, main, navigation)
• Widget roles (button, checkbox, menu)
• Structure roles (row, cell, group)

States & Properties

Define how an element behaves or what state it's in:

• Properties describe characteristics (e.g. aria-describedby, aria-label)
• States describe dynamic changes (e.g. aria-hidden, aria-checked, aria-disabled)

A lot of attributes look the same but have subtle differences, like how aria-pressed is different from aria-checked.

ARIA can be used wrong

ARIA is not magical, if the roles/attributes aren't set up correctly with JavaScript and focus/event handling, it won't work. Plus:

• No semantic behavior: role="button" on a div won't make it act like a button unless you handle keyboard interaction too.
• Overuse of ARIA can make your component less accessible.

Resources That Helped Me

• WAI-ARIA 1.2 Spec - I read this slowly and in chunks
• ARIA Authoring Practices Guide (APG)
• Day 16 - 100 Days of A11y - made things feel human
• ARIA States and Properties - A11y Project
• ARIA Properties - A11y Project

What I'm Still Reading

• The ARIA APG Patterns - I'm slowly going through them to understand using ARIA roles with the keyboard support.
• How assistive tech responds differently across patterns (especially mobile vs desktop screen readers)
• ARIA relationships like aria-owns, aria-activedescendant, aria-describedby — I get what they do, but I'm still learning when it's appropriate to use them.

Next up: European Accessibility Standard EN 301 549 I finally got to this bridge I feel like I'll be reading government documents for this part 😅.