Как я могу сделать точки навигации Owl Carousel точечными? - PullRequest
Новая
       33

Как я могу сделать точки навигации Owl Carousel точечными?

0 голосов
/ 07 января 2020

Я пытаюсь избавиться от всех проблем, о которых сообщает Google Chrome Lighthouse Audit. Я медленно прогрессирую, но у меня проблема с «доступными кнопками».

Эти кнопки являются «навигацией по точкам» из библиотеки Owl Carousel 2, и кажется, что они на самом деле недоступны. Это информация о Lighthouse:

Когда у кнопки нет доступного имени, программы чтения с экрана объявляют его «кнопкой», что делает его непригодным для пользователей, которые полагаются на программы чтения с экрана.

Failing Elements 

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

Я не могу по-настоящему манипулировать кодом, ответственным за генерацию dots-navbar, и мне интересно, какой подход был бы лучшим в этом случае. Мне нужно добавить атрибут name со значениями «Предыдущее» и «Следующее», но я должен добавить этот атрибут с JS? Ребята, не сталкивались ли вы с такой проблемой в Owl 2? Если так - пожалуйста, дайте мне знать, потому что, возможно, есть другой, лучший способ сделать это.

С наилучшими пожеланиями,

1 Ответ

1 голос
/ 07 января 2020

Поскольку это плагин jQuery, я бы просто использовал jQuery в обратных вызовах onInitialized и onResized для добавления закадровых текстовых узлов к кнопкам: 

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

Это может выглядеть как-то как это: 

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

Если вы чувствуете, что точки просто бесполезны для пользователей программы чтения с экрана, и они хорошо, если у них есть только предыдущая и следующая кнопки (которые уже доступны) для навигации, вы можете эффективно скрыть для них точки в обратном вызове и уменьшить ненужное отвлечение внимания: 

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

Это, вероятно, дискуссионная стратегия как мы должны стремиться предложить одинаковый уровень взаимодействия для всех пользователей. Однако, поскольку пользователи программы чтения с экрана могут не использовать элементы управления ползунком для начала, поскольку все слайды должны быть доступны для чтения в любое время, возможно, это не проблема.

...