E-mail List Archives
Thread: Regarding images lacking alts
Number of posts in this thread: 14 (In chronological order)
From: Bryan Garaventa
Date: Tue, Dec 04 2012 2:26PM
Subject: Regarding images lacking alts
No previous message | Next message →
Hi, I still experience this all over the place on the web, and it's sort of annoying.
Here is a jQuery script that fixes it dynamically, though in a perfect world, it wouldn't be needed.
$('img').each(function(i, o){
var hasAlt = o.getAttributeNode('alt') ? true : false,
hasTitle = o.getAttributeNode('title') ? true : false;
if (!hasAlt) $(o).attr('alt', hasTitle ? o.title : '');
});
It can also be changed to throw an alert during development, such as
if (!hasAlt) alert("Missing Alt attribute: " + o.outerHTML);
From: Jukka K. Korpela
Date: Tue, Dec 04 2012 2:38PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
2012-12-04 23:26, Bryan Garaventa wrote:
> Hi, I still experience this all over the place on the web, and it's sort of annoying.
Images without alt attributes can be annoying, or worse, and so can
images with bogus alt attributes.
> Here is a jQuery script that fixes it dynamically
I don't see which problem it would solve. It just assigns an alt
property to any img element that lacks it, using the title attribute
value if present, and the empty string otherwise.
If an author has not provided the required, essential alt attribute but
has provided the optional, advisory title attributes, what are the odds
that the title attribute value is adequate for use in the role of an
attribute?
Besides, the operation would remove the distinction between images with
no alt attribute and images with alt="". The latter is explicit
information that says that nothing should appear instead of the image if
it is not displayed, normally because the image is decorative only or
its content is also presented in text. Lack of alt attribute is simply
lack of information about adequate text replacement.
Yucca
From: David Ashleydale
Date: Tue, Dec 04 2012 2:38PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
Cool.
Now run it on every web site everywhere. Go!
It might be nice if there were beneficial computer viruses. We could call
them computer "antidotes".
David
On Tue, Dec 4, 2012 at 1:26 PM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> Hi, I still experience this all over the place on the web, and it's sort
> of annoying.
>
> Here is a jQuery script that fixes it dynamically, though in a perfect
> world, it wouldn't be needed.
>
> $('img').each(function(i, o){
> var hasAlt = o.getAttributeNode('alt') ? true : false,
> hasTitle = o.getAttributeNode('title') ? true : false;
> if (!hasAlt) $(o).attr('alt', hasTitle ? o.title : '');
> });
>
> It can also be changed to throw an alert during development, such as
>
> if (!hasAlt) alert("Missing Alt attribute: " + o.outerHTML);
> > > >
From: Jared Smith
Date: Tue, Dec 04 2012 3:00PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
On Tue, Dec 4, 2012 at 2:26 PM, Bryan Garaventa wrote:
> Here is a jQuery script that fixes it dynamically
I'm with Jukka - I don't see what this 'fixes'. Most assistive
technologies already fall back to title attribute values if
alternative text is not present - and most accessibility frameworks
and even HTML5 are moving toward defining title attributes to function
this way. This hack simply presents an appearance of accessibility
where there is none defined. Declared alternative text is very
different than pulling a somewhat arbitrary value from elsewhere and
presenting it as alternative text.
This approach could limit a technology's ability to do something
(perhaps analyze the image contents, perform an image search, present
the image filename or URL, etc.) with an image that is truly missing
alternative text, as opposed to being assigned alt="". In VoiceOver,
this would cause both the title attribute text and the (now generated)
alternative text to be read twice.
I do, however, like the idea of the alert script to identify images
that do not have an alt attribute defined, though I suppose this could
simply result in alt="" (or worse) being added instead of true,
equivalent alternative text.
There are no shortcuts to proper alternative text.
Jared
From: Jukka K. Korpela
Date: Tue, Dec 04 2012 3:25PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
2012-12-05 0:00, Jared Smith wrote:
> I do, however, like the idea of the alert script to identify images
> that do not have an alt attribute defined,
There are various existing tools for informing the user about alt
attribute issues. I suppose they are mainly useful for developers (and
e.g. to people who evaluate pages),
In Firefox, the Web Developer Extension has an "Images" menu, where you
can select e.g. "Display alt attributes" and (under "Outline images")
options for outlining images without alt attributes and/or images with
empty alt attributes. The outline is just a thin red line, though.
But using the Stylish add-on in Firefox, you can easily specify a user
style sheet for highlighting images without alt attributes, using e.g.
the CSS code
img:not([alt]) { outline: dashed red 3px; }
> though I suppose this could
> simply result in alt="" (or worse) being added instead of true,
> equivalent alternative text.
That's quite possible. On a quick look at various sites, with alt
attribute display enabled, I noticed that wrong alt attributes are a
more common problem than lack of alt attributes. Problems vary from
pointless short stories written into the attributes to serious issues
like alt="" on an image that is the sole content of a link.
Yucca
From: Bryan Garaventa
Date: Tue, Dec 04 2012 4:36PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
The second usage is what I find helpful.
It's an easy script to run when building pages to verify that alts aren't
accidentally missing, which causes inconsistent announcement in screen
readers like JAWS.
----- Original Message -----
From: "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, December 04, 2012 2:25 PM
Subject: Re: [WebAIM] Regarding images lacking alts
> 2012-12-05 0:00, Jared Smith wrote:
>
>> I do, however, like the idea of the alert script to identify images
>> that do not have an alt attribute defined,
>
> There are various existing tools for informing the user about alt
> attribute issues. I suppose they are mainly useful for developers (and
> e.g. to people who evaluate pages),
>
> In Firefox, the Web Developer Extension has an "Images" menu, where you
> can select e.g. "Display alt attributes" and (under "Outline images")
> options for outlining images without alt attributes and/or images with
> empty alt attributes. The outline is just a thin red line, though.
>
> But using the Stylish add-on in Firefox, you can easily specify a user
> style sheet for highlighting images without alt attributes, using e.g.
> the CSS code
> img:not([alt]) { outline: dashed red 3px; }
>
>> though I suppose this could
>> simply result in alt="" (or worse) being added instead of true,
>> equivalent alternative text.
>
> That's quite possible. On a quick look at various sites, with alt
> attribute display enabled, I noticed that wrong alt attributes are a
> more common problem than lack of alt attributes. Problems vary from
> pointless short stories written into the attributes to serious issues
> like alt="" on an image that is the sole content of a link.
>
> Yucca
>
> > >
From: Birkir R. Gunnarsson
Date: Tue, Dec 04 2012 5:11PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
Why not beef up the script slightly, to make it more accurate:
If a graphic is part of a link:
If there is text in the a tag.
Then alt text is missing on the grphic (highest priority,else you end
up most likely with an empty link).
If there is alt text on image / graphic and also text in the link
itself, may be display a message to that. If text is identical it will
confuse users by having the link text read twice in most screen
readers, better if image had empty alt tag in this situation.
Not sure if trying to track labels for images in form fields or images
that are buttons (or associated with a button), I can see that getting
overly complex very fast.
Cheers
-B
p.s. May be it's just me (likely it is), but very seldom do I find
that alt text on an image that is not a link, button, or has some
other "active" functionality on a website, does anything for me as a
user.
On 12/4/12, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> The second usage is what I find helpful.
>
> It's an easy script to run when building pages to verify that alts aren't
> accidentally missing, which causes inconsistent announcement in screen
> readers like JAWS.
>
> ----- Original Message -----
> From: "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = >
> To: < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, December 04, 2012 2:25 PM
> Subject: Re: [WebAIM] Regarding images lacking alts
>
>
>> 2012-12-05 0:00, Jared Smith wrote:
>>
>>> I do, however, like the idea of the alert script to identify images
>>> that do not have an alt attribute defined,
>>
>> There are various existing tools for informing the user about alt
>> attribute issues. I suppose they are mainly useful for developers (and
>> e.g. to people who evaluate pages),
>>
>> In Firefox, the Web Developer Extension has an "Images" menu, where you
>> can select e.g. "Display alt attributes" and (under "Outline images")
>> options for outlining images without alt attributes and/or images with
>> empty alt attributes. The outline is just a thin red line, though.
>>
>> But using the Stylish add-on in Firefox, you can easily specify a user
>> style sheet for highlighting images without alt attributes, using e.g.
>> the CSS code
>> img:not([alt]) { outline: dashed red 3px; }
>>
>>> though I suppose this could
>>> simply result in alt="" (or worse) being added instead of true,
>>> equivalent alternative text.
>>
>> That's quite possible. On a quick look at various sites, with alt
>> attribute display enabled, I noticed that wrong alt attributes are a
>> more common problem than lack of alt attributes. Problems vary from
>> pointless short stories written into the attributes to serious issues
>> like alt="" on an image that is the sole content of a link.
>>
>> Yucca
>>
>> >> >> >
> > > >
From: Bryan Garaventa
Date: Tue, Dec 04 2012 5:35PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
True, I mainly use it as a reminder when I'm working on large pages. It's
easy to overlook small things sometimes, so this just reminds me that I've
overlooked something, and shows me where to look. When I'm done, I simply
remove it.
----- Original Message -----
From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, December 04, 2012 4:11 PM
Subject: Re: [WebAIM] Regarding images lacking alts
> Why not beef up the script slightly, to make it more accurate:
> If a graphic is part of a link:
> If there is text in the a tag.
> Then alt text is missing on the grphic (highest priority,else you end
> up most likely with an empty link).
> If there is alt text on image / graphic and also text in the link
> itself, may be display a message to that. If text is identical it will
> confuse users by having the link text read twice in most screen
> readers, better if image had empty alt tag in this situation.
>
> Not sure if trying to track labels for images in form fields or images
> that are buttons (or associated with a button), I can see that getting
> overly complex very fast.
> Cheers
> -B
> p.s. May be it's just me (likely it is), but very seldom do I find
> that alt text on an image that is not a link, button, or has some
> other "active" functionality on a website, does anything for me as a
> user.
>
>
> On 12/4/12, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
>> The second usage is what I find helpful.
>>
>> It's an easy script to run when building pages to verify that alts aren't
>> accidentally missing, which causes inconsistent announcement in screen
>> readers like JAWS.
>>
>> ----- Original Message -----
>> From: "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = >
>> To: < = EMAIL ADDRESS REMOVED = >
>> Sent: Tuesday, December 04, 2012 2:25 PM
>> Subject: Re: [WebAIM] Regarding images lacking alts
>>
>>
>>> 2012-12-05 0:00, Jared Smith wrote:
>>>
>>>> I do, however, like the idea of the alert script to identify images
>>>> that do not have an alt attribute defined,
>>>
>>> There are various existing tools for informing the user about alt
>>> attribute issues. I suppose they are mainly useful for developers (and
>>> e.g. to people who evaluate pages),
>>>
>>> In Firefox, the Web Developer Extension has an "Images" menu, where you
>>> can select e.g. "Display alt attributes" and (under "Outline images")
>>> options for outlining images without alt attributes and/or images with
>>> empty alt attributes. The outline is just a thin red line, though.
>>>
>>> But using the Stylish add-on in Firefox, you can easily specify a user
>>> style sheet for highlighting images without alt attributes, using e.g.
>>> the CSS code
>>> img:not([alt]) { outline: dashed red 3px; }
>>>
>>>> though I suppose this could
>>>> simply result in alt="" (or worse) being added instead of true,
>>>> equivalent alternative text.
>>>
>>> That's quite possible. On a quick look at various sites, with alt
>>> attribute display enabled, I noticed that wrong alt attributes are a
>>> more common problem than lack of alt attributes. Problems vary from
>>> pointless short stories written into the attributes to serious issues
>>> like alt="" on an image that is the sole content of a link.
>>>
>>> Yucca
>>>
>>> >>> >>> >>
>> >> >> >>
> > >
From: Jukka K. Korpela
Date: Wed, Dec 05 2012 1:59AM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
2012-12-05 1:36, Bryan Garaventa wrote:
> It's an easy script to run when building pages to verify that alts aren't
> accidentally missing, which causes inconsistent announcement in screen
> readers like JAWS.
It's easier to use a markup validator like http://validator.w3.org which
reports missing alt attributes (for both <img> and <area> elements) by
HTML source line number *and* catches other syntax errors as well. You
can also use a validator plug-in in a browser.
To check that alt attributes really make sense (quite often, they
don't), you can use e.g. Firefox Web Developer Extension, command Images
> Disable images, which means that all <img> elements are replaced by
their alt attributes. (This can be used in conjunction with highlighting
missing alt attributes, as I mentioned in a previous comment; this helps
to see the problem cases in their context.)
Yucca
From: Nancy Johnson
Date: Wed, Dec 05 2012 5:39AM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
More and more content is handled by Content Management Systems (CMS).
The content person, someone who does not know html or js, chooses and
uploads photos through a Admin Panel and either unaware of alts or the
CMS framework doesn't allow for Alt
In Wordpress admin panel, the title field is required but not the alt
tag field.
The best thing Wordpress could do is to combine alt and Title fields
into one required "description" field and then have the html spit out
both the title= and the alt=.
Solves the problem of 508, and the word 'description' more accurately
describes what an alt really tag is and the user is happy when they
can see their description when they mouse over the image..
Vignette or Opentext, seems to allow the alt tag to be dynamically
populated by the file name of the image.
Unfortunately, Web development community at large is woefully ignorant
of issues of accessibility.
Nancy
Nancy
Nancy
On Wed, Dec 5, 2012 at 3:59 AM, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = > wrote:
> 2012-12-05 1:36, Bryan Garaventa wrote:
>
>> It's an easy script to run when building pages to verify that alts aren't
>> accidentally missing, which causes inconsistent announcement in screen
>> readers like JAWS.
>
> It's easier to use a markup validator like http://validator.w3.org which
> reports missing alt attributes (for both <img> and <area> elements) by
> HTML source line number *and* catches other syntax errors as well. You
> can also use a validator plug-in in a browser.
>
> To check that alt attributes really make sense (quite often, they
> don't), you can use e.g. Firefox Web Developer Extension, command Images
> > Disable images, which means that all <img> elements are replaced by
> their alt attributes. (This can be used in conjunction with highlighting
> missing alt attributes, as I mentioned in a previous comment; this helps
> to see the problem cases in their context.)
>
> Yucca
>
> > >
From: David Ashleydale
Date: Thu, Dec 06 2012 10:33AM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
Correct me if I'm wrong, but I thought one of the purposes of the first
script that Bryan wrote in this thread was to make the experience of
encountering images with no alt attribute better by at least assigning an
empty alt. I've noticed that JAWS tries to be "helpful" by reading the
source path out loud when there's no alt attribute. So I see this script as
something that could be included in a browser extension like Readability to
make the encountering of images with no alt less annoying.
However, now that I think of it, perhaps Freedom Scientific should change
the way that JAWS reads these. Wouldn't it be better if it treated no alt
the same way as it treats alt=""? I realize that it's trying to be helpful,
but it's so often not.
David
From: Bryan Garaventa
Date: Sat, Dec 08 2012 3:58AM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
True, that is the purpose of the first script. It would be nice if FS
programmed JAWS to ignore images without alts, but even if they did at some
point, all prior versions would have the same problem.
I've been giving this some thought, and I know that others here have said
that they don't see the point in this script, and that they don't see that
it fixes anything. It does however make images more uniformly configured for
accessibility however.
I'll show you an example of what I mean.
Here are various image configurations, which you can paste into an html
file.
<img src="img1.jpg" />
<img title="Test2" src="img2.jpg" />
<img alt="Test3" src="img3.jpg" />
<img alt="" src="img4.jpg" />
<a href="url">
<img src="img5.jpg" />
</a>
Now, run the following jQuery script to configure the images accessibly.
// Loop through all images
$('img').each(function(i, o){
var hasAlt = o.getAttributeNode('alt') ? true : false,
hasTitle = o.getAttributeNode('title') ? true : false;
// If no alt, copy the title if present, otherwise set to null (for IE)
if (!hasAlt) $(o).attr('alt', hasTitle ? o.title : '');
// If no title, copy the alt (for FF Chrome and Safari)
if (!hasTitle) $(o).attr('title', o.alt);
});
I've tested this in IE, FF, and Chrome using both JAWS and NVDA, and have
found no negative effects, and the feedback was improved in JAWS.
So the argument earlier was, just run the page against an HTML validator and
program the images correctly the first time. This is true when editing a
particular page.
Now imagine this instead, if you were to paste this code into the global
script for Facebook, it would correct the images on over one billion pages,
instantly.
The same is true for Amazon, Wordpress, Microsoft, Target, CNN, Google, and
so on.
Does this make more sense now?
----- Original Message -----
From: "David Ashleydale" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, December 06, 2012 9:33 AM
Subject: Re: [WebAIM] Regarding images lacking alts
> Correct me if I'm wrong, but I thought one of the purposes of the first
> script that Bryan wrote in this thread was to make the experience of
> encountering images with no alt attribute better by at least assigning an
> empty alt. I've noticed that JAWS tries to be "helpful" by reading the
> source path out loud when there's no alt attribute. So I see this script
> as
> something that could be included in a browser extension like Readability
> to
> make the encountering of images with no alt less annoying.
>
> However, now that I think of it, perhaps Freedom Scientific should change
> the way that JAWS reads these. Wouldn't it be better if it treated no alt
> the same way as it treats alt=""? I realize that it's trying to be
> helpful,
> but it's so often not.
>
> David
> > >
From: JP Isaac
Date: Mon, Dec 10 2012 1:31PM
Subject: Re: Regarding images lacking alts
← Previous message | Next message →
I think the crux of this argument is whether an unlabelled image should be
ignored or the url announced to alert the user to a graphic that may be
important but has not been specified either way.
There's no absolute here. As a person who uses a screen reader, there have
been times when hearing the url of an unlabelled image has helped me to gain
perspective on a workflow issue in a webpage or application. Other times,
hearing urls can be annoying especially when the unlabelled images are just
layout related.
It's a commendable goal to create a scalable accessibility solution, but
there are so many gray areas that defy a single answer.
Best,
== J
From: Mike Moore
Date: Mon, Dec 10 2012 2:48PM
Subject: Re: Regarding images lacking alts
← Previous message | No next message
FS actually has several options for how to work with unlabeled images. The options are in the settings center. For the JAWS 13 and 14 the options are to to include all images, include just labeled images, or to ignore all images. I believe that the default is all images. You also have the option of what to speak if the image is a link. The default is to speak the images URL. I asked the folks at Freedom why and their response was that the file name was often more informative than the link URL. I am not sure that I agree but the user can change the behavior to announce the destination if they want.
Sent from my iPad
Mike
On Dec 8, 2012, at 4:58 AM, "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = > wrote:
> True, that is the purpose of the first script. It would be nice if FS
> programmed JAWS to ignore images without alts, but even if they did at some
> point, all prior versions would have the same problem.
>
> I've been giving this some thought, and I know that others here have said
> that they don't see the point in this script, and that they don't see that
> it fixes anything. It does however make images more uniformly configured for
> accessibility however.
>
> I'll show you an example of what I mean.
>
> Here are various image configurations, which you can paste into an html
> file.
>
> <img src="img1.jpg" />
>
> <img title="Test2" src="img2.jpg" />
>
> <img alt="Test3" src="img3.jpg" />
>
> <img alt="" src="img4.jpg" />
>
> <a href="url">
> <img src="img5.jpg" />
> </a>
>
> Now, run the following jQuery script to configure the images accessibly.
>
> // Loop through all images
> $('img').each(function(i, o){
> var hasAlt = o.getAttributeNode('alt') ? true : false,
> hasTitle = o.getAttributeNode('title') ? true : false;
> // If no alt, copy the title if present, otherwise set to null (for IE)
> if (!hasAlt) $(o).attr('alt', hasTitle ? o.title : '');
> // If no title, copy the alt (for FF Chrome and Safari)
> if (!hasTitle) $(o).attr('title', o.alt);
> });
>
> I've tested this in IE, FF, and Chrome using both JAWS and NVDA, and have
> found no negative effects, and the feedback was improved in JAWS.
>
> So the argument earlier was, just run the page against an HTML validator and
> program the images correctly the first time. This is true when editing a
> particular page.
>
> Now imagine this instead, if you were to paste this code into the global
> script for Facebook, it would correct the images on over one billion pages,
> instantly.
>
> The same is true for Amazon, Wordpress, Microsoft, Target, CNN, Google, and
> so on.
>
> Does this make more sense now?
>
>
> ----- Original Message -----
> From: "David Ashleydale" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Thursday, December 06, 2012 9:33 AM
> Subject: Re: [WebAIM] Regarding images lacking alts
>
>
>> Correct me if I'm wrong, but I thought one of the purposes of the first
>> script that Bryan wrote in this thread was to make the experience of
>> encountering images with no alt attribute better by at least assigning an
>> empty alt. I've noticed that JAWS tries to be "helpful" by reading the
>> source path out loud when there's no alt attribute. So I see this script
>> as
>> something that could be included in a browser extension like Readability
>> to
>> make the encountering of images with no alt less annoying.
>>
>> However, now that I think of it, perhaps Freedom Scientific should change
>> the way that JAWS reads these. Wouldn't it be better if it treated no alt
>> the same way as it treats alt=""? I realize that it's trying to be
>> helpful,
>> but it's so often not.
>>
>> David
>> >> >> >
> > >