Accessible method for image replacement with title (title and aria-label)

Question

On my web page I have an anchor (code below), which I visually display as an image (logotype) completely hiding the text. I'd like the anchor to be:

• accessible - read properly by screen readers,
• display a tooltip when hovered by mouse (the tooltip explains the image logotype, which may not be understood by everyone).

I use the following method:

HTML

<a href="http://some-institution.com"
   title="Some Institution"
   class="replace-text-with-image">Some Institution</a>

CSS

.replace-text-with-image {
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* Display the image. */
    width: <image-width>;
    height: <image-height>;
    background-image: url(<url-to-image>);
    background-size: <image-width> <image-height>;
    background-repeat: none;
}

The problems with the method above:

• A guy reported to me that on encountering the link his screen reader reads both the link's contents ("Some Institution") and then the link's title ("Some Institution" again), resulting in a "stutter".
• I read (in this article) that using title for accessibility is wrong and aria-label should be used instead.

So I tried re-factoring to use both aria-label and title:

<a href="http://some-institution.com"
   title="Some Institution"
   aria-label="Some Institution"
   class="replace-text-with-image">Some Institution</a>

Now NVDA (the screen reader I'm testing on) reads both title and aria-label attributes resulting in a stutter again.

Other possible solutions which won't work:

• When I remove the title attribute and leave only aria-label it's read fine, but I can't remove title attribute, as that's an explanation for the visual users that I want to have.
• I could also stay with just title attribute completely removing anchor's contents, but I feel having an empty anchor is not a particularly good practice, isn't it?

What's a solution for that problem?

Answer 1

First off, I would really encourage you to use the simplest possible markup, which would be an anchor element wrapped around an image element, like this: https://jsfiddle.net/pLuqqh8w/

You should be using the title attribute of your anchor element to describe the intent of the link (i.e. where it goes), and use the alt attribute to describe the intent of your image (i.e. what it is). This is how the technology is designed to work. The alt and title attributes should not be same thing.

That being said, if you REALLY want to have a tooltip that isn't announced by screen readers, here's how I would recommend doing it: https://jsfiddle.net/neht6v01/

EDIT: Using the title attribute isn't wrong per-se, it's just not something that should be relied upon because it has very spotty support among screen-reader/browser combinations.

Answer 2

You should think about which ARIA role you have to give.

The a[href] is a link. Can it be also an image? No. So, create an image.

<a href="http://some-institution.com" aria-label="Some institution">
   <span class="replace-text-with-image" role="img" title="Some institution">Some institution</span>
</a>

This way, the screenreader will announce the aria-label. And the title will be available to mouse users.

title is not bad for accessibility but can be useless for screenreaders. So you should not rely only on the title attribute but, as you perfectly pointed out, aria-label is useless for non-screenreader users.