Notes on ARIA Use in HTML

-
-

First Rule of ARIA Use

+
+

First Rule of ARIA Use

If you can use a native HTML element [[HTML]] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Under what circumstances may this not be possible?

    @@ -203,7 +203,7 @@

    First Rule of ARIA Use

  • If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.
  • If the feature is not currently available in HTML.
-

Second Rule of ARIA Use

+

Second Rule of ARIA Use

Do not change native semantics, unless you really have to.

For example: Developer wants to build a heading that's a tab.

Do not do this:

@@ -212,7 +212,7 @@

First Rule of ARIA Use

<div role=tab><h2>heading tab</h2></div>

If a non-interactive element is used as the basis for an interactive element, developers have to add the semantics using ARIA and the appropriate interaction behavior using scripting. In the case of a button, for example, it is much better and easier to Just use a (native HTML) button.

It is OK to use native HTML elements, that have similar semantics to ARIA roles used, for fallback. For example, using HTML list elements for the skeleton of an ARIA-enabled, scripted tree widget.

-

Third Rule of ARIA Use

+

Third Rule of ARIA Use

All interactive ARIA controls must be usable with the keyboard.

If you create a widget that a user can click or tap or drag or drop or slide or scroll, a user must also be able to navigate to the widget and perform an equivalent action using the keyboard.

All interactive widgets must be scripted to respond to standard keystrokes or keystroke combinations where applicable.

@@ -220,7 +220,8 @@

First Rule of ARIA Use

Refer to the Design Patterns and Widgets and Developing a Keyboard Interface sections of [[WAI-ARIA-PRACTICES-1.2]]

-
+
+

Fourth Rule of ARIA Use

Do not use role="presentation" or aria-hidden="true" on a focusable element .

Using either of these on a focusable element will result in some users focusing on 'nothing'.

@@ -243,7 +244,7 @@

Fourth Rule of ARIA Use

it won't be focusable, and it will also be removed from the accessibility tree. This makes the addition of aria-hidden="true" or explicitly setting tabindex="-1" unnecessary.

-

Fifth Rule of ARIA Use

+

Fifth Rule of ARIA Use

All interactive elements must have an accessible name.

An interactive element only has an accessible name when its Accessibility API accessible name (or equivalent) property has a value.

For example, the input type=text in the code example below has a visible label 'user name' , but no accessible name: