Nu HTML Checker show "Possible misuse of aria-label." for the special structure

Question

I designed some special structure for the project effect and set the aria-label attribute on the tag. But Nu HTML Checker tells me that "Possible misuse of aria-label. "

<h3 aria-label="Contact">
    <span aria-hidden="true" class="char-wrapper">c
        <svg class="char-svg char--c">
            <use xlink:href="#char--c"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">o
        <svg class="char-svg char--o">
            <use xlink:href="#char--o"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">n
        <svg class="char-svg char--n">
            <use xlink:href="#char--n"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">t
        <svg class="char-svg char--t">
            <use xlink:href="#char--t"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">a
        <svg class="char-svg char--a">
            <use xlink:href="#char--a"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">c
        <svg class="char-svg char--c">
            <use xlink:href="#char--c"></use>
        </svg>
    </span>
    <span aria-hidden="true" class="char-wrapper">t
        <svg class="char-svg char--t">
            <use xlink:href="#char--t"></use>
        </svg>
    </span>
</h3>

Am I use it wrong? How do I fix this warning?

Answer 1

h1-h6 are accessible by default, thats why the aria-label attribute is marked as "possible misuse".

If you want to show text only to screen readers, try this solution: https://css-tricks.com/inclusively-hidden/

On your code, this would look something like that:

<h3 aria-label="Contact">
    <span class="sr-only">Contact</a>
    <span aria-hidden="true" class="char-wrapper">c
        <svg class="char-svg char--c">
            <use xlink:href="#char--c"></use>
        </svg>
    ...
</h3>

CSS:

/* Hiding class, making content visible only to screen readers but not visually */
/* "sr" meaning "screen-reader" */

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}