[Swiper]How to improve accessibility of swiper slider

Swiper.js which is one of the most popular javascript slider library has lots of options.
In this article, I am going to describe about how to improve accessibility of swiper slider with demos.

By implementing the following four, we will improve accessibility.

Make the pagination clickable
Make the slider operatable by keyboards
Make the slider operatable by mousewheel
Set up the message for screen readers (a11y)

Table of Contents

Create a normal swiper slider
Make the pagination clickable
Make the slider operatable by keyboards
Make the slider operatable by mousewheel
Set up the message for screen readers (a11y)
The full text of source code

Create a normal swiper slider

To make it clear, we will create normal swiper slider first and then make changes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/sample1.png"></div>
        <div class="swiper-slide"><img src="img/sample2.png"></div>
        <div class="swiper-slide"><img src="img/sample3.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,                         //loop
        pagination: {                       //pagination（dots）
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation（arrows）
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now we can see a noraml swiper slider.

Make the pagination clickable

By specifying clickable: true in pagination option, the users will be able to operate the slide by clicking the pagination.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,            //added
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The pagination has become clickable.
When you click the pagination, the slide will move.

Make the slider operatable by keyboards

By adding keyboard: true, the users will be able to operate the slider by keyboards.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    keyboard: true,                 //added
})

The slider has become operatable by keyboards.
After clicking pagination or navigation, if you click right arrow key or left arrow key the slide will move.

Make the slider operatable by mousewheel

By adding mousewheel: true, the users will be able to operate the slider by mousewheel or trackpad.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    keyboard: true,
    mousewheel: true,               //追加
}

The slider has become operatable by mousewheel or trackpad.

By only adding mousewheel: true, sometimes the slide moves more than once when you operate by trackpad.

To improve this, change the mousewheel option as below.
The higher the numbers of thresholdDelta, the more reactive the slide. I think 70 is just right.

const swiper = new Swiper('.sample-slider', {
    .
    .
    .
    //mousewheel: true,                 //removed
    mousewheel: {                       //added
        thresholdDelta: 70,             //added
    },                                  //added
}

I think the slide no more move more than once when you operate by trackpad.

After enabled mousewheel option, the slider will react against the scrolling in both of vertical and horizontal direction.

Perhaps some users feel anoyed because they were going to scroll the window but the slider reacted. There is a way to make the slider to react when only scrolling in horizontal direction.

By specifying forceToAxis: true in mousewheel option, the slider become to react only when the scroll direction is same with slider direction.

const swiper = new Swiper('.sample-slider', {
    .
    .
    .
    mousewheel: {
        thresholdDelta: 70,
        forceToAxis: true,      //added
    },                          //added
}

The slider has become to react when only scrolling in horizontal direction.

Set up the message for screen readers (a11y)

Swiper.js provides an option called a11y that allows you to set a message for the screen reader.
By using this, you can create sliders that are easier to operate for individuals with visual impairments.

The a11y options include the following.

Option	Default Value	Description	Attribute to be set
containerMessage	null	Message to describe the container	aria-label for the “swiper” class
containerRoleDescriptionMessage	null	Message to provide detailed explanation of the container’s role	aria-roledescription for the “swiper” class
nextSlideMessage	‘Next slide’	Message for the Next button	aria-label for the “swiper-button-next” class
prevSlideMessage	‘Previous slide’	Message for the Back button	aria-label for the “swiper-button-prev” class
paginationBulletMessage	‘Go to slide {{index}}’	Message for each pagination button (only available when clickable option is true).	aria-label for the “swiper-pagination-bullet” class
slideLabelMessage	‘{{index}} / {{slidesLength}}’	Message for each slide (indicating which slide out of how many)	aria-label for the “swiper-slide” class
slideRole	‘group’	Message to describe the role of the slide	aria-role for the “swiper-slide” class
itemRoleDescriptionMessage	null	Message to describe the role of the slide in detail	aria-roledescription “swiper-slide” class

Here is a example of setting.

const swiper = new Swiper('.sample-slider', {
    .
    .
    .
    a11y: {
        containerMessage: 'This is a sample slider',                    // Message to describe the container
        containerRoleDescriptionMessage: 'Slider Container',            // Message to provide detailed explanation of the container's role
        nextSlideMessage: 'Button for the next slide',                  // Message for the Next button
        prevSlideMessage: 'Button for the previous slide',              // Message for the Back button
        paginationBulletMessage: 'Button to jump to slide {{index}}',   // Message for each pagination button (only available when clickable option is true).
        slideLabelMessage: 'Slide {{index}} of {{slidesLength}}',       // Message for each slide (indicating which slide out of how many)
        slideRole: 'group',                                             // Message to describe the role of the slide
        itemRoleDescriptionMessage: 'Slide group',                      // Message to describe the role of the slide in detail
    }
})

The full text of source code

In the end, I put the full text of source code.
I have left the comments for only the options which is described int this article.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    body{
        padding:100px;
    }
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>


<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>


<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,     
        pagination: {
            el: '.swiper-pagination',
            clickable: true,                //Make the pagination clickable
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        keyboard: true, 
        keyboard: true,                     //make the slider operatable by keyboards
        mousewheel: {                       //make the slider operatable by mousewheel or trackpad
            thresholdDelta: 70,             //adjust reactivity for mousewheel scrolling
            forceToAxis: true,              //make the slider to react only when the scroll direction is same with slider direction.
        },
        a11y: {
            containerMessage: 'This is a sample slider',                    // Message to describe the container
            containerRoleDescriptionMessage: 'Slider Container',            // Message to provide detailed explanation of the container's role
            nextSlideMessage: 'Button for the next slide',                  // Message for the Next button
            prevSlideMessage: 'Button for the previous slide',              // Message for the Back button
            paginationBulletMessage: 'Button to jump to slide {{index}}',   // Message for each pagination button (only available when clickable option is true).
            slideLabelMessage: 'Slide {{index}} of {{slidesLength}}',       // Message for each slide (indicating which slide out of how many)
            slideRole: 'group',                                             // Message to describe the role of the slide
            itemRoleDescriptionMessage: 'Slide group',                      // Message to describe the role of the slide in detail
        }
    })
</script>

That is all, it was about how to improve accessibility of swiper slider by implementing the following four.