WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A small doubt on alt text

for

From: Birkir R. Gunnarsson
Date: Feb 18, 2013 9:58AM

Thanks for a great summary of the situation gentlemen, nicely put.
In case there is a CSS tooltip text outside of the <a> wouldn't it
make the most sense to recommend that text be referred to with
aria-describedby inside the link, but then the text itself be hidden
from screen reader users (aria-hidden), so as to avoid double speaking
it?
Of course I do need to test what would happen if a text with
aria-hidden="true" is referenced by aria-describedby.
If you have an example of a page with a CSS tooltip, it'd be
interesting to explore it, that or further reading.
Cheers
-Birkir


On 2/18/13, Joe Chidzik < <EMAIL REMOVED> > wrote:
>> 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
>
>
>
>
> > > >