ARIA (Accessible Rich Internet Applications) is a W3C technical specification that conveys role, state and property information to assistive technologies where HTML alone cannot express it. It enables custom components such as tabs, dropdown menus and live notifications to be understood correctly by screen readers. Incorrectly used ARIA can harm accessibility instead of improving it.
ARIA is the W3C's WAI-ARIA specification and defines three kinds of information: roles (what an element is, for example a dialog), states (momentary information such as whether something is expanded, via aria-expanded) and properties (identifiers such as aria-label). These attributes are written into the browser's accessibility tree, and screen readers announce elements accordingly. Semantic HTML elements such as button, nav and header already carry most of this information natively; ARIA is designed for the places where built-in semantics are not enough, such as tab groups, autocomplete fields and live-updating regions.
The first rule of ARIA is often quoted: if a native HTML element does the job, do not use ARIA. A wrongly assigned role or a state that never updates describes an interface to the screen reader that does not actually exist, which can be more harmful than using no ARIA at all. ARIA also adds no behavior: keyboard support must be coded separately. The practical priority order for site owners is semantic HTML first, then keyboard behavior, then ARIA. Automated scanners can detect invalid ARIA usage such as unknown roles or missing required attributes, and a short manual screen reader test shows whether the announcements actually make sense.
Frequently asked questions
What is the difference between aria-label and alt text?
Alt text is defined with the alt attribute specific to the img element and conveys the content of an image. aria-label gives an accessible name to any element and is most often used on elements without visible text, such as a close button that contains only an icon. For images the correct tool is alt text; aria-label does not replace it. On elements that already have a visible label, aria-label is usually unnecessary.
Does using ARIA make a site accessible?
Not on its own. ARIA only conveys information to assistive technologies; keyboard support, focus management and correct HTML structure are still required. Worse, misused ARIA can describe an interface to the screen reader that does not exist and make things worse. The right order is semantic HTML first, then keyboard behavior, then ARIA only where needed. Verify the result with a screen reader test.
This content is for information only and is not legal advice.