ARIA Headings

In situations where native HTML headings (<h1> - <h6>) cannot be used—typically when remediating legacy code—ARIA can programmatically create a heading from a non-semantic element like a <div>.

This requires two attributes:

• role="heading": Identifies the element as a heading.
• aria-level="[number]": Specifies the heading level (e.g., "2" for <h2>).

So an accessible ARIA heading could look like this:

<div role="heading" aria-level="2">This functions as an H2</div>

Important Restriction

This technique is exclusively for converting non-heading elements. Never use aria-level to change the semantic level of a native heading tag. This is invalid and will be ignored or misinterpreted by browsers and assistive technologies.

Invalid Example

<h2 role="heading" aria-level="3">This is not allowed</h2>

Best Practices

• Limit the use of ARIA: Use ARIA attributes only when necessary. If standard HTML elements work, such as <h1> and <h2>, stick with them. They are generally more accessible out of the box.
• Check with tools: There are numerous tools such as ANDI or the Web Developer Toolbar that will expose the heading structure of your page. Use tools like this to double check that the structure is correct.
• Test with Assistive Technologies: Always check how your headings perform with screen readers and other assistive tools. This ensures your content is truly accessible.

By following these steps and using ARIA appropriately, you can create clear and accessible headings in your web content. This not only benefits users with disabilities but improves the overall user experience for everyone.