skip to Main Content

Can i use syntax such as

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

Without contravening accessibility rules (WCAG) I dont intend this custom header to be navigated via screen readers -its purely aesthetic.

I tried to use this syntax and its flagged as illegal in accessibility stating i should use a h1 – h6 tag which i don’t want to do.

2

Answers


  1. 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>
    
    Login or Signup to reply.
  2. Usage or not of H1-H6 shouldn’t depends on aesthetic, or if you want or not to have that element navigated by screen readers.
    It should only depends on the natural meaning of the text, which is commonly called semantics.

    Is it an heading ? If yes, you should use H1-H6. If it isn’t a heading but rather some emphasized text, you shouldn’t use H1-H6 but more appropriate elements such as strong or em.
    Determining if your text is a heading or not should be obvious, normally.

    Aesthetic should never dictate which element to use, since you can always do what you want in CSS:

    Similarly, you shouldn’t assume that the element is useless for screen reader users and shouldn’t be included in screen reader navigation.
    If it’s really a heading, it’s necessarily important enough to be included in navigation. If you don’t feel it to be important enough, probably that it isn’t really a heading.

    IN short, it should be an all-or-nothing. Whether it’s a heading, goes with the associated aesthetic/layout, and it implies appearing in navigation and table of contents. Or it isn’t a heading, it doesn’t appear in any navigation, and you shouldn’t fake the aesthetic to make it appear as a heading visually.

    It isn’t uncommon to add supplementary headings not displayed on screen especially made for screen readers to help in navigation, but the opposite just sounds wrong.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search