Will Martin Will Martin - 5 months ago 37x
Javascript Question

ColorBox - add ALT text to gallery images?

Is there any way to make ColorBox place ALT text on the IMG tags it generates? Note that I am NOT looking for a caption, but for a text alternative that screen readers can recognize and read aloud.

A basic ColorBox gallery looks something like this:

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

And then it's initialized with JS like this:


The TITLE attribute of the A element gets used as a descriptive caption.

But IMG elements in generated HTML lack an ALT attribute. Here's a sample:

style="border: medium none; display: block; float: none; cursor: pointer; margin-left: auto; margin-right: auto;"

Because it lacks an ALT attribute, screen readers like JAWS and NVDA read the SRC attribute aloud, which is annoying for blind users. It also means that if you have an image full of text that needs to be repeated as actual text for blind listeners, the caption gets too big for the available space. Thus:

A colorbox with an over-long caption.

Note the long caption at the bottom which redundantly repeats the text that's baked into the image.



You can copy all title attributes to alt attributes at startup: (attempting to clone anchor properties seems not to work)

        $(this).attr('alt', this.title?this.title:'');

Then colorbox copies the alt attribute to image tag automatically.

testing fiddle