Photo by Sigmund / Unsplash

Adhere to the rules of HTML

Accessibility Mar 5, 2023

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! -->
  ... <div role=link tabindex=0>...</div> ... 

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 -->
<div role=link tabindex=0>...</div> 

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

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.


Error to 200

Error to 200 means "Error to Success Status". Through this blog and youtube channel, I attempt to teach basics and those coding techniques to people in a short time, which took me ages to learn.