從小型的動態元件,到透過 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 動作都支援鍵盤使用者嗎?