GUIDE OVERVIEW / WEBPAGE & WEBSITE

Understanding ARIA

Start with the right HTML. Add ARIA to address a specific need.

ARIA stands for Accessible Rich Internet Applications. It helps expose interface meaning to assistive technology. It does not automatically add interaction, styling, or keyboard support.

What this guide covers

• Native elements and when ARIA is useful.
• Roles, states, properties, and supported combinations.
• Names that match visible labels and descriptions that add context.
• A working show/hide control with synchronized state.
• Practical checks and common implementation mistakes.

One small example throughout

We will reveal workshop details using a native button. The final example keeps the information readable if JavaScript is unavailable. For a simple disclosure, native details and summary may already meet your needs; we discuss that first.

Read in order or jump to any chapter. You will benefit from knowing basic HTML and how a click handler works.