--- title: "ARIA" url: "https://www.insideuxdesign.com/en/glossar/aria" language: "en" description: "What is ARIA? A plain-language guide to roles, states, the first rule of ARIA and a real example. Learn when you need ARIA and when native HTML is better." published: "2026-10-14T15:20:36+02:00" updated: "2026-10-14T15:20:36+02:00" --- # ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. - **Buchstabe:** A - **Englischer Begriff:** ARIA UX glossary · engl. ARIA # ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. Imagine a team builds a custom dropdown menu for a website out of plain `div` elements. With a mouse, everything works. A screen reader, however, only announces “Products,” without saying that it’s a button or whether the menu is open. With a keyboard, it can’t be opened at all. ARIA exists to close gaps like this. It’s also where a lot of mistakes happen. ## Explained simply ARIA stands for “Accessible Rich Internet Applications,” officially WAI-ARIA. It’s a standard from the W3C, the organization that develops web standards. ARIA adds extra attributes to HTML that tell assistive technologies such as a [screen reader](https://www.insideuxdesign.com/en/glossar/screen-reader) what an element is and what state it’s in. The current recommendation is WAI-ARIA 1.2 from 2023. Think of ARIA as a label on a box. The label says “tools,” but it doesn’t put any tools inside. If the label promises something that isn’t there, everyone relying on it ends up frustrated. ## Roles, states and properties ARIA works with three building blocks: - **Roles** say what an element is, such as `role="dialog"` or `role="tab"`. - **States** describe what can change, such as `aria-expanded="true"` for an open menu. - **Properties** provide extra information, such as `aria-label` for a name when there’s no visible text. Keep in mind: ARIA only changes what assistive technology announces. It doesn’t add behavior or keyboard support. If you give a `div` the role “button,” you have to build focus and keyboard handling yourself. ## The first rule of ARIA That leads to the often quoted first rule: if a native HTML element with the meaning and behavior you need exists, use it instead of repurposing another element with ARIA. The W3C’s ARIA Authoring Practices Guide sums this up, in essence, as: no ARIA is better than bad ARIA. In 2026, the “WebAIM Million” analysis found that home pages with ARIA had more detected errors on average than pages without it, although that doesn’t prove ARIA caused them. ## An example Here’s an example: the dropdown from the introduction first gets nothing more than `role="button"`. The screen reader now says “button,” but Enter and Space do nothing. The better fix: the team replaces the `div` with a real `button` element and only adds `aria-expanded`, which switches to “true” when the menu opens. Focus and keyboard support work automatically, and the state is announced correctly. ## In practice - **Start with native HTML.** Buttons, links, form fields and headings already come with meaning and [keyboard accessibility](https://www.insideuxdesign.com/en/glossar/keyboard-accessibility). - **Keep your promises.** Every role you assign requires matching behavior. Without keyboard support, it’s a false announcement. - **Test with real tools.** Tools like [axe DevTools](https://www.insideuxdesign.com/en/ressourcen/axe-devtools) catch invalid attributes, and a quick screen reader test shows how it actually sounds. More methods are covered in [Accessibility Testing: Tools and Methods for UX Designers](https://www.insideuxdesign.com/en/blog/accessibility-testing-tools-and-methods-for-ux-designers). ## Related terms [Screen Reader](https://www.insideuxdesign.com/en/glossar/screen-reader), [Accessibility](https://www.insideuxdesign.com/en/glossar/accessibility), [WCAG](https://www.insideuxdesign.com/en/glossar/wcag), [Alt Text](https://www.insideuxdesign.com/en/glossar/alt-text) ## Sources - [W3C WAI: WAI-ARIA Overview. W3C, 2025](https://www.w3.org/WAI/standards-guidelines/aria/) - [W3C WAI: ARIA Authoring Practices Guide: Read Me First. W3C, 2026](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/) - [W3C: Using ARIA (discontinued draft). W3C, 2026](https://www.w3.org/TR/using-aria/) - [WebAIM: The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages. WebAIM, 2026](https://webaim.org/projects/million/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio) [ ### Conversion A conversion is a desired action on a website or in an app, such as a purchase or a signup. The conversion rate shows what share of visits leads to one. ](https://www.insideuxdesign.com/en/glossar/conversion)