Skip to content

When to use ARIA markup

Use all the accessibility features built into HTML. Then use ARIA attributes in places where HTML cannot adequately convey the information. Developers should use the correct semantic HTML element if at all possible. ARIA is then used where an HTML element does not exist.

There is a saying that “No ARIA is better than bad ARIA.” While ARIA is designed to make web pages more accessible, if used incorrectly, it can create unnecessary confusion or redundancy.

Choose the most meaningful semantic HTML markup possible. Accessibility tools rely on these elements to discover the content meaning:

<header>, <footer>, <aside>, <article>, <p>, <main>, <nav>, <button>, <table>, <ul>, and <ol>.

The least meaningful markup in HTML5 are spans, divs, and sections.

ARIA roles

ARIA roles identify the type of user interface element. Add an ARIA role when it adds another layer of meaning. Use only one ARIA role per attribute and avoid being repetitive. ARIA states and properties are attributes that further define an ARIA role.

Hiding content

aria-hidden="true"

The aria-hidden attribute can be used to hide non-interactive content from the accessibility API. Adding aria-hidden=”true” to an element removes that element and all of its child elements from the accessibility tree. The element is visible on screen.

Resources