ARIA

1. Was ist ARIA?

Erfahren Sie, wie das aria-label Attribut zur digitalen Barrierefreiheit beiträgt, wie es in HTML eingesetzt wird und welche typischen Fehler vermieden werden sollten. Praxisnaher Leitfaden für barrierefreie Webentwicklung.

I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.

ARIA live regions can be an accessibility minefield. Learn when to use them, and how to choose between assertive and polite announcements.

Die wichtigsten ARIA-Attribute für Live-Regionen auf Webseiten sind aria-live und role.

Master ARIA labels, roles, and states for WCAG 2.2 compliance. Comprehensive guide covering aria-label, aria-labelledby, aria-describedby, live regions, and modern best practices for accessible web applications in 2025.

An examination of how aria-label behaves on static elements across browsers, and why real-world support differs from common assumptions.

ARIA provides an attribute which allows to hide elements from screen readers. It works pretty uniformly on non-focusable elements in modern browsers and screen readers, but it still has some very odd peculiarities. So you better try to create solutions that do not need it.

A collection of bad practices in HTML, copied from real websites.

Master ARIA live regions for inclusive web experiences. Discover implementation best practices and practical examples.

A collection of bad practices in HTML, copied from real websites.

As of my 25 July 2025 update at the end of this post, aria-label auto-translation support is less spotty than when I first wrote this post, but still unreliable. It does, actually. Sometimes. One of the big risks of using ARIA to define text content is that it often gets…

Accessible Rich Internet Applications (ARIA) is one of the most powerful tools in a developer’s accessibility toolkit—but it’s also one of the most misunderstood. While ARIA can improve accessibility when used correctly, misuse can actually make things worse for users who rely on assistive technologies (AT), such as screen readers. So, how do you use […]

Same, same but different. Let's find out how to (not) use which attribute!

We're excited to announce the availability, as a developer and origin trial, of ARIA Notify, a new API that's designed to make web content

The output HTML element is an ARIA live region by default.

The [aria-label] attribute is used to provide an accessible name to an element that might not otherwise have one. For example, let’s say you have a button that’s used to download a file. Instead of text, it includes a download icon as an inline SVG, like this… button svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 16 16"path fill="currentColor" d="M13.922 5.626A3.72 3.72 0 0010.205 2a3.712 3.712 0 00-2.92 1.418 2.09 2.09 0 00-3.

Back when ARIA live regions were first developed, aria-atomic seemed like a good idea, in case a tool wanted to update a single node, but the only real way to represent the content was reading a co...

I’m Kitty Giraudel, a non-binary trans frontend developer based in Berlin, focused on accessibility and inclusivity.

Rough notes on Sara Soueidan's free chapter "Accessible notifications with ARIA Live Regions".

Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).

Screen reader and browser support tests for the aria-haspopup attribute.

Incorrect ARIA can actually cause more accessibility issues. Learn what else everyone should know about ARIA plus tips for using ARIA.