Adhere to the rules of HTML

While ARIA can be used to alter the way HTML features are exposed to users of assistive technologies, these modifications do not change the underlying parsing and allowed content models of HTML. For instance, a div allows an author to specify any role on it. However, this does not mean that the element can then be used in a way that deviates from the rules HTML has defined for the element.

For instance, in the following example an author has specified a role of link on a div element. While HTML allows for a hyperlink (exposed as a role=link) to be a descendant of a p element, the HTML parser does not allow a div to be a descendant of a p element.

Revised ARIA semantics with invalid HTML nesting

<!-- Do not do this! -->
<p>
  ... <div role=link tabindex=0>...</div> ... 
</p>

The HTML parser will modify the above markup to be output as the following:

Unwanted rendered markup with a valid alternative solution

<!-- The previous example's markup will render as follows -->
<p>...</p>
<div role=link tabindex=0>...</div> 
... 
<p></p>

<!-- Use a span are allowed in p elements! -->
<p>
  ... <span role=link tabindex=0>...</span> ...
</p>

While this specification indicates the allowed ARIA attributes that can be specified on each HTML element, this example illustrates that even if a role is allowed, the context in which it is used can still result in potential rendering and accessibility issues.