Anchor element found with a valid href attribute, but no link content has been supplied

Question

I am trying to modify my site so that it complies with the WCAG standards. I am generating links with no content but these are marked as errors.

I have been redirected to the fix by the editor(H91) but it does not really solve my case.

How should I approach this?

Example of current link:

 <a name="dbcaddi:hasSubjectDescription"></a>

Answer 1

If your link is meant to be an anchor, just add an id attribute with same value as name.

If it is meant to be an actual link, that a user may activate, you need to provide it a "link text", i.e. some descriptive text between <a> and </a>.

This is required for accessibility because some users (e.g. screen-reader users) list all links of a page to quickly understand it.

As an application developer, if your link is empty you should remove it, and when needed (JS event or so) add the whole complete and functionnal stanza: <a href="...">blabla</a>

(By the way, if you use some JS/AJAX, you should give a review at WAI-ARIA concepts).

Answer 2

if you are using an icon as your content then just add a screen reader only span inbetween your elements.. this will then pass the test

<a> <span class="sr-only">some text that relates to your link</span> <i class="icon"> </i> </a>

Answer 3

Eventually I ended up to add and hide this inside the link:

 <span>&nbsp;</span>