牢記可訪問性的寫作JavaScript

提升JavaScript組件可訪問性的技巧

本文將分享一些關於如何提升JavaScript組件可訪問性，並為用戶提供更多、更好的網站或Web應用程序交互方式的技巧。

本文最初發表於Medium

在第一篇文章《編寫具有可訪問性的HTML》中，我解釋了為什麼以及如何開始關注Web可訪問性，並分享了一些關於如何改進標記以使網站更易訪問的技巧。其中一些技巧非常基礎，但仍然很有價值。這一切都歸結於前端開發中兩個最重要的不成文規則：學習基礎知識，並花足夠的時間來規劃和編寫HTML。清晰語義化的標記將使你和你的用戶都受益。

幸運的是，HTML並非我們製作網站的唯一語言，但語言越複雜，出錯的可能性就越大，而JavaScript可能會變得非常複雜。當我們專注於代碼是否有效時，很容易忘記那些使用鼠標或觸摸板以外的輸入設備的用戶，例如鍵盤或屏幕閱讀器用戶。在這篇關於Web可訪問性的四篇文章中的第二篇中，我收集了一些關於編寫JavaScript時需要考慮的事項以及如何使JavaScript組件更易訪問的技巧。

關鍵要點

• JavaScript可以用來提升網站的可訪問性，而不是阻礙它。它可以使更廣泛的受眾訪問內容，包括那些使用舊瀏覽器、慢速互聯網連接或嚴格安全限制的用戶。
• 焦點管理對於網站的可訪問性至關重要。網站應該可以通過鍵盤進行導航，允許用戶按照文檔對像模型 (DOM) 的順序從一個可聚焦元素跳轉到另一個可聚焦元素。
• 使用正確的HTML元素，例如在需要按鈕時使用 <button></button> 元素，對於可訪問性至關重要。 HTML元素的誤用可能會為鍵盤和屏幕閱讀器用戶造成問題。
• 當內容動態變化時，必須告知屏幕閱讀器用戶。這可以通過使用ARIA實時區域來實現，ARIA實時區域允許屏幕閱讀器宣佈內容更新。
• 開發人員不必猜測他們的組件必須提供哪些使用模式才能實現可訪問性。 《WAI-ARIA Authoring Practices 1.1指南》等資源可以提供寶貴的見解。

JavaScript並非敵人

在閱讀我的技巧之前，我想指出重要的一點——創建可訪問的網站並不意味著你必須決定是否使用JavaScript。可訪問性是關於使盡可能多的人訪問內容，這也包括使用舊瀏覽器和計算機、慢速互聯網連接、嚴格安全限制（例如，沒有JavaScript）等等的用戶。在JavaScript可能無法工作或加載時間過長等情況下，體驗可能並不理想，但如果網站可訪問且可用，則仍然足夠好。

如果JavaScript可執行，它甚至可以用來改進可訪問性。 Sara Soueidan在《構建一個完全可訪問的幫助工具提示……比我想像的要難》中寫了她創建工具提示組件的經驗。她解釋了為什麼“每個無JavaScript的解決方案都伴隨著一個非常糟糕的缺點，會對用戶體驗產生負面影響”，以及為什麼JavaScript對於可訪問性很重要。

Marco Zehe在他的文章《JavaScript並非可訪問性的敵人！ 》中寫了更多關於JavaScript和可訪問性的內容。我強烈建議你閱讀他的文章。

但介紹性的談話就到這裡！讓我們開始吧……

良好的焦點管理至關重要

確保我們的網站可以通過鍵盤進行導航非常重要。許多用戶在瀏覽網頁時依賴鍵盤。其中包括有運動障礙的人、盲人以及由於某種原因無法使用鼠標或觸摸板的人。

通過鍵盤導航網站意味著按照DOM順序從一個可聚焦元素跳轉到另一個可聚焦元素。這通常是通過使用 Tab 鍵或 Shift Tab 來實現反向方向。可聚焦元素包括鏈接、按鈕和表單元素。它們可以使用 Enter 鍵，有時還可以使用 Spacebar 進行選擇。通過以不同的方式可聚焦和可選擇，它們具有非常有用的默認功能。因此，使用正確的語義元素並以邏輯順序編寫HTML是有意義的。

諸如 <div>、<code><span></span> 或 <div> 等元素默認情況下無法聚焦。我們經常使用這些標籤來創建由JavaScript驅動的自定義組件，這對於鍵盤用戶來說可能存在問題。 <p><strong>使不可聚焦元素可聚焦</strong></p> <p>可以通過添加 <code>tabindex 屬性和整數數值來使不可聚焦元素可聚焦。如果將值設置為0，則該元素將變得可聚焦並可以通過鍵盤訪問。如果該值為負數，則該元素可在編程上進行聚焦（例如，使用JavaScript），但無法通過鍵盤訪問。你也可以使用大於0的值，但這會改變自然的Tab鍵順序，並被認為是一種反模式。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

如果你想了解更多關於 tabindex 的信息，請觀看Rob Dodson的A11ycasts劇集《使用tabindex控制焦點》。

使用JavaScript聚焦元素

即使元素可聚焦，有時它們也不在正確的DOM順序中。為了說明這一點，我在HTML、CSS和JS中創建了一個簡單的模態窗口組件（演示和可編輯的Pen）。

如果你使用 Tab 鍵跳轉到按鈕並按下 Enter，則會彈出一個模態窗口。如果你再次按下 Tab 鍵，焦點將跳轉到模態窗口下方視覺上顯示的下一個鏈接。預期的行為應該是下一個聚焦的元素在模態窗口內。但事實並非如此，因為元素按照DOM順序聚焦，而模態窗口位於文檔的底部。你可以在此屏幕錄製中看到它的實際效果。

要解決這個問題，你必須使模態窗口可聚焦，然後使用JavaScript聚焦它。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

你可以在更新後的示例（演示和可編輯的Pen）中看到這一點，方法是將Tab鍵切換到按鈕，按下 Enter 並再次按下Tab鍵。你會看到模態窗口本身現在已獲得焦點。

這很好，但這裡仍然存在兩個問題。

如果你通過按下 Esc 關閉模態窗口，則焦點會丟失。理想情況下，焦點應該跳回到你打開模態窗口之前的按鈕。為了實現這一點，你必須將最後一個聚焦的元素存儲在一個變量中。

我們可以使用 document.activeElement 獲取當前獲得焦點的元素。

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

現在你有了對按鈕的引用，你可以在關閉模態窗口時再次聚焦它。

var lastFocusedElement;

function showModal() {
  lastFocusedElement = document.activeElement;

  var modal = document.getElementById(modalID);
  modal.focus();
  ...
}

我已經在另一個Pen（演示和可編輯的Pen）中更新了代碼。現在可訪問性好多了，但仍然有改進的空間。

建議在打開模態窗口時將焦點保持在模態窗口內。現在仍然可以跳出模態窗口。我不會在這裡詳細介紹，但為了完整起見，我創建了第四個Pen，其中包含所謂的“鍵盤陷阱”（演示和可編輯的Pen）。只要模態窗口處於活動狀態，焦點就會保持在模態窗口內，正如在此屏幕錄製中可以看到的那樣。

如果你比較第一個和最後一個Pen，你會發現並沒有很多額外的代碼。它可能並不完美，但最終的解決方案使用起來要好得多。

還有一個可訪問模態窗口的示例和一篇名為《使用tabindex》的好文章，來自谷歌的人員撰寫。如果你想了解更多關於鍵盤測試的信息，請訪問WebAIM網站。他們提供了一份“最常見的在線交互、交互的標準按鍵以及測試期間需要考慮的其他信息”的列表。

有關焦點管理的更多示例，請查看Marcy Sutton的egghead.io視頻《使用CSS、HTML和JavaScript進行焦點管理》或Rob Dodson的A11ycasts劇集《什麼是焦點？ 》。

如果需要按鈕，請使用 <button></button> 元素

我已經在第一篇文章中寫過關於按鈕的內容，但顯然很多人使用通用元素作為按鈕。因此，我想再寫一些關於這個主題的內容也不會有什麼壞處。

我創建了一個Pen（調試模式/帶有代碼的Pen）來說明使用 <div> 或 <code><span></span> 作為按鈕而不是 <button></button> 或 <input type="button"> 元素的一些問題。如果你瀏覽頁面，你會發現你可以聚焦第一個按鈕，但不能聚焦第二個按鈕。原因當然是——第一個按鈕是 <button></button>，第二個按鈕是 <div>。你可以通過向 <code><div> 添加 <code>tabindex="0" 來解決這個問題，這使得最初不可聚焦的元素可聚焦。這就是為什麼第三個和第四個按鈕可聚焦，即使它們是 <div>。 <pre class='brush:php;toolbar:false;'>&lt;h2 id=&quot;一个可聚焦的标题&quot;&gt;一个可聚焦的标题&lt;/h2&gt;</pre> <p>即使你添加了按鈕的角色，“div-按鈕”確實可聚焦，但仍然表現得像一個 <code><div>，。為了說明這一點，我向所有<code>.btn 元素添加了一個簡單的點擊事件處理程序（Pen）。如果你點擊按鈕，會彈出一個警報框，但如果你嘗試使用按鍵（Enter 或 Spacebar）執行相同的操作，則只有第一個按鈕會觸發事件。你必須向“div-按鈕”添加一個按鍵事件處理程序才能完全模擬默認的按鈕行為，這似乎是不必要的額外開銷，不是嗎？這就是為什麼如果你需要一個按鈕，你應該使用 <button></button> 元素。觀看Rob Dodson的A11ycasts劇集“Just use button”或閱讀Adrian Roselli的《鏈接、按鈕、提交和Divs，哦，天哪》以了解更多詳細信息和示例。

屏幕閱讀器用戶必須在內容動態更改時得到通知

通常，屏幕閱讀器只會在元素獲得焦點或用戶使用屏幕閱讀器自己的導航命令時宣佈內容。如果內容是動態加載並插入到DOM中的，只有有視力的人才能注意到這些更改。 ARIA實時區域提供了幾種解決此問題的方法。我將通過一個示例向你展示如何操作。

假設你有一個配置文件設置頁面，你可以在其中編輯個人數據並保存它。當點擊保存按鈕時，更改會被保存而無需重新加載頁面。一個警報會通知用戶更改是否成功。這可能會立即發生，也可能需要一些時間。我錄製了一個簡短的視頻來向你展示我剛才解釋的內容。

你可以看到操作成功了，但你聽不到。屏幕閱讀器用戶不會注意到更改，但這個問題有一個簡單的解決方案。通過向消息框添加“狀態”或“警報”角色，屏幕閱讀器將監聽該元素中的內容更新。

function showModal() {
  var modal = document.getElementById('modal2');
  modal.focus();
  ...
}

如果消息文本發生更改，則會讀出新文本。你可以在此視頻中看到並聽到它的實際效果，並查看此Pen中的代碼。

禮貌對待你的用戶

“狀態”和“警報”之間的區別在於，“警報”會在屏幕閱讀器正在宣布其他內容時中斷它。相反，“狀態”將等待屏幕閱讀器完成宣布。

還有一個名為 aria-live 的屬性，它可以取三個可能的值：off、polite或assertive。在這三個值中，off是默認值，aria-live="polite" 等效於 role="status"，aria-live="assertive" 等效於 role="alert"。在一些眾所周知的預定義情況下，最好使用特定的提供的“實時區域角色”。此外，如果瀏覽器不支持角色，你可能需要嘗試同時使用這兩個屬性。 Léonie Watson在《屏幕閱讀器對ARIA實時區域的支持》中分享了一些測試結果。

<h2 id="一个可聚焦的标题">一个可聚焦的标题</h2>

有時宣布不僅僅是已更改的內容是有意義的

默認情況下，屏幕閱讀器只顯示已更改的內容，即使同一實時區域內還有其他內容，但在某些情況下，宣布整個文本是有意義的。可以使用 aria-atomic 屬性來更改默認行為。如果將其設置為true，輔助技術將顯示元素的全部內容。

Paul J. Adam有一個 aria-atomic 測試用例演示，它比較了不同的實時區域設置。他還使用iOS 8.1上的VoiceOver測試了他的演示，並進行了錄製，以便你可以看到它的實際效果。如果你想更好地理解 aria-atomic 的可能用例，我建議你觀看該錄製（VoiceOver iOS 8.1朗讀剩餘字符 aria-atomic 和 aria-relevant 在 aria-live 區域）。

一些需要考慮的事項

• 實時區域不會移動焦點，它們只會觸發文本的宣布。
• 僅對關鍵更改使用警報。 “狀態”在大多數情況下更好，因為它更禮貌。
• 避免設計自動消失的警報，因為它們可能消失得太快。
• 在我的測試中，我遇到了VoiceOver的問題。使用CSS隱藏警報或動態創建警報並不總是有效。確保你在不同的瀏覽器和不同的軟件中徹底測試你的實時區域。

當然，Rob Dodson還有一個關於詳細信息和示例的A11ycasts劇集《警報！ 》。 Heydon Pickering在他的ARIA示例集合中還有另一個實時區域示例。

你不必猜測你的組件必須提供哪些使用模式

想到一個組件在導航和可訪問性方面必須提供的所有功能通常很困難。幸運的是，有一個名為《WAI-ARIA Authoring Practices 1.1》的資源可以幫助我們做到這一點。 《WAI-ARIA Authoring Practices》是一份了解如何使用WAI-ARIA創建可訪問的富互聯網應用程序的指南。它描述了推薦的WAI-ARIA使用模式，並介紹了其背後的概念。

它們有構建手風琴、滑塊、選項卡等的指南。

可訪問的JavaScript組件

這裡有一些關於可訪問的JavaScript組件的優秀資源：

• 實用的ARIA示例
• Modaal——一個WCAG 2.0 Level AA可訪問的模態窗口插件
• Frend——一系列可訪問的現代前端組件
• A11Y項目模式

如果你知道任何其他資源，請在評論中分享。

總結

利用JavaScript的優勢來提高網站的可訪問性。注意焦點管理，了解常見的用法模式，並在操作DOM時考慮屏幕閱讀器用戶。最重要的是，不要忘記你為誰製作網站，並在製作過程中享受樂趣。

超越

暫時就到這裡。我希望這些技巧能幫助你編寫更易訪問的HTML和JavaScript。非常感謝Heydon Pickering，因為他的書《包容性前端設計模式》是大多數你剛剛閱讀的內容的基礎。如果你想了解更多關於可訪問性和包容性設計的信息，我強烈建議你閱讀他的書。

特別感謝Adrian Roselli幫助我撰寫這篇文章，以及Eva校對我的寫作。

資源

這是本文中所有鏈接資源的列表。

• A11ycasts #03 — 什麼是焦點？
• A11ycasts #04 — 使用tabindex控制焦點
• A11ycasts #05 — 只使用按鈕
• A11ycasts #10 — 警報！
• 書籍：《包容性前端設計模式》
• 不要使用大於0的tabindex
• 使用CSS、HTML和JavaScript進行焦點管理
• 可聚焦元素——瀏覽器兼容性表
• 鏈接、按鈕、提交和Divs，哦，天哪
• MDN：HTMLElement.focus()
• MDN：tabindex
• MDN：可通過鍵盤導航的JavaScript組件
• 令人難以置信的可訪問模態窗口
• 使用tabindex
• WebAIM鍵盤測試
• WebAIM鍵盤可訪問性
• WAI-ARIA aria-atomic

關於編寫具有可訪問性的JavaScript的常見問題解答

編寫具有可訪問性的JavaScript的重要性是什麼？

編寫具有可訪問性的JavaScript至關重要，因為它確保你的網站或應用程序可供所有人使用，包括殘疾人士。這不僅拓寬了你的用戶群，而且還增強了用戶體驗和滿意度。在許多地區，這對於法律合規性也很重要，因為可訪問性是根據各種殘疾歧視法案的要求。

如何使我的JavaScript代碼更易訪問？

有幾種方法可以使你的JavaScript代碼更易訪問。首先，確保你的網站或應用程序對鍵盤友好。這意味著用戶應該能夠僅使用鍵盤導航你的網站。其次，確保你的網站易於使用屏幕閱讀器導航。這可以通過使用語義HTML和ARIA角色來實現。最後，始終為圖像提供替代文本，並確保你的網站具有足夠的顏色對比度。

什麼是ARIA，它如何提高可訪問性？

ARIA代表Accessible Rich Internet Applications（可訪問的富互聯網應用程序）。它是一組屬性，定義了使Web內容和Web應用程序更易於殘疾人士訪問的方法。 ARIA有助於使用Ajax、HTML、JavaScript和相關技術開發的動態內容和高級用戶界面控件。它可以通過提供有關元素、其角色及其當前狀態的附加信息來提高可訪問性。

鍵盤導航如何增強可訪問性？

鍵盤導航對於無法使用鼠標或觸摸屏的用戶至關重要。通過確保網站或應用程序的所有功能都可以僅使用鍵盤訪問，你可以使你的網站更容易被運動障礙或視力障礙的用戶訪問。這可以通過在JavaScript代碼中使用 tabindex 和焦點管理來實現。

語義HTML在可訪問性中的作用是什麼？

語義HTML是指使用HTML標記來增強內容的語義或含義。例如，對按鈕使用 <button></button> 標籤，而不是樣式使其看起來像按鈕。這對於可訪問性很重要，因為它為屏幕閱讀器提供了有意義的信息，幫助視力障礙的用戶理解內容並導航網站。

如何確保足夠的顏色對比度以實現可訪問性？

足夠的顏色對比度對於視力障礙的用戶很重要。你可以通過選擇符合WCAG 2.1對比度比率指南的顏色組合來確保這一點。有一些在線工具可以幫助你檢查所選顏色的對比度比率。

提供圖像替代文本的重要性是什麼？

為圖像提供替代文本對於依賴屏幕閱讀器的視力障礙用戶至關重要。替代文本應準確描述圖像內容，以便無法看到圖像的用戶仍然可以理解其在頁面上下文中的用途。

如何測試JavaScript代碼的可訪問性？

有幾種工具可用於測試JavaScript代碼的可訪問性。這些工具包括aXe和Lighthouse等自動化測試工具，以及使用屏幕閱讀器和僅鍵盤導航進行的手動測試。重要的是結合使用自動化測試和手動測試，以確保全面的可訪問性。

JavaScript中的一些常見可訪問性問題是什麼？

JavaScript中的一些常見可訪問性問題包括缺乏鍵盤可訪問性、顏色對比度不足、圖像缺少替代文本以及缺少ARIA角色或ARIA角色使用不正確。這些問題可能會使你的網站難以或無法被殘疾人士使用。

如何了解更多關於JavaScript和可訪問性的信息？

有很多資源可以幫助你了解更多關於JavaScript和可訪問性的信息。這些資源包括來自W3C等組織的在線教程、課程和文檔。此外，練習編寫可訪問的代碼並定期測試代碼的可訪問性可以大大提高你的理解和技能。