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.

Controls

  • 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.

Roles

  • 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.

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <div
        id="galleryXXXX"
        role=”region”
        aria-roledescription=”carousel”
        aria-live="polite"
        aria-label="Awesome imrepssions from Taipei"
    >
        <!--- ADD YOUR SLIDES HERE /-->
        <div
            class="ta-gallery-element ta-gallery-anim-swing"
            role="group"
            aria-roledescription="slide"
            aria-describedby="f26e6bd6590a4e8df1020b70888d6e96"
        >
            <figure>
                <img
                    src="image.jpg"
                    alt="Example alt text for this image"
                    class="ta-gallery-image ta-gallery-image-lazy"
                >
                <figcaption
                    id="f26e6bd6590a4e8df1020b70888d6e96"
                    class="ta-gallery-image-caption"
                >
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Velit, molestiae assumenda, maxime.
                </figcaption>
            </figure>
        </div>
        <!--- ADD YOUR BUTTONS HERE /-->
        <button
            type="button"
            class="ta-gallery-button -right-5 w-10 h-10 focus:ring focus:ring-primary"
            x-on:click="next()"
            x-on:focus="pause()"
            x-on:blur="resume()"
            x-show="loaded"
            :title="'Go to next slide no. ' + next_slide"
            aria-controls="galleryXXXX"
        >
            NEXT
        </button>
    </div>
</div>
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-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy