How can I make Owl Carousel dot navigation buttons accessible?

Question

I'm trying to get rid of all of the issues reported by the Google Chrome Lighthouse Audit. I'm slowly progressing but I have a problem with 'accessible buttons'.

These buttons are the "dots navigation" from the Owl Carousel 2 library and it seems that they are not really accessible. This is the Lighthouse info:

When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.

Failing Elements

button.owl-dot.active
button.owl-dot

I can not really manipulate the code responsible for generating the dots-navbar and I'm wondering, what'd be the best approach in this case. I need to add the name attribute with the "Previous" and "Next" values I guess but should I add that attribute with JS ? Have You guys encountered such an issue with Owl 2 ? If so - please let me know because maybe there is another, better way to do that.

Best Regards,

Answer 1

Since it's a jQuery plugin I'd just use jQuery in the onInitialized and onResized callbacks to add offscreen text nodes to the buttons:

<style>
.offscreen {
     position: absolute;
     left: -999em;
}
</style>

<button><span></span><span class="offscreen">Go to slide 3</span></button>
<!-- the first span is there by default -->

That might look something like this:

let owl = $('.owl-carousel').owlCarousel({
    // ...,
    onInitialized: addDotButtonText,
    onResized: addDotButtonText
});

function addDotButtonText() {

    // loop through each dot element
    $('.owl-dot').each(function() {
        // remove old text nodes
        $(this).find('.offscreen').remove();

        // grab its (zero-based) order in the series
        let idx = $(this).index() + 1;

        // append a span to the button containing descriptive text
        $(this).append('<span class="offscreen">Go to slide ' + idx + '</span>');
    });
}

Fiddle demo

If you feel like the dots simply aren't useful to screen reader users, and are ok with them having only the previous and next buttons (which are already accessible) for navigation, you could effectively hide the dots to them in the callback and reduce unnecessary distraction:

$('.owl-dots').attr('aria-hidden', 'true');

This is probably a debatable strategy as we should strive to offer the same level of interaction to all users. However, since screen reader users may not have a use for slider controls to begin with, since all slides should be readable at all times, it's maybe not an issue at all.