What Is ARIA? Accessible websites, explained simply

What does ARIA mean?

ARIA stands for Accessible Rich Internet Applications.

Behind the somewhat complicated name is a simple idea: ARIA provides additional information about elements on a website so that assistive technologies like screen readers can better understand what an element means and what state it's currently in.

A simple example is a menu.

A sighted person might immediately recognize that a particular icon opens a menu. A screen reader can't tell that from appearance alone.

With ARIA, the website can provide additional information:

This lets the screen reader recognize: there's a button named "Menu" here, and the associated menu is currently collapsed.

When the menu is opened, the value can change:

Now the screen reader knows too: the menu is open.

ARIA describes meaning and state

ARIA can provide various kinds of information about an element.

This includes, for example:

• What kind of element is this?
• What is the element called?
• Is it open or closed?
• Is it selected?
• Is it disabled?
• Does it belong to another element?

A typical example is an expandable section with frequently asked questions.

A sighted visitor might immediately tell from an arrow icon whether the answer is currently open or closed. A screen reader needs this state to be understandable too.

ARIA can provide exactly this information.

ARIA doesn't automatically turn bad HTML into good HTML

An important principle states:

Native HTML elements should be used whenever possible.

A button, for example, should actually be coded as a button:

and not simply as a clickable element:

A real HTML button already has many properties that browsers and screen readers understand.

ARIA should therefore complement existing HTML semantics, not unnecessarily replace them. We explain more about this principle in our article "Semantic HTML: Why Good HTML Code Matters for People and Machines".

Or put more simply:

Good HTML first – then ARIA wherever additional information is needed.

What does ARIA have to do with the accessibility tree?

Browsers build a special structure from a website for assistive technologies: the so-called accessibility tree.

It contains less information about how a website looks, and more information about what it means.

A complex web page might, in simplified form, produce a structure like this:

ARIA can give the browser additional information that flows into this accessibility tree.

A screen reader can then use this information to convey a website's structure and functions to a person in an understandable way. We explain exactly how this information is made available to screen readers as the accessibility tree in our article "What Is the Accessibility Tree? The Invisible Structure of a Website".

Common ARIA attributes

Web developers encounter some ARIA attributes especially often.

aria-label gives an element an understandable name.

aria-expanded describes whether a section is open or closed.

aria-current can, for example, mark which navigation item corresponds to the page currently being viewed.

aria-hidden can hide certain content from assistive technologies when it doesn't provide any additional information.

This can be useful, for example, for purely decorative icons.

Why ARIA alone isn't enough

An accessible website isn't created by cramming as many aria attributes as possible into the HTML code.

Quite the opposite: incorrectly used ARIA can actually make a website less accessible.

Accessibility also includes, among other things:

ARIA, then, is one building block of accessibility – not the whole solution.

ARIA is becoming more important for modern web applications too

Websites today consist of far more than just text, images, and simple links. They include dropdown menus, accordions, dialog boxes, tabs, sliders, filters, and many other interactive features.

For components like these, plain HTML information is sometimes not enough to clearly describe their current state.

This is where ARIA can provide the necessary additional semantics.

And what does this have to do with AI?

This topic has become interesting beyond classic accessibility too.

AI agents can not only read web pages but increasingly operate them too. They need to recognize, for example, where a navigation is located, which element is a button, or how to fill out a form.

Browser agents can draw on semantic information and the accessibility tree, among other things, to do this.

A cleanly coded, accessible website can therefore also be easier for automated systems to understand and operate.

That doesn't mean ARIA is a new SEO technique, or that using ARIA automatically leads to better rankings in search engines or AI systems.

The connection is more fundamental: a website whose content and functions are technically described in an unambiguous way isn't just more accessible to people using assistive technologies. Its structure is also easier for machines to interpret.

Conclusion

ARIA helps make interactive web pages more understandable for screen readers and other assistive technologies.

The most important rule is surprisingly simple:

Good, semantic HTML forms the foundation. ARIA adds to it wherever additional information is needed.

Used correctly, ARIA doesn't just improve a website's accessibility. It contributes to a clear, semantic structure – and that structure becomes ever more relevant at a time when AI agents, alongside people, are increasingly interacting with websites.