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 切換元素類別,並將樣式新增至 CSS 樣式表。
使用 JavaScript 直接在 HTML 元素中套用動態樣式。

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

是,所有動作都會自動支援鍵盤使用者。
不行,您只能使用語意 HTML 支援鍵盤使用者。
可以,但你可能需要額外進行一些設定。