Как сделать клавиатуру Owl Carousel доступной

В соответствии с Руководством по доступности веб-контента, чтобы веб-сайт считался доступным , вы должны иметь возможность использовать клавиатуру для всех функций контента:

Все функциональные возможности контента доступны через интерфейс клавиатуры.

Я использую Owl Carousel 2, добавил стрелки и связал их так:

$('.carousel-left-arrow').click(function () {
        owl.trigger('next.owl.carousel');
    });

Но эти стрелки недоступны с клавиатуры, только с помощью мыши. Как я могу сделать их доступными?


javascript jquery accessibility owl-carousel owl-carousel-2
person Eran Shabi    schedule 23.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, чтобы div был доступен с клавиатуры, вам нужно добавить к нему атрибут tabindex. Например:

    <div class="carousel-arrow carousel-right-arrow" tabindex="0" >

Затем в вашем скрипте вы можете использовать jQuery, чтобы нажатие Enter на div вызывало то же событие, что и щелчок мыши:

$('.carousel-arrow').keypress(function (e) {
    if(e.which === 13)
    {
        this.click();
        return false;
    }
});
person Eran Shabi    schedule 23.11.2016
comment
Еще лучше, просто используйте BUTTON и настройте его так, как вы хотите - BUTTON полностью доступен с клавиатуры прямо из коробки. - person BrendanMcK; 24.11.2016
comment
@BrendanMcK Спасибо за это лучшее решение. Единственный минус - стиль. - person Eran Shabi; 24.11.2016
comment
Определенно используйте <button>, который поддерживает как клавишу Enter, так и клавишу Пробел, поэтому обязательно прислушайтесь к символу 32. Что касается стиля, <button> можно стилизовать просто как и любой другой элемент, так что это никогда не является причиной, чтобы не использовать его. - person aardrian; 29.11.2016