HuntExams Academy
HTML/CSSIntermediate#accessibility#aria

What is ARIA and when should you use it?

ARIA (Accessible Rich Internet Applications) attributes like role, aria-label, aria-hidden, and aria-expanded add accessibility semantics to elements, especially custom widgets that native HTML doesn't cover. The first rule of ARIA: prefer native semantic HTML elements over ARIA when possible.

Example
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" role="menu" hidden>
  <li role="menuitem">Home</li>
</ul>

Related Questions

1
HTML/CSSAdvanced#accessibility#aria

How do you make a custom dropdown accessible?

Open
2
HTML/CSSAdvanced#accessibility

What is the accessibility tree and how does it relate to the DOM?

Open
3
HTML/CSSBeginner#accessibility#html

How do you ensure images are accessible?

Open