1

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,

isherwood
  • 58,414
  • 16
  • 114
  • 157
AdamKniec
  • 1,607
  • 9
  • 25
  • 1
    Your question probably got the down and close votes because you don't seem to have made an effort. With something like this, looking over [the events in the API](https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html) can get you a long way, and then you could ask about any pitfalls you encounter. – isherwood Jan 07 '20 at 20:28

1 Answers1

3

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • 1
    I did something like this: onInitialized: () => { let navDotButtons = document.querySelectorAll(".owl-dot"); navDotButtons[0].setAttribute("aria-label", "first-page"); navDotButtons[1].setAttribute("aria-label", "second-page"); } It actually solved my issue. What do You think about that ? – AdamKniec Jan 07 '20 at 21:04
  • 1
    I think that's a lot of repetition (and how will you know how many dots to accommodate?), but if it suits you, great! Tip: Backticks (\`) will mark `code` in comments. – isherwood Jan 07 '20 at 21:52