Question

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.

Was it helpful?

Solution

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);
      });
    }
  });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top