如何使 Owl Carousel 点导航按钮可访问？

Question

我正在尝试解决 Google Chrome Lighthouse Audit 报告的所有问题。我进展缓慢，但“可访问按钮”有问题。

这些按钮是 Owl Carousel 2 库中的“点导航”，它们似乎无法真正访问。这是灯塔信息：

当按钮没有可访问的名称时，屏幕阅读器会将其宣布为“按钮”，从而使依赖屏幕阅读器的用户无法使用。

失败的元素

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

我无法真正操纵负责生成点导航栏的代码，我想知道，在这种情况下，最好的方法是什么。我需要添加 name 属性和我猜的“上一个”和“下一个”值，但我应该用 JS 添加该属性吗？小伙伴们有遇到过猫头鹰2这样的问题吗？如果是这样 - 请让我知道，因为也许还有另一种更好的方法来做到这一点。

最好的问候，

Answer 1

由于它是一个 jQuery 插件，我只需要在 onInitialized 和 onResized 回调中使用 jQuery 来为按钮添加屏幕外文本节点：

<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');

这可能是一个值得商榷的策略，因为我们应该努力为所有用户提供相同级别的交互。但是，由于屏幕阅读器用户一开始可能不会使用滑块控件，因为所有幻灯片都应该始终可读，所以这可能根本不是问题。