JavaScript 在我們創造的所有內容中都扮演著重要角色，從較小的動態元件，到在 JavaScript 架構 (例如 React 或 Angular) 上執行的完整產品皆是如此。
這種使用 (或過度使用) JavaScript 帶來了許多令人擔憂的趨勢，例如因為大量程式碼而導致載入時間過長、使用非語意式 HTML 元素，以及透過 JavaScript 插入 HTML 和 CSS。您可能不確定如何將無障礙設計納入這些元素。
JavaScript 可能會對網站的無障礙存取能力造成重大影響。在這個模組中，我們會分享一些由 JavaScript 強化的無障礙通用模式，以及使用 JavaScript 架構時產生的無障礙問題解決方案。
觸發事件
JavaScript 事件可讓使用者與網頁內容互動，並執行特定動作。許多使用者 (例如螢幕閱讀器使用者、精細動作障礙者、沒有滑鼠或觸控板的使用者等) 都需要鍵盤支援才能與網路互動。您必須在 JavaScript 動作中加入鍵盤支援功能，因為這會影響所有使用者。
我們來看看點擊事件。如果 onClick() 事件用於語意式 HTML 元素 (例如 <button> 或 <a>)，則自然會包含滑鼠和鍵盤功能。不過，如果將 onClick() 事件新增至非語意元素 (例如一般 <div>)，系統不會自動套用鍵盤功能。
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
在 CodePen 上預覽這項比較。
如果觸發事件使用了非語意元素，則必須新增 keydown/keyup 事件，才能偵測按下 Enter 或空格鍵的動作。在非語意元素中新增觸發事件通常會遺漏。不幸的是，如果忘記這點，結果就是只能透過滑鼠存取的元件。僅使用鍵盤的使用者無法存取相關動作。
網頁標題
如文件模組所述，頁面標題對螢幕閱讀器使用者至關重要。可讓使用者瞭解目前所在的網頁，以及是否已前往新頁面。
如果您使用 JavaScript 架構，請考量如何處理網頁標題。對於從單一 index.html 檔案載入的單頁應用程式 (SPA) 而言，這點尤其重要，因為轉場或路徑 (網頁變更) 不會涉及網頁重新載入。每當使用者在 SPA 中載入新頁面時，標題並不會預設變更。
對於 SPA，您可以手動新增 document.title 值，也可以使用輔助程式套件 (視 JavaScript 架構而定) 新增該值。向螢幕閱讀器使用者宣布更新的網頁標題可能需要額外的工作，但好消息是，您有其他選擇，例如動態內容。
動態內容
JavaScript 最強大的功能之一，就是能夠在網頁上的任何元素中加入 HTML 和 CSS。開發人員可以根據使用者的動作或行為，建立動態應用程式。
假設您需要在使用者登入網站或應用程式時傳送訊息，希望該訊息能從白色背景中脫穎而出，並轉送「您已登入」的訊息。
您可以使用 innerHTML 元素設定內容：
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
您可以使用 setAttribute 以類似方式套用 CSS：
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
權力越大，責任越重。不幸的是，JavaScript 注入 HTML 和 CSS 的做法過去曾被濫用，用來建立無法存取的內容。以下列舉一些常見的濫用行為：
| 可能濫用 | 正確使用 |
|---|---|
| 算繪大量非語意 HTML | 算繪較小的語意式 HTML |
| 不允許輔助技術識別動態內容 | 使用 setTimeout() 的延遲時間，讓使用者聆聽完整訊息 |
動態套用 onFocus() 的樣式屬性 |
在 CSS 樣式表中使用 :focus 的相關元素 |
| 套用內嵌樣式可能會導致系統無法正確讀取使用者樣式表 | 在 CSS 檔案中保留樣式，讓主題保持一致 |
| 建立非常大的 JavaScript 檔案，導致整體網站效能變慢 | 減少 JavaScript 的使用量。您也可以執行 CSS 中的類似函式 (例如動畫或固定式導覽)，藉此加快剖析速度並且提高效能 |
針對 CSS，請切換 CSS 類別，而非新增內嵌樣式，因為這樣可讓樣式重複使用且簡單。使用網頁上的隱藏內容和切換類別，隱藏及顯示動態 HTML 內容。如果您需要使用 JavaScript 動態新增網頁內容，請確保內容簡單扼要，且當然要方便存取。
焦點管理
在鍵盤焦點模組中，我們介紹了焦點順序和指標樣式。焦點管理是指瞭解何時何地應捕捉焦點，以及何時不應捕捉焦點。
對於只使用鍵盤的使用者來說，焦點管理功能十分重要。
元件層級
當元件的焦點未妥善管理時，您可以建立鍵盤陷阱。當只使用鍵盤的使用者卡在元件中，或是焦點未在適當時間維持時，就會發生鍵盤陷阱。
使用者在模式元件中遇到焦點管理問題是最常見的模式之一。當只有鍵盤的使用者遇到模式時，應可在模式的可操作元素之間切換，但絕不能在未明確關閉模式的情況下，在模式外使用這些元素。而 JavaScript 是妥善抵擋這項焦點的關鍵。
網頁層級
使用者從網頁前往瀏覽時，也必須維持焦點。這在 SPA 中尤其適用，因為 SPA 不會重新整理瀏覽器，且所有內容都會動態變更。每當使用者按下連結前往您應用程式中的其他頁面時，焦點會保存在同一個位置，或移到其他位置。
在頁面 (或轉送) 之間轉換時，開發團隊必須決定網頁載入時焦點前往的位置。
可以採用多種技巧：
- 使用
aria-live公告，將焦點放在主要容器上。 - 將焦點移回連結，以便跳轉至主要內容。
- 將焦點移至新頁面的頂層標題。
決定著重於何處時，取決於您使用的架構，以及您想提供給使用者的內容。視情境或動作而定。
狀態管理
JavaScript 對無障礙功能至關重要的另一個領域是狀態管理，也就是當元件或網頁的目前視覺狀態傳遞給低視力、失明或聾盲輔助技術使用者時。
元件或網頁的狀態通常是透過 ARIA 屬性管理 (如 ARIA 和 HTML 模組所述)。讓我們來看看一些最常見的 ARIA 屬性類型，可用於管理元素狀態。
元件層級
視您的網頁內容及使用者需要的資訊而定，將元件的相關資訊轉發給使用者時，系統可以考慮多種 ARIA 狀態。
舉例來說，您可以使用 aria-expanded 屬性，告知使用者下拉式選單或清單是展開還是收合狀態。
或者，您也可以使用 aria-pressed 表示按下按鈕。
在套用 ARIA 屬性時，請務必有所選擇。仔細思考使用者流程，瞭解應向使用者傳達哪些重要資訊。
網頁層級
開發人員通常會使用稱為 ARIA 即時區域的視覺隱藏區域，向輔助科技 (AT) 使用者宣布螢幕上的變更和警示訊息。這個區域可與 JavaScript 配對，通知使用者網頁有動態變更，而不必重新載入整個網頁。
以往 JavaScript 在 aria-live 和警示區域中宣告內容時，由於其動態性質，因此難以順利執行。將內容以非同步方式新增至 DOM 會讓 AT 難以選取區域並宣告。為了讓內容能正確讀取，直播或快訊區域必須在載入時位於 DOM 中，之後才能動態交換文字。
如果您使用 JavaScript 架構，好消息是，幾乎所有架構都提供「即時播報」套件，可為您執行所有工作，且完全可供存取。您不必擔心建立即時區域，也不必處理前一個章節中所述的問題。
以下是常見 JavaScript 架構的部分即時套件：
- React：react-aria-live 和 react-a11y-announcer
- Angular：
LiveAnnouncer - Vue：vue-a11y-utils
新型 JavaScript 是一種功能強大的語言，可讓網頁開發人員建立可靠的網頁應用程式。這有時會導致過度設計，進而導致無法存取的模式。只要遵循本模組中的 JavaScript 模式和提示，就能讓所有使用者更輕鬆地使用您的應用程式。
隨堂測驗
測驗您對 JavaScript 的瞭解
使用 JavaScript 變更元素樣式的最佳方式為何？
所有 JavaScript 動作是否都能支援鍵盤使用者？