In terms of SEO, what are the implications if you mix h1, h2, h3, etc with role="heading", if any? For example:

<div role="heading" aria-level="1">Header 1</div>
<h2>Header 2</h2>
<h3>Header 3</h3>

This is basically how our website was set up by a third party and I'm reviewing potential issues.

Thank you in advance


According to the Mozilla website, about the «ARIA: heading role»:

The best way to use this role is to not use it at all, and instead use the native heading tags through as shown in the example above. The heading role and aria-level attribute should only be used to retrofit accessibility on legacy code that you cannot make major changes to.

Also, about using ARIA:

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.

WAI-ARIA roles are designed thinking on accessibility, to give semantical meaning where default HTML elements can't. Since there are heading elements for it, use them. Searchers and their crawlers are designed to find and read headings (h1-h6), more than accessibility roles (which are designed for specific devices).

It's important that your site has an h1 element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.