Jquery Galleria does not pass the 508 ADA compliance image alt not present

615 views Asked by At

How to add the alts to the Galleria Image Gallery since it does not include the ALT tag by default. i am using the settings to provide images and the classic theme for gallery. Does any one have an idea about how to make it compliance with the ADA rules.

1

There are 1 answers

3
Eve Freeman On BEST ANSWER

I figured out how to get the "alt" to show up in the image. It worked on my mac screen reader, but I'm not sure if it covers all of the rules for ADA.

I ended up using the "extend" functionality, passing it a function which gets the current "original" image, gets the alt attribute, and loads it in the current image being displayed.

Code is as follows:

  $("#gallery").galleria({
    width: 500,
    height: 500,
    extend: function(options) {
      var gallery = this;   
      this.bind('image', function(e) {
        var curr = gallery.getData(gallery.getIndex());
        var currOrig = curr.original;
        var altTxt = $(currOrig).attr('alt');
        $(e.imageTarget).attr('alt',altTxt);
      });
      this.bind('thumbnail', function(e) {
        var thumb = gallery.getData(e.index);
        var thumbOrig = thumb.original;
        var altText = $(thumbOrig).attr('alt');
        $(e.thumbTarget).attr('alt',altText);
      });
    }
  });