E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: A small doubt on alt text

Number of posts in this thread: 8 (In chronological order)

From: Ravi Jain
Date: Mon, Feb 18 2013 12:42AM
Subject: A small doubt on alt text
No previous message | Next message →

Hello friends ,

This is my first mail at Web-Aim.
I will definitely give my intro , but first please clear my small doubt .
We know that as per WCAG 2.0
SC ID 5 2.4.4 (OPERABLE) Link Purpose (In Context) / Check for
meaningful link text we know that }The purpose of each link should
be determined from link text alone or from it's programmatic context.
i.e don't contain only phrases like click here, read more, etc "

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 .

Please note , I am using Mozilla Firefox 16.0.2 or Internet Explorer
9.0 on Windows 7

Thanks & Regards in Advance

Ravindra Kumar Jain

Accessibility Engineer
Onya Digital Solutions Pvt. Ltd.
Bangalore (India)
------------------------------------------

From: Jukka K. Korpela
Date: Mon, Feb 18 2013 1:20AM
Subject: Re: A small doubt on alt text
← Previous message | Next message →

2013-02-18 9:42, Ravi Jain 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 .

A link does not need alt text and cannot have one: the alt attribute on
an <a> element is not valid in any HTML specification and gets ignored
by browsers and search engines.

If the <a> element contained an image (only), then the <img> element -
not the <a> element - would need an alt attribute in order to make the
link meaningful even when the image is not seen.

The title attribute is allowed in an <a> element, and it is usually
displayed in a tooltip popup in graphic browsers and may be made
optionally available by assistive software. But it is not required, and
should not be relied on. It is just a way to give additional hints. Due
to usability and accessibility issues with tooltip implementations, it
has become increasingly common to use "CSS tooltips" instead. This
typically means that the extra text appears in an element after the <a>
element and becomes visible on mouseover. In nonvisual rendering, the
extra text may appear as normal content, or it may not appear at all,
depending on implementation.

The label attribute is invalid and gets ignored on <a> elements.

The aria-label attribute defines a string value that labels the current
element. It is meant for elements, typically controls, that have no
visible label on screen, such as a graphic widget created by
technologies other than a simple <img> element. So I don't think
aria-label would be adequate for an extended or alternate formulation of
a link text - the title attribute is more suitable for that.

Yucca

From: Joe Chidzik
Date: Mon, Feb 18 2013 1:29AM
Subject: Re: A small doubt on alt text
← Previous message | Next message →

> 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 a UAHC camp in Utica, MS</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

From: Birkir R. Gunnarsson
Date: Mon, Feb 18 2013 9:58AM
Subject: Re: A small doubt on alt text
← Previous message | Next message →

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 ADDRESS 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 a UAHC
> camp in Utica, MS</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
>
>
>
>
> > > >

From: Joe Chidzik
Date: Tue, Feb 19 2013 1:40AM
Subject: Re: A small doubt on alt text
← Previous message | Next message →

> 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.

[Joe Chidzik]
Out of curiosity, I tried the following example with JAWS IE9.

<a href="page2.html" aria-describedby="link-page2">Jacobs Camp </a>HS Jacobs - a UAHC camp in> Utica, MS
<a href="page2.html">Jacobs Camp HS Jacobs - a UAHC camp in> Utica, MS</a>

The first link uses aria-describedby to attach some (hidden by CSS) descriptive text to the link, the second example uses CSS to hide the descriptive text off-screen, but leaves it within the link element. Whilst both examples read out almost identically when tabbing through the page, they display differently within the JAWS link list. These appear in the links list as:

-"Jacobs camp"
-" Jacobs Camp HS Jacobs - A UAHC camp in Utica, MS"

The second example appearts more useful in this sense, as the descriptive information is available within the links list. Perhaps it would make sense for JAWS to pick up and include text added via aria-describedby when displaying links in the links list, or form elements in the JAWS forms list.

Joe

From: Pratik Patel
Date: Tue, Feb 19 2013 3:06AM
Subject: Re: A small doubt on alt text
← Previous message | Next message →

Hello all,

I realize that this has been a great discussion. And the solutions provided
to the original problem appeared to be accurate and most part. However I
would like to raise one question and a bit of a concern looking at the
original example, I wonder if there's a need for alternative text at all.
The question that I would ask when creating this kind of link is why is the
blind person receiving this additional information? What use does the link
text actually serve? And what use does the alternative text serve? Is it
even necessary to provide the additional information to the blind person
when this information is not given to the sighted person? Does the context
surrounding the link itself provide this additional information to the
sighted person that a blind person is not getting? While it is important for
us to comply with WCAG Criteria, it is also important for us to keep in mind
that these criteria should not be taken so literally. The mindset of
compliance often appears to take over real usage patterns. Rather than
asking fundamental questions about the content, the focus is so much on the
WCAG Criteria that the real usage shifts away from the user. I think there's
always a value to asking basic questions over fancy techniques.

Sorry for the mini rant.

Regards,

Pratik

Pratik Patel
Founder and CEO, EZFire
T: 718-928-5529
M: 718-249-7019
E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
Follow me on Twitter: @ppatel
Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik

From: Ravi Jain
Date: Tue, Feb 19 2013 3:24AM
Subject: Re: RE; A small doubt on alt text
← Previous message | Next message →

Hi All,
Well first of all many thanks to Jukka , Joe & Birkir and all Web-Aimers.

@ Jukka : Thanks your response cleared lot of my concepts.
@ Joe , Well I am using NVDA 2012.3.1 and Jaws 13 and yes, "aria-label"
was working with Jaws but not with NVDA.
and thanks for giving me the alternative solution for it using CSS.
@ Birkir , Interesting points on aria-describedby and aria-hidden

The response by you all was very fast and accurate.

Also , Friends

I am working as Accessibility Engineer @ Onya Digital Solutions in
Bangalore (India).
We work on Online Web and Mobile based applications for our U.S. and
Middle East Based clients.
By now you must have guessed about my Roles and Responsibilities.

Currently , I have just 6 months of exp in this field, which will grow
as i explorer more and more about Accessibility and Usability.
I am a VI and have completed Master in Computer Application (M.C.A)
from one of the Indian Universities.
Hope to grow with all you ppl's guidance.

Regards,

Ravindra Kumar Jain

From: Subhash Chhetri
Date: Tue, Feb 19 2013 9:07PM
Subject: Re: A small doubt on alt text
← Previous message | No next message

Hi Pratik,

It is not always necessary to have additional information attached to each
link for a blind person or Screen reader user, it all depends upon the
designing of a page.

For example, if there is a table of multiple rows having "filename" in left
most column and rest two columns contain "edit" and "delete" link
corresponding to the file, there's it becomes necessary to provide
additional information within link itself for a Screen reader user.

Because, these links stand alone and incomplete for Screen reader user while
browsing same from link list, but if filename is also attached to these
links itself, same become more meaningful for those.

Best regards,
Subhash Chhetri