The First Rule of ARIA

Accessibility issues are often addressed by adding ARIA roles, states, and properties. But it’s important to remember the First Rule of ARIA.

The First Rule of ARIA:

If you can use a native HTML element with built-in semantics, use it instead of adding ARIA attributes or roles.

For example, as shown in the image, if it’s a list — use the ul and li tags, not a div with the roles 'list' and 'listitem'.

Sometimes developers avoid semantic elements because these tags have default styles. To avoid overriding these styles in CSS, some choose the faster option — adding an ARIA role to a div. However, this is the wrong approach from an accessibility standpoint. Do not neglect semantic tags. It’s better to write a few additional lines of CSS.

Accessibility is a priority.