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

This code is from the Colorbox plugin, not the Colorbox module for Drupal.

http://jacklmoore.com/colorbox/

ddf

Can we mark this as postponed and just link to this issue in colorbox?

https://github.com/jackmoore/colorbox/issues/676

Hopefully it gets fixed there and then brought in.

Any word on this issue? I have been scouring the code to see where this could be set. Not having any success.

I've solved this on my end.

Yes, the button issue is coming from the Colorbox code in the libraries folder, not the module. You can add an aria-label to each button in the jQuery.colorbox.js file but you'll need to make sure that change is reflected in the minified version as well or it won't take effect.

@museumboy could you add the issue upstream? Not sure if it is listed in the colorbox accessibility issues.

Certainly having text in the button would be helpful for semantics. Some examples here:

http://rachievee.com/use-button-element-improve-accessibility/
https://www.ssa.gov/accessibility/bpl/bps/forms/buttons/default.htm

That button text could be hidden, but it needs to be semantically there.

This is a patch to the Colorbox library 1.6.4, that adds aria labels and validates WAVE tool testing. This is a stop-gap measure to immediately fix this while we wait for a better fix to come from the Colorbox authors.

The patch was written to be applied within the Colorbox library folder. Just add the file and apply the patch. The patch updates the JS and minified JS files.

This patch comes from code provided here - https://github.com/jackmoore/colorbox/pull/822
You can follow the full issue here - https://github.com/jackmoore/colorbox/issues/765
The original author talks about this code in the March 28th comment - jameswilson commented on Mar 28 0001-Adding-ARIA-labels-to-colorbox-library-1.6.4

It looks like Colorbox is not going to be fixed on Github. Is the maintainer willing to modify the version used by this Drupal module?

Updating Patch file for testing - Testing Patch (NOT WORKING)

Accessibility Issue fixed for Colorbox with this patch.

Fixing issues of Patch to get it applied in working condition.

Changing status based on Liam's comment in #10.

I can confirm that patch #14 fixes the error under WAVE AA-checker.

Patch applies over the library, not the module, so it is valid also for 8.x.

Shouldn't this patch also be added to the modules .make file (https://cgit.drupalcode.org/colorbox/tree/colorbox.make?h=7.x-2.x&id=7.x...) where the library is defined?

Can this patch also be used on the Drupal 8 Version?

It's not working for me. I still get errors when checking in the WAVE checker. I use colorbox AND colorbox node, so admittedly, it could be the other module or a combination.

There are 3 buttons that this won't apply to: cboxprevious, cboxnext, and cboxslideshow

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

Also of note, there's a typo in the patch where it says "lable" and not "label". However, fixing this had no effect for me.

There's also a newer fix on github: https://github.com/jackmoore/colorbox/pull/832

As a workaround, I put this code inside of a custom .js file:

$(document).ready(function() {
  // ColorBox button labels for ADA compliance
    if($("#colorbox").length){
      $('#cboxPrevious').attr("aria-label", "Previous");
      $('#cboxNext').attr("aria-label", "Next");
      $('#cboxSlideshow').attr("aria-label", "Slideshow");
  }
});

Patch Failed to apply, needs reroll

For more detail on this problem, go to https://github.com/jackmoore/colorbox/issues/765