htmlaccessibilitywcag

When do I not need to use h1-h6 headers to create emphasised text


Can I use syntax such as

<span class="subheader-uline">My custom emphasised text</span>

without contravening accessibility rules (WCAG)? I don't intend this custom header to be navigated via screen readers; it's purely aesthetic.

I tried to use this syntax and it's flagged as illegal in accessibility stating I should use a h1 - h6 tag, which I don't want to do.


Solution

  • You can try to use the aria-hidden to hide non-interactive content from the accessibility API.

    <span class="subheader-uline" aria-hidden="true">My custom emphasised txt</span>