E-mail List Archives
Thread: Images src has empty alt tag, but has a title, what to advise?
Number of posts in this thread: 3 (In chronological order)
From: Birkir R. Gunnarsson
Date: Tue, Oct 25 2011 11:15PM
Subject: Images src has empty alt tag, but has a title, what to advise?
No previous message | Next message →
Hi
I am reviewing a webpage with a lot of alt text issues.
In many places there are links with embedded images such as:
<li class="boxfors-first">
<a href="/frett/ras-1/saelkeraferd-listanna"
title="Menning"
class="fmynd fmynd3">
<img src="http://www.ruv.is/files/imagecache/frmynd-minni-120x90/myndir/voluspa_salur_0.jpg"
alt=""
title="Völuspá í Norræna húsinu. Áhorfendur fylhjast með sköpun jarðar."
class="imagecache imagecache-frmynd-minni-120x90 imagecache-default
imagecache-frmynd-minni-120x90_default" width="120" height="90" /></a>
<div class="frett"><h3>
<a href="/frett/ras-1/saelkeraferd-listanna">
Sælkeraferð listanna
</a></h3>
Völuspá í Norræna húsinu er sælkeraferð fyrir öll skilningarvitin.</div>
</li>
(www.ruv.is currently line 435, although it will change as news
stories are added).
Jaws does not read the title of the image, so I am wondering whether
to advise tht the alt attribute have the same text as the title
attribute.
What complicates this further is that the headline after the picture
(the link after the picture in other words) contains basically the
same information as the title of the image.
The effectof this, for Jaws with IE at lesat, is that it shows an empy
line with a bullet at its beginning, like an empty list item.
So, do I advise that the alt attribute contina the same text as the
title attribute, or is there a way to hie the picture altogether from
screen readers (i.e., they seem to pick up on someting when the alt
attribute is empty, but the title element is not).
I hope this question is not too newbie, I am coing across new and
little things every day, now that I am more involved in the actual
nitty gritty of the code, and I'd like to get best practice advice. :)
Thanks very much
-Birkir
img
From: Priti
Date: Wed, Oct 26 2011 3:03AM
Subject: Re: Images src has empty alt tag, but has a title, what to advise?
← Previous message | Next message →
Hi Birkir,
If I understand the issue correctly, the best solution to advise here would
be to present the text link (heading text in your example) and image link as
one & provide an empty alt for the image and any screen reader would read
the textual link and repetition can be avoided to improve usability for
screen reader users. If some how this can not be done due to design
constraints, provide the same information as is specified in the title
attribute as well in the alt attribute to ensure that the link information
is descriptive even though repetitive.
Hope this helps.
Thanks & Regards,
Priti Rohra
Accessibility Consultant
Twitter: http://www.twitter.com/pritirohra
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R.
Gunnarsson
Sent: Tuesday, October 25, 2011 6:23 AM
To: WebAIM Discussion List
Subject: [WebAIM] Images src has empty alt tag, but has a title, what to
advise?
Hi
I am reviewing a webpage with a lot of alt text issues.
In many places there are links with embedded images such as:
<li class="boxfors-first">
<a href="/frett/ras-1/saelkeraferd-listanna"
title="Menning"
class="fmynd fmynd3">
<img
src="http://www.ruv.is/files/imagecache/frmynd-minni-120x90/myndir/voluspa_s
alur_0.jpg"
alt=""
title="Völuspá í Norræna húsinu. Áhorfendur fylhjast með sköpun jarðar."
class="imagecache imagecache-frmynd-minni-120x90 imagecache-default
imagecache-frmynd-minni-120x90_default" width="120" height="90" /></a>
<div class="frett"><h3>
<a href="/frett/ras-1/saelkeraferd-listanna">
Sælkeraferð listanna
</a></h3>
Völuspá í Norræna húsinu er sælkeraferð fyrir öll skilningarvitin.</div>
</li>
(www.ruv.is currently line 435, although it will change as news
stories are added).
Jaws does not read the title of the image, so I am wondering whether
to advise tht the alt attribute have the same text as the title
attribute.
What complicates this further is that the headline after the picture
(the link after the picture in other words) contains basically the
same information as the title of the image.
The effectof this, for Jaws with IE at lesat, is that it shows an empy
line with a bullet at its beginning, like an empty list item.
So, do I advise that the alt attribute contina the same text as the
title attribute, or is there a way to hie the picture altogether from
screen readers (i.e., they seem to pick up on someting when the alt
attribute is empty, but the title element is not).
I hope this question is not too newbie, I am coing across new and
little things every day, now that I am more involved in the actual
nitty gritty of the code, and I'd like to get best practice advice. :)
Thanks very much
-Birkir
img
From: Jared Smith
Date: Wed, Oct 26 2011 3:45AM
Subject: Re: Images src has empty alt tag, but has a title, what to advise?
← Previous message | No next message
On Mon, Oct 24, 2011 at 6:52 PM, Birkir R. Gunnarsson wrote:
> I am reviewing a webpage with a lot of alt text issues.
Indeed. The markup you presented is pretty messed up. The <h3> appears
in markup after an image that it describes. There are two adjacent
links to the same location. There are title attribute values defined
that wouldn't be provided to the user or that are redundant to visual
text. It seems really odd to have a heading inside a list item. Etc.
The biggest question is whether the 2nd link's text adequately
provides the alternative for the image. If so, then as Priti notes,
combining everything into one link and (possibly) heading will do the
job. Something like this (code greatly simplified):
<h3><a href="/frett/ras-1/saelkeraferd-listanna"><img
src="voluspa_salur_0.jpg" alt="" />Sælkeraferð listanna<a/></h3>
<div>Völuspá í Norræna húsinu er sælkeraferð fyrir öll skilningarvitin.</div>
Not understanding the content, this seems to be more appropriate. Of
course you could use CSS and maybe line breaks to get the same visual
presentation. If the title text is useful advisory information, but
not redundant with visible text, it could be added to the link or the
image as appropriate. This title text wouldn't be available to anyone
except sighted mouse users that happen to hover the mouse over the
image.
Jared