使用JS添加WAI-ARIA屬性

Question

在工作中，我一直在優化自己為一個客戶（我不能說是誰）開發的網站之一，以使用WAI-ARIA屬性使其符合ADA。 我一直在想，創建一個小型JS庫是否會更容易，該庫執行諸如將“ role = button”添加到樣式設置為按鈕的錨中，將“ tabindex = 0”添加到元素中希望成為“表”等

我想知道用JS添加WAI-ARIA屬性是一種好習慣還是不贊成這種做法。 一些可訪問性評估工具在評估頁面時不會運行該頁面的JS，因此，當它們不是真正的時候，它們會認為這是痛點。

Answer 1

這可能會有所幫助添加內聯還是通過腳本添加ARIA？ 還要注意，如果您使用role = button，它需要像按鈕一樣工作 （即提供適當的鍵盤交互行為）

Answer 2

我認為出於漸進增強的考慮 ，最好將所有ARIA內聯，而不要依靠腳本來添加它。

如果還有其他腳本錯誤，連接斷開，途中有阻塞腳本等，則您的庫可能無法使用，並且您的補救工作也將丟失。

我也想在史蒂夫上面說過的關於在鏈接上使用role=button上。 尤其是當您認為視覺風格（使鏈接看起來像按鈕）對於屏幕閱讀器的使用（許多ARIA角色對其有益）沒有意義。 我在另一個SO答案中更詳細地介紹了其他鍵盤交互的陷阱，但是當您嘗試將鏈接變成按鈕時，需要考慮以下因素：

可以通過按Enter鍵來觸發超鏈接（ <a href> ）。 但是可以通過按Enter鍵或空格鍵來觸發真正的<button> 。 當超鏈接具有焦點並且用戶按下空格鍵時，頁面將滾動一屏。 某些輔助技術的用戶將根據所使用的元素來預期行為。

另外，我提醒不要將tabindex=0放置在您希望可標簽的元素上，除非它是交互式元素。 例如，請勿僅將其放在標題（ <h#> ）上，否則有人可以使用它來進行選擇，因為屏幕閱讀器（例如）已經允許按標題進行導航。