TA-Gallery - Accessibility

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>