Table of Contents

ARIA

ARIA is a group of HTML properties and attributes that describe an element’s role, name, and state. Each of these attributes affects the way screen readers announce the element and what keyboard shortcuts it provides.

The WAI-ARIA specification exposes built-in browser semantics that are used by assistive technologies (primarily screen readers), and allows us to manipulate them to provide better in-page navigation and support for interactive elements. However, there are many instances where ARIA can be misused. The W3C’s ARIA Authoring Practices Guide states that “No ARIA is better than bad ARIA,” because using ARIA to override browsers’ native accessibility features is often worse than leaving them alone.

ARIA in Angular

Note that in Angular, all ARIA attributes outside of forms must be prefixed: for example, you could use attr.aria-describedby="{{id}}" to add a description attribute to a button or a link that is not inside a form. If your ARIA attribute disappears during the build process, prefix it.

ARIA and WCAG Testing

Deque maintains a list of ARIA-related WCAG violations flagged in Axe, with a ranking of their impact and a link to the ACT-Rules community explanation of the issue. These explanations are extremely thorough and contain numerous code examples.