Describe ARIA roles and when to apply them in HTML for accessibility.

• A. ARIA roles replace all native HTML semantics.
• B. ARIA roles describe widget semantics when native HTML elements are insufficient; use roles to convey purpose (navigation, toolbar) and ensure they do not override native semantics.
• C. ARIA roles should never be used with native elements.
• D. ARIA roles only apply to visually hidden content.

Answer: (C)

ARIA roles are a way to describe an element’s function to assistive technologies when the native HTML semantics don’t cover a custom control. They should be used to convey the purpose of an element—like navigation or a toolbar—especially when you’re building something with non-semantic containers (such as divs or spans) that can’t express its meaning through native elements alone. The important practice is to prefer native HTML semantics whenever possible and only use ARIA roles to augment when there isn’t a suitable native element. When you do apply roles to non-native controls, pair them with proper keyboard interactions and state attributes (for example, aria-expanded or aria-pressed) so the widget communicates its current state clearly to assistive technologies. ARIA is not about replacing native semantics; it’s about enhancing accessibility for cases that native HTML cannot express. And these roles aren’t limited to visually hidden content—they apply to visible UI components as well.