我正在努力摆脱Google Chrome Lighthouse审核报告的所有问题。我的进度很慢，但是“可访问的按钮”有问题。
这些按钮是Owl Carousel 2库中的“点导航”，看来它们并不是真正可访问的。这是灯塔信息：
当按钮没有可访问的名称时，屏幕阅读器会将其宣布为“按钮”，从而使依赖屏幕阅读器的用户无法使用它。
失败要素
button.owl-dot.active
button.owl-dot
我真的不能操纵负责生成点导航栏的代码，我想知道在这种情况下最好的方法是什么。我需要在name属性中添加“ Previous”和“ Next”值，但是我应该在JS中添加该属性吗？你们遇到过Owl 2这样的问题吗？如果是这样，请告诉我，因为也许还有另一种更好的方法。
最好的问候
由于它是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>');
});
}
如果您觉得这些点对屏幕阅读器用户根本没有用，并且可以只使用上一个和下一个按钮（已经可以访问）进行导航，则可以将这些点隐藏在它们中回调并减少不必要的干扰：
$('.owl-dots').attr('aria-hidden','true');
这可能是值得商strategy的策略，因为我们应努力为所有用户提供相同级别的交互。但是，由于屏幕阅读器用户可能一开始就不会使用滑块控件，所以由于所有幻灯片都应始终可读，因此这根本就不是问题。