jquery - ColorBox - add ALT text to gallery images? -
is there way make colorbox place alt text on img tags generates? note not looking caption, text alternative screen readers can recognize , read aloud.
a basic colorbox gallery looks this:
<p><a class="group1" href="../content/ohoopee1.jpg" title="me , grandfather on ohoopee.">grouped photo 1</a></p> <p><a class="group1" href="../content/ohoopee2.jpg" title="on ohoopee child">grouped photo 2</a></p> <p><a class="group1" href="../content/ohoopee3.jpg" title="on ohoopee adult">grouped photo 3</a></p>
and it's initialized js this:
$(".group1").colorbox({rel:'group1'});
the title attribute of element gets used descriptive caption.
but img elements in generated html lack alt attribute. here's sample:
<img src="/_files/images/photos/primo-tour/tour1.png" id="cboxphoto" style="border: medium none; display: block; float: none; cursor: pointer; margin-left: auto; margin-right: auto;" />
because lacks alt attribute, screen readers jaws , nvda read src attribute aloud, annoying blind users. means if have image full of text needs repeated actual text blind listeners, caption gets big available space. thus:
note long caption @ bottom redundantly repeats text that's baked image.
suggestions?
you can copy title attributes alt attributes @ startup: (attempting clone anchor properties seems not work)
$(function(){ $('a.group1').each(function(){ $(this).attr('alt', this.title?this.title:''); }); $(".group1").colorbox({rel:'group1'}); });
then colorbox copies alt attribute image tag automatically.
Comments
Post a Comment