When should ARIA be added in UI design?

When should ARIA be added in UI design?

• A. For all elements to enhance semantics
• B. Only when necessary and maintain logical DOM order
• C. Instead of native HTML semantics
• D. ARIA is never needed

Answer: (B)

ARIA should be added only when necessary and with a logical DOM order. Use native HTML elements whenever possible because they come with built-in accessibility features. If you must create a custom widget with non-semantic elements, apply ARIA roles and properties to convey the correct meaning and state, and ensure the control remains keyboard accessible and behaves like its native counterpart. Use labeling attributes (aria-label or aria-labelledby) to describe controls and ARIA state attributes (such as aria-pressed, aria-expanded, aria-checked, aria-valuenow) to reflect dynamic changes. Avoid using ARIA to patch over poor semantics or to decorate visuals without meaning. Remember that ARIA can't fix a disordered DOM, so the document flow should be logical for assistive technologies, and ARIA should supplement—not replace—native semantics.

ARIA should be added only when necessary and with a logical DOM order. Use native HTML elements whenever possible because they come with built-in accessibility features. If you must create a custom widget with non-semantic elements, apply ARIA roles and properties to convey the correct meaning and state, and ensure the control remains keyboard accessible and behaves like its native counterpart. Use labeling attributes (aria-label or aria-labelledby) to describe controls and ARIA state attributes (such as aria-pressed, aria-expanded, aria-checked, aria-valuenow) to reflect dynamic changes. Avoid using ARIA to patch over poor semantics or to decorate visuals without meaning. Remember that ARIA can't fix a disordered DOM, so the document flow should be logical for assistive technologies, and ARIA should supplement—not replace—native semantics.