[Jetpack vs jQuery] Empty (existing!) attribute "alt"
3 views
Skip to first unread message
Philippe Vayssière
Nov 19, 2009, 1:28:58 PM11/19/09
to mozilla-labs-jetpack
Hi,
My project is to write a few custom tools related to accessibility.
One of this tool should list and sort HTML images in 3 categories: no
alt attribute in img element, empty alt and non-empty alt.
I couldn't achieve this with Jetpack and when I tried in HTML+jQuery I
had no problem at all ... Could you please tell me if I'm doing
something wrong or if it can't be done for now with Jetpack?
Below are the two files, HTML with inline jQuery then Jetpack.
jQuery adds two solid borders around the images with empty and non-
empty alt; Jetpack outlines them but (this is what puzzles me) empty
alt is never selected.
And if I try to outline img:not([alt]) or img[alt=''], both no-alt and
empty-alt images are selected ...
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Empty (existing) ALT outlined with jQuery</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img[alt]").each(function() {
var alt = $(this).attr("alt");
if(alt==="") {
$(this).css("outline", "3px dotted red");
} else {
$(this).css("outline", "3px dotted blue");
}
});
});
</script>
</head>
<body>
<h1>jQuery : empty (existing) ALT outlined 3px wide</h1>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" /> - No alt attribute (invalid
element)</p>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="caption" /> - Alt on img
"caption"</p>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="" /> - Empty alt (decorative
image)</p>
</body>
</html>
--------------------------
jetpack.statusBar.append({
html: 'img[alt] test',
onReady: function(doc){
$(doc).click(function(){
$("img[alt]", jetpack.tabs.focused.contentDocument).each(function()
{
var alt = $(this).attr("alt");
if(alt==="") { $(this).css("border", "5px solid red"); }
else { $(this).css("border", "5px solid black"); }
});
});
}
});
--------------------------
Thanks in advance and, last but not least, thanks for making life
easier with Jetpack!
My project is to write a few custom tools related to accessibility.
One of this tool should list and sort HTML images in 3 categories: no
alt attribute in img element, empty alt and non-empty alt.
I couldn't achieve this with Jetpack and when I tried in HTML+jQuery I
had no problem at all ... Could you please tell me if I'm doing
something wrong or if it can't be done for now with Jetpack?
Below are the two files, HTML with inline jQuery then Jetpack.
jQuery adds two solid borders around the images with empty and non-
empty alt; Jetpack outlines them but (this is what puzzles me) empty
alt is never selected.
And if I try to outline img:not([alt]) or img[alt=''], both no-alt and
empty-alt images are selected ...
-------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Empty (existing) ALT outlined with jQuery</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img[alt]").each(function() {
var alt = $(this).attr("alt");
if(alt==="") {
$(this).css("outline", "3px dotted red");
} else {
$(this).css("outline", "3px dotted blue");
}
});
});
</script>
</head>
<body>
<h1>jQuery : empty (existing) ALT outlined 3px wide</h1>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" /> - No alt attribute (invalid
element)</p>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="caption" /> - Alt on img
"caption"</p>
<p><img src="http://www.alsacreations.com/xmedia/doc/small/kiwi-
coeur2.png" width="50" height="50" alt="" /> - Empty alt (decorative
image)</p>
</body>
</html>
--------------------------
jetpack.statusBar.append({
html: 'img[alt] test',
onReady: function(doc){
$(doc).click(function(){
$("img[alt]", jetpack.tabs.focused.contentDocument).each(function()
{
var alt = $(this).attr("alt");
if(alt==="") { $(this).css("border", "5px solid red"); }
else { $(this).css("border", "5px solid black"); }
});
});
}
});
--------------------------
Thanks in advance and, last but not least, thanks for making life
easier with Jetpack!
Reply all
Reply to author
Forward
0 new messages