Anchor has content question

[rafaelmaiach]

Hi, I have a anchor tag that is an icon and, because of that, it has no text related to it. I've made some research and it seems we can use aria-label in scenarios like that. But, adding aria-label to the anchor tag, it still shows the error "vuejs-accessibility/anchor-has-content".

Should this rule consider a valid content, when the tag has aria-label attribute?

Thank you

[TheJaredWilcurt]

I think the idea behind this is to have people go from code like this

<a href="/help.html" class="help-icon"></a>

to something like this

<a href="/help.html" class="help-icon font-size-0">Help/FAQ</a>

[rafaelmaiach]

Sure @TheJaredWilcurt , you have a great example. But, in the case I mentioned, is sometimes we will have just icons / buttons to represent the information, because a label wouldn't have a good fit on the design. To don't mess with accessibility, is where aria-* come in, for example, aria-label.

I don't know if my understanding about this topic is wrong, but it seems to make sense have aria-label to prevent the need of a visible label.

[kddnewton]

Hey @rafaelmaiach,

Here's the link to the deque university rule: https://dequeuniversity.com/rules/axe/1.1/link-name.
Here's the link to the aria spec: https://www.w3.org/TR/html-aapi/#a-element.

Reading these, to be honest I'm not entirely sure what to go with. The deque stuff seems to indicate you need a discernable "name", but that "name" may be covered by aria-label? I'll ask around and see what I can come up with and come back to this issue.

[rafaelmaiach]

Thank you @kddeisz for those links. I've search a little bit more too, and I got these

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose (This one, in special, shows a link with a label bigger than the visible text, so I think to use it for not visible is okay too)

[ktquez]

This happened to me and I believe that the aria-label could be accepted.

---

One option would be to use a sr-only class helper.

e.g.

<a href="/help.html">
  <my-icon name="help" aria-hidden="true" />
  <span class="sr-only">Help/FAQ</span>
</a>

[TheJaredWilcurt]

The "Screen-Reader Only" classes used in Bootstrap:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

[kddnewton]

Hey all. I've added support for this in the linked PR. Going to release a new version soon.