CODEWITHSUNDEEP
htmlcssaccessibilitywai-ariavoiceover
matteo
matteo

Reputation: 3067

How to make screan readers (e.g. VoiceOver) read the label of a link not visible graphically?

In a website's main navigation menu on the top of the page, the first element is a "home" link which links to "/". Visually, I need it to be rendered as a logo image, with no text, but for blind and visually impaired people, I want screen readers, such as VoiceOver, to read the link title.

Until recently, this used to work (trivial, as it should be):

<a href="/" title="Home">&nbsp;</a><!-- VoiceOver ignores the link :( -->

and the CSS would take care of styling it with a certain size and background image.

However, to my astonishment, now VoiceOver on iOS just ignores the link, as if it didn't exist, apparently "because" it has no content text (except for a space). I have verified that if I do put a text in it, it works. But I don't want the text to be visible to people who do see and don't need a screen reader.

So I have tried even this:

<a style="font-size:0" href="/" title="Home">Home</a><!-- VoiceOver still ignores the link :( -->

VoiceOver still ignores the link!! Apparently somebody has had the brilliant idea that if something is zero-sized and hence invisible to non-blind people, it should be considered as non-existent. Which, by the way, breaks all the tricks commonly used to enhance accessibility for blind people by adding invisible links.

Even this does not fix the issue:

<a style="font-size:0" href="/" title="Home" aria-label="Home">Home</a><!-- VoiceOver still ignores the link :( -->

So how do I get VoiceOver to read a link label that I don't want to be visible graphically?

Upvotes: 2

Views: 4584

Answers (2)

JeffG01
JeffG01

Reputation: 11

Steve Faulkner has a post about the title attribute that may be useful here and in many other situations. Steve's postenter link description here

Upvotes: 1

natejms
natejms

Reputation: 739

Best option:

Don't implement the image by setting it as the background to an empty element with CSS. The best option would be to use your traditional <img> tag like so:

<a href="/">
    <img src="logo.png" width="40" height="40" alt="homepage">
</a>

This would give you an image that doubles as a link that's 40px long and 40px wide using alt attribute, making it accessible. That being said, since I can't fully understand your situation, this may not be an option. If it's absolutely necessary that your link be presented as an empty element with a background image, read on.

The W3C has a technical specification called WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) that gives us some useful tools to increase the accessibility of less accessible web pages. Using aria-* attributes, you can easily make things like this work as intended.

Here, you have a few options:

Option 1 - aria-describedby

The aria-describedby attribute allows you to specify an element by ID that should be used to describe an element. In your case, you could use it like so:

<a href="/" aria-describedby="description">&nbsp;</a>
<span id="description" class="sr-only">Home page.</span>

Option 2 - aria-hidden

The other option would be to hide the element all together while the page is being read by a screen reader. This could look something along the lines of the following:

<a href="/" title="Home">
    <img src="logo.png" width="40" height="40" aria-hidden="true">
    <span class="sr-only">Home page.</span>
</a>

In those examples, the text used to describe the elements is hidden using the .sr-only class. This, obviously, won't do anything unless you style the content in a way that hides it on all devices other than screen readers (unless you're using Bootstrap, as .sr-only is a component of Bootstrap). To style it, you could do the following as mentioned in this Stack Overflow post.

.sr-only {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

Wikipedia: WAI-ARIA
The W3C: Using ARIA

Upvotes: 3

Related Questions