WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A small doubt on alt text

for

From: Joe Chidzik
Date: Feb 18, 2013 1:29AM

> In the following example , none of the markups is announcing the "alt" text can
> anybody point out , where i am going wrong in the following example
> Ex:
> <a href="page1.html" label="HS Jacobs - a UAHC camp in Utica, MS">Henry S.
> Jacobs Camp</a> <a href="page2.html" aria-label="HS Jacobs - a UAHC camp in
> Utica, MS">Jacobs Camp</a> <a href="page3.html" alt="HS Jacobs - a UAHC
> camp in Utica, MS">Henry S. Jacobs Camp</a> <a href="page4.html" title="HS
> Jacobs - a UAHC camp in Utica, MS">Henry S. Jacobs Camp</a>
>
> None of the above links is announcing alt text .

[Joe Chidzik] Hi Ravindra,

The label attribute used in your examples does not exist, and the alt text attribute is used for images. The aria-label attribute in your example worked for me, however, with the NVDA screenreader and Firefox 18. What screenreader did you test with?

An alternative to using the aria-label attribute is to append some hidden, descriptive text to the link text. This descriptive text is hidden from view, but still accessible to screenreaders e.g.

<a href="page1.html">Henry S Jacobs <span class="screenreader-text">a UAHC camp in Utica, MS</span></a>

The CSS for this hidden text would look something like:

.screenreader-text {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

This hides the descriptive text offscreen, leaving it accessible to screenreader users.

(This example taken from: http://yaccessibilityblog.com/library/css-clip-hidden-content.html )

Whilst the title attribute can be used in the example you've given, it is not typically read out by screenreader users by default, so if you are aiming to make these links more descriptive for screenreader users, the above technique may be beneficial.

Of course, using link text that is descriptive by itself would be preferable e.g. "<a href="Page1.html">Henry S Jacobs (A UAHC camp in Utica, MS)</a>

You may want to include an explanation of the UAHC acronym if it is not described elsewhere on the page.

Joe