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

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" >c
        <svg >
            <use xlink:href="#char--c"></use>
        </svg>
    </span>
    <span aria-hidden="true" >o
        <svg >
            <use xlink:href="#char--o"></use>
        </svg>
    </span>
    <span aria-hidden="true" >n
        <svg >
            <use xlink:href="#char--n"></use>
        </svg>
    </span>
    <span aria-hidden="true" >t
        <svg >
            <use xlink:href="#char--t"></use>
        </svg>
    </span>
    <span aria-hidden="true" >a
        <svg >
            <use xlink:href="#char--a"></use>
        </svg>
    </span>
    <span aria-hidden="true" >c
        <svg >
            <use xlink:href="#char--c"></use>
        </svg>
    </span>
    <span aria-hidden="true" >t
        <svg >
            <use xlink:href="#char--t"></use>
        </svg>
    </span>
</h3>

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

CodePudding user response：

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 >Contact</a>
    <span aria-hidden="true" >c
        <svg >
            <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;
}