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