JavaScript

我們幾乎所有產品都大量使用 JavaScript，從較小的動態元件到以 JavaScript 架構 (例如 React 或 Angular) 執行的完整產品，無所不包。

這種 JavaScript 用法 (或濫用) 導致許多令人憂心的趨勢，例如程式碼量過大導致載入時間過長、使用非語意 HTML 元素，以及透過 JavaScript 插入 HTML 和 CSS。您可能不確定無障礙功能如何融入這些環節。

JavaScript 可能會對網站無障礙功能造成重大影響。在本單元中，我們將分享一些透過 JavaScript 強化的一般無障礙模式，以及使用 JavaScript 架構時產生的無障礙問題解決方案。

觸發事件

使用者可透過 JavaScript 事件與網頁內容互動，並執行特定動作。許多使用者 (例如螢幕閱讀器使用者、精細動作技能障礙者、沒有滑鼠或觸控板的使用者等) 都需要鍵盤支援才能與網路互動。請務必為 JavaScript 動作新增鍵盤支援功能，因為這會影響所有使用者。

我們來看看點擊事件。 如果語意式 HTML 元素 (例如 <button> 或 <a>) 使用 onClick() 事件，自然會同時包含滑鼠和鍵盤功能。不過，如果將 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，您可以手動或使用輔助套件 (視 JavaScript 架構而定) 新增 document.title 值。向螢幕閱讀器使用者播報更新後的網頁標題可能需要額外作業，但好消息是您有許多選擇，例如動態內容。

動態內容

JavaScript 最強大的功能之一，就是能夠在網頁上的任何元素中加入 HTML 和 CSS。開發人員可以根據使用者的動作或行為，建立動態應用程式。

假設您需要在使用者登入網站或應用程式時傳送訊息，並希望訊息能從白色背景中脫穎而出，傳達「您已登入」的訊息。

您可以使用 innerHTML 元素設定內容：

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

您可以透過類似方式套用 CSS，但要使用 setAttribute：

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

能力越大，責任越重。很遺憾，從過去來看，HTML 和 CSS 的 JavaScript 插入功能遭到濫用，導致產生無法存取的內容。以下列出一些常見的濫用行為：

可能濫用 正確使用方式
算繪大量非語意式 HTML 轉譯較小的語意式 HTML 片段
未讓輔助技術有足夠時間辨識動態內容 使用 setTimeout() 時間延遲，讓使用者能聽到完整訊息
動態套用 onFocus() 的樣式屬性 在 CSS 樣式表中，對相關元素使用 :focus
套用內嵌樣式可能會導致系統無法正確讀取使用者樣式表 將樣式保留在 CSS 檔案中，確保主題一致性
建立非常大的 JavaScript 檔案，導致整體網站效能變慢 減少使用 JavaScript。您或許可以在 CSS 中執行類似功能 (例如動畫或固定式導覽)，這些功能剖析速度較快，效能也較高

如果是 CSS，請切換 CSS 類別，而非新增內嵌樣式，因為這樣可重複使用且簡單明瞭。使用網頁上的隱藏的內容和切換類別，隱藏及顯示動態 HTML 的內容。如需使用 JavaScript 動態新增網頁內容，請務必簡潔明瞭，當然也要確保可存取。

焦點管理

在「鍵盤焦點」模組中，我們介紹了焦點順序和指標樣式。焦點管理是指瞭解何時及何處應擷取焦點，以及何時不應擷取焦點。

焦點管理對僅使用鍵盤者來說至關重要。

元件層級

如果元件的焦點管理不當，可能會建立鍵盤陷阱。 如果僅使用鍵盤的使用者卡在某個元件中，或是焦點未維持在應有的位置，就會發生鍵盤陷阱。

使用者遇到焦點管理問題最常見的模式之一，是出現在模式元件中。僅使用鍵盤的使用者遇到模式時，應可透過 Tab 鍵在模式的可操作元素之間切換，但除非明確關閉模式，否則不應允許使用者離開模式。JavaScript 是正確擷取焦點的必要條件。

錯誤做法
正確做法

網頁層級

使用者從一個頁面瀏覽到另一個頁面時，焦點也必須維持不變。在 SPA 中，不會重新整理瀏覽器，所有內容都會動態變更，因此這點尤其重要。每當使用者點按連結前往應用程式中的其他頁面時，焦點會保留在相同位置，或完全移至其他位置。

在網頁之間轉換 (或路由) 時，開發團隊必須決定網頁載入時的焦點位置。

您可以透過多種技術達成此目標：

  • 使用 aria-live 公告將焦點放在主要容器上。
  • 將焦點移回連結，即可跳至主要內容。
  • 將焦點移至新頁面的最上層標題。

您決定要將焦點放在何處，取決於您使用的架構和要向使用者提供的內容。這可能取決於情境或動作。

狀態管理

JavaScript 對無障礙功能至關重要的另一個領域是狀態管理，也就是將元件或頁面的目前視覺狀態轉送給低視能、失明或全盲全聾輔助技術使用者。

如 ARIA 和 HTML 模組中所述，元件或頁面的狀態通常是透過 ARIA 屬性管理。接著來看看幾種最常見的 ARIA 屬性，這些屬性可用於管理元素狀態。

元件層級

視網頁內容和使用者所需資訊而定，向使用者傳達元件資訊時，可考慮使用許多 ARIA 狀態。

舉例來說，您可以使用 aria-expanded 屬性，告知使用者下拉式選單或清單是否已展開或收合。

或者，您也可以使用 aria-pressed 表示按鈕已按下。

套用 ARIA 屬性時，請務必謹慎選擇。請仔細思考使用者流程，瞭解應向使用者傳達哪些重要資訊。

網頁層級

開發人員通常會使用稱為「ARIA 即時區域」的隱藏區域，向輔助技術 (AT) 使用者播報畫面上的變更和警示訊息。這個區域可以搭配 JavaScript，在不需要重新載入整個網頁的情況下，通知使用者網頁的動態變化。

由於 JavaScript 具有動態特性，因此過去難以在aria-live和警示區域中發布內容。非同步將內容新增至 DOM 時，AT 難以選取區域並朗讀。如要正確讀取內容，即時或警示區域必須在載入時位於 DOM 中，然後才能動態替換文字。

如果您使用 JavaScript 架構，好消息是幾乎所有架構都有「即時播報員」套件，可為您完成所有工作，且完全無障礙。您不必擔心建立即時區域，也不必處理上一節所述的問題。

以下列舉一些常見 JavaScript 架構的即時套件：

現代 JavaScript 是一種功能強大的語言，可讓網頁開發人員建立穩健的網頁應用程式。這有時會導致過度設計，進而產生無法存取的模式。只要遵循本單元中的 JavaScript 模式和提示，就能讓所有使用者更輕鬆地使用您的應用程式。

上一頁
鍵盤焦點
下一頁
圖片