TA-Gallery - Accessibility

With TA-Gallery you can provide a fully accessible image gallery. Read more about how and what you might add to your template.

Basic tips

Before we dive into all accessibility features of TA-Gallery here is some basic stuff you should pay attention to.

  • Images that are purely decorative add an empty alt attribute and don’t remove it.
  • If you are using captions don’t forget to add the attribute aria-describedby and link it to the id of the caption.
  • Adding a focus state like the ring utility in Tailwind CSS to all buttons you are using to control the gallery.
  • TA-Gallery hides every not visible slide correctly. This means every slide is set to visibility:hidden after finishing the slide out animation.


  • Add aria-controlsto every button and link it to the id of the all slides wrapper.
  • Add a stop, pause/resume button to the gallery
  • If you use the autoplay mode you should activate pauseonhover:true and add a focus and blur action to every controlling button.
  • Stop, pause and resume buttons should have a label / titel that describes the action like “Pause auto play” and aria-pressed=”true” if you use separated pause and resume buttons. Otherwise change the label / title dynamically.


  • All slides should be wrapped in a container with role=”region”, aria-roledescription=”carousel”, aria-live="polite" and a label that describes the content of the gallery. If you use a visible label for the gallery use aria-labelby to link the element id.
  • If you use autoplay mode set aria-atomic=”false”, aria-live=”off” and if you use autoplay aria-live=”polite”
  • Every slide container should have a role defined as group and aria-roledescription set to slide. If you use a visible caption you should link the id of this caption to the slide container by aria-labeledby. Don’t use the word slide in the description again. If you don’t have a caption use aria-label=”Lorem” to explain more about the slide.


    class="ta-gallery ta-gallery-aspect-hd"
        aria-label="Awesome imrepssions from Taipei"
        <!--- ADD YOUR SLIDES HERE /-->
            class="ta-gallery-element ta-gallery-anim-swing"
                    alt="Example alt text for this image"
                    class="ta-gallery-image ta-gallery-image-lazy"
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Velit, molestiae assumenda, maxime.
        <!--- ADD YOUR BUTTONS HERE /-->
            class="ta-gallery-button -right-5 w-10 h-10 focus:ring focus:ring-primary"
            :title="'Go to next slide no. ' + next_slide"
TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy