從小型的動態元件，到透過 JavaScript 架構 (例如 React 或 Angular) 執行的完整產品，JavaScript 都扮演著重要角色。
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 事件，才能偵測按下的按鍵或空格鍵。系統通常會遺忘在非語意元素中新增觸發事件。遺憾的是，如果遺忘，產生的結果是只能透過滑鼠存取的元件。僅使用鍵盤的使用者會留下，無法存取相關動作。
網頁標題
如我們在文件模組中所學，頁面標題對螢幕閱讀器使用者來說十分重要。告知使用者他們目前瀏覽的網頁，以及他們是否前往新頁面。
如果您使用 JavaScript 架構，就必須考量網頁標題的處理方式。這對於從單一 index.html 檔案載入的單頁應用程式 (SPA) 特別重要，因為轉換或路徑 (頁面變更) 不會重新載入頁面。每次使用者在 SPA 中載入新頁面時，標題都不會預設為變更。
針對 SPA，您可以手動加入 document.title 值，或與輔助套件搭配使用 (視 JavaScript 架構而定)。向螢幕閱讀器使用者宣布新版網頁標題，可能需要執行一些額外工作，但好消息是您有動態內容等選擇。
動態內容
JavaScript 最強大的功能之一，就是將 HTML 和 CSS 新增至網頁上的任何元素。開發人員可以根據使用者的動作或行為建立動態應用程式。
假設您必須在使用者登入網站或應用程式時傳送訊息給對方，希望訊息從白色背景中明顯區別，並轉發「您現在已登入」訊息。
您可以使用 innerHTML 元素設定內容：
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
您可以利用 setAttribute，以類似的方式套用 CSS：
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
能力越大，責任越大。很遺憾，插入 HTML 和 CSS 的 JavaScript 一直被誤用來建立無法存取的內容。以下列舉一些常見的濫用情況：
| 可能的濫用情況 | 正確使用 |
|---|---|
| 轉譯非語意 HTML 的大區塊 | 顯示較小的語意 HTML |
| 不允許輔助技術辨識動態內容的時間 | 採用 setTimeout() 的延遲時間，讓使用者聽到完整訊息內容 |
動態為 onFocus() 套用樣式屬性 |
使用 :focus 處理 CSS 樣式表中的相關元素 |
| 套用內嵌樣式可能會導致使用者樣式表無法正確讀取 | 保留 CSS 檔案中的樣式，維持主題一致性 |
| 建立非常大型的 JavaScript 檔案，導致網站整體效能降低 | 使用較少 JavaScript。您可以在 CSS 中執行類似的函式 (例如動畫或固定瀏覽)，這不僅剖析速度更快，效能也更佳 |
針對 CSS，請切換 CSS 類別，不要新增內嵌樣式，因為這有助於重複使用及簡化。如要隱藏或顯示動態 HTML 的內容，請使用頁面上的隱藏內容，並切換類別。如果您需要使用 JavaScript 以動態方式在網頁中新增內容，請確保其簡單明瞭，也便於存取。
焦點管理
在鍵盤焦點模組中，我們介紹了聚焦順序和指標樣式。焦點管理正瞭解應將焦點在何時何地吸引以及不應卡在的位置。
焦點管理對於僅使用鍵盤的使用者至關重要。
元件層級
如果無法妥善管理元件的焦點，您可以建立鍵盤陷阱。只使用鍵盤的使用者卡在元件中，或不應維護焦點時，就會發生鍵盤陷阱。
使用者遇到焦點管理問題的常見模式之一，是強制回應元件。當純鍵盤使用者遇到互動視窗時，應能在互動視窗的可操作元素之間開啟 Tab 鍵，但如未明確關閉，這些元素就不應允許在互動視窗外使用。JavaScript 必須正確傳遞此焦點。
頁面層級
使用者瀏覽頁面時，也必須維持焦點。在 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 架構的即時套件：
新型 JavaScript 是一種功能強大的語言，可讓網頁程式開發人員建立完善的網頁應用程式。這有時會導致過度工程，甚至導致無法存取的模式。只要善用本單元中的 JavaScript 模式和提示，就能讓所有使用者更輕鬆地使用您的應用程式。
隨堂測驗
測試您對 JavaScript 的相關知識
以下何者最適合使用 JavaScript 變更元素的樣式？
所有 JavaScript 動作都支援鍵盤使用者嗎？