JavaScript

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 架構的部分即時套件：

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

進行隨堂測驗

測驗您對 JavaScript 的瞭解

使用 JavaScript 變更元素樣式的最佳方式為何？

使用 JavaScript 直接在 HTML 元素中套用動態樣式。
這會導致 JavaScript 檔案變得臃腫，且效率不彰。
使用 JavaScript 切換元素類別，並將樣式新增至 CSS 樣式表。
請將樣式保留在 CSS 樣式表中，並使用輕量版 JavaScript 變更類別名稱。

所有 JavaScript 動作是否都能支援鍵盤使用者？

可以，但你可能需要額外進行一些工作。
語意式 HTML 預設支援鍵盤使用者，但含有動作的非語意元素則需要額外的 JavaScript。
是，所有動作都會自動支援鍵盤使用者。
只有語意 HTML 會自動支援鍵盤焦點。
不行，您只能使用語意 HTML 支援鍵盤使用者。
所有 HTML 元素都能支援鍵盤使用者。