WCAG 2.0 - missing attributes.

[piotrw]

...nt" style="float: left;"></div><button type="button" id="cboxPrevious"></button><button type="button" id="cboxN...

This button element does not have a name available to an accessibility API. Valid names are: title attribute, element content.

http://www.w3.org/TR/WCAG20/#robust
http://www.w3.org/TR/WCAG20-TECHS/H91

[piotrw]

<img class="cboxPhoto" src="test.jpg" style="cursor: pointer; width: 500px; height: 713px; float: none;">

Main image element missing an alt attribute also.

http://www.w3.org/TR/WCAG20/#perceivable
http://www.w3.org/TR/WCAG20-TECHS/H37

[mgifford]

Pretty sure the ones I see in the WAVE toolbar are:

<button style="" id="cboxPrevious" type="button"></button>
<button style="" id="cboxNext" type="button"></button>
<button style="" id="cboxSlideshow"></button>

Would be nice to see that these have proper attributes.

[trussd]

Does anyone have a patch, hack or instructions for eliminating this accessibility error? I'm in the public sector here, and our site has received a complaint letter. At this point I need to fix these errors, or I have to replace Colorbox altogether. Thanks for any help.

[Kravimir]

The default Colorbox options place text in those button elements. If you are using icons instead, you can specify the aria-label attribute yourself. Here's the configuration I used on a recent project where I used Font Awesome icons for the controls:

var colorboxOpts={
    rel: 'group1',
    close:'<i class="fa fa-close" aria-label="close modal"></i>',
    previous:'<i class="fa fa-chevron-left" aria-label="previous photo"></i>',
    next:'<i class="fa fa-chevron-right" aria-label="next photo"></i>'
};

[lramarojaona]

This would be a great enhancement, as more and more sites require to be WCAG compliant, especillay in the public sector.

[lkmorlan]

Duplicate of #765.