CODEWITHSUNDEEP
html
Code lover
Code lover

Reputation: 93

HTML-Aria-label not accepting on anchor tag

I am trying to apply Aria-label but it is throwing error when I try to validate it for STQC.

2.4.4 Link Purpose (In Context)

The WAI-ARIA 'aria-label' attributes should be descriptive of the links they are labelling, since the 'aria-label' will overwrite other link text.

Here is my sample code

<li>test1
  <a  href="/test/abc/0219/test.pdf" aria-label="-detail for abc" title="test"  target="_blank">-Click here</a>
</li>

Upvotes: 3

Views: 10208

Answers (3)

jzuhri
jzuhri

Reputation: 812

Move the aria-label inside the li tag

<li aria-label="-detail for abc"><a href="">click here</a></li>

Upvotes: 0

lucalanca
lucalanca

Reputation: 675

aria-label can be used with a elements. Not sure what are you referring when you mention STQC, but you can see a descriptive list of elements that can be used with aria-label

Upvotes: 2

Ravi Chauhan
Ravi Chauhan

Reputation: 1477

It's an attribute designed to help assistive technology (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

aria-label does much the same thing, but it's for those cases where it isn't practical or desirable to have a label on screen. Take the MDN example:

<button aria-label="Close" onclick="myDialog.close()">X</button>

Most people would be able to infer visually that this button will close the dialog. A blind person using assistive technology might just hear "X" read aloud, which doesn't mean much without the visual clues. aria-label explicitly tells them what the button will do.

Upvotes: 0

Related Questions