最近在使用jQuery的一個輪播套件，發生無障礙檢測問題，使用owl.carousel所產生的按鈕<button type="button" role="presentation" class="owl-prev">在pagespeed檢測出現，有不相容的元素使用 ARIA 角色，研究了一下改善方案，寫成筆記。

owl.carousel所產生的按鈕在pagespeed檢測出現，有不相容的元素使用 ARIA 角色，要如何改善？

關於 Owl Carousel slider 產生的導航按鈕的無障礙性(accessibility)問題。讓我們來分析問題和提供解決方案：

問題分析：

1. Owl Carousel 自動生成的按鈕使用了 role="presentation"
2. PageSpeed 報告指出這個 ARIA role 的使用有問題
3. presentation role 通常用於移除元素的語義意義，但按鈕本身應該要有明確的功能性角色

改善建議：

1. 移除 role="presentation" 並改用更適當的 ARIA 屬性：

html
<button type="button" aria-label="上一張" class="owl-prev">

2. 如果按鈕內有圖示，可以這樣處理：

html
<button type="button" aria-label="上一張" class="owl-prev">
    <span class="icon" aria-hidden="true">←</span>
</button>

3. 可以在 Owl Carousel 初始化時設定：

javascript
$('.owl-carousel').owlCarousel({
    nav: true,
    navText: [
        '<button type="button" aria-label="上一張" class="owl-prev">←</button>',
        '<button type="button" aria-label="下一張" class="owl-next">→</button>'
    ],
     navElement: 'button type="button"'
});

這些改善方式可以：

• 提供更好的螢幕閱讀器支援
• 符合 WCAG 無障礙網頁指引
• 解決 PageSpeed 檢測的問題
• 維持輪播功能的完整性

讓網頁設計滿足無障礙規範可以讓網站服務更多用戶。