考慮鍵盤輔助功能設計應用程序的 5 個步驟

當我們想到“普通”用戶時，我們傾向於想像他們在使用計算機時使用鼠標或觸控板。 但是，如果他們的首選或唯一選擇是使用鍵盤怎麼辦？ 您是否考慮過在設計應用程序時考慮鍵盤輔助功能？

有些人可能不想或無法操作鼠標或觸控板來使用他們的計算機，原因有很多。 他們可能有永久性、慢性或暫時性的疾病，這些疾病限制了他們的靈活性或肌肉控制，導致他們的手腕或手敏感，或者難以跟隨屏幕上的鼠標光標。 他們也可能是“超級用戶”，他們正在尋找更多的捷徑來簡化他們的工作流程。 在任何這些情況下，鍵盤可能是個人首選或必要的與技術交互的方式。

在本文中，您將了解鍵盤輔助功能準則，以及設計應用程序時要牢記的五個步驟，以確保它們可以通過鍵盤訪問。

鍵盤輔助功能如何工作？

如果應用程序可通過鍵盤訪問，則意味著人們可以選擇僅使用鍵盤來操作控制元素。 控件元素是頁面上的任何交互式組件，例如按鈕、鏈接、表單輸入、視頻和其他交互式內容。

鍵盤導航基礎知識

以下是用於鍵盤導航的一些基本鍵：

• 導航到下一個控制元素： Tab（或相關單選按鈕的向右或向下箭頭鍵並選擇選項）
• 導航到上一個控制元素： Shift + Tab（或相關單選按鈕和選擇選項的向左或向上箭頭鍵）
• 單擊控制元素： Enter 和/或空格鍵
• 在相關單選按鈕或選擇選項之間導航：箭頭鍵

焦點順序

控制元素響應鍵盤事件的順序稱為焦點順序。 當一個元素獲得焦點時，您可以使用某些鍵盤控件與其進行交互。 當元素失去焦點時，它會變得模糊。 瀏覽器呈現默認焦點狀態，以幫助用戶跟踪當前處於焦點的元素。

您可能還喜歡：通用設計：使您的網站和應用程序更易於訪問的 11 個實用技巧。

鍵盤輔助功能和 Web 內容輔助功能指南 (WCAG)

Web 內容可訪問性指南 (WCAG) 概述了三個級別的合規性 - A 級、AA 級和 AAA 級 - 已被採納為全球區域或國家網絡可訪問性法律的標準。

鍵盤可訪問性是 A 級合規性的成功標準之一。 A 級標準描述了所有 Web 內容的必備功能。 它們也被認為是最容易實施的。

“如果我們不小心，鍵盤輔助功能也很容易出錯。”

也就是說，如果我們不小心，鍵盤可訪問性也很容易出錯。 以下是在網絡上發現的常見鍵盤輔助功能問題的示例：

• 難以察覺的焦點狀態
• 對焦順序不正確
• 無法獲得焦點的交互元素
• 不接收鍵盤交互的複雜組件

幸運的是，我們可以使用很多技巧來記住鍵盤用戶並避免在我們自己的應用程序中犯這些錯誤。

構建鍵盤可訪問應用程序的 5 個步驟

1. 設計直觀的交互

當我們呈現沒有自定義行為的簡單控制元素時，我們通常可以利用它們內置的鍵盤輔助功能。 但是，如果我們不知道與按鈕、鏈接或輸入相關的標準鍵盤行為，我們可能會無意中為鍵盤用戶創造令人困惑的體驗。

“如果我們不知道與按鈕、鏈接或輸入相關的標準鍵盤行為，我們可能會無意中為鍵盤用戶創造令人困惑的體驗。”

例如，開發人員有時會使用 CSS 來隱藏原生 HTML 單選按鈕，以支持更具風格的視覺效果。 輸入是幕後的單選按鈕並不明顯，因此鍵盤用戶可能沒有意識到他們應該使用箭頭鍵——而不是 Tab 鍵——在相關選項之間切換焦點。

為了避免這個問題，我們應該顯示一些至少類似於原生 HTML 元素的東西，以便為任何想要或需要使用鍵盤與之交互的人提供視覺提示。

2. 構建你的應用程序，讓鍵盤可以做鼠標可以做的一切

請注意沒有內置鍵盤輔助功能的元素。 默認情況下，佈局元素、列表、表格、標題、段落和非語義 HTML 標記不支持鍵盤快捷鍵。 然而，它們經常用於構建更複雜的組件，例如選項卡、拖放列表或模式。

JavaScript 使我們能夠添加事件監聽器，使非控制元素響應鼠標點擊或手勢。 例如，在 React 中，我們可以使用onClick屬性為列表項元素添加交互性。

每當我們向非控件元素添加交互性時，我們需要將它們的tabIndex屬性設置為0 。 這將允許元素在按下 Tab 鍵時以正確的焦點順序接收焦點。 我們還需要實現 keypress 或 keydown 事件處理程序，以通過 Enter 鍵和/或空格鍵註冊“點擊”（可以使用這兩種鍵單擊鏈接，而按鈕僅支持 Enter 鍵）。

我們可以通過使用錨標記或按鈕元素等控件來避免一些額外的工作。 我們總是可以使用 CSS 來覆蓋默認的鏈接和按鈕樣式，並使交互元素跨越其非交互父元素的整個寬度以最大化目標區域。

無論我們是否將控制元素用於非本機功能，我們可能仍需要為箭頭鍵（在選項卡組件中的選項卡之間導航）或 Escape 鍵（關閉覆蓋）添加事件偵聽器以使我們的組件 100百分比鍵盤可訪問。

如果我們為更複雜的組件實現非標準鍵盤行為，提供可見的說明來描述人們可以用來與組件交互的鍵盤控件會很有幫助。

3.覆蓋默認焦點順序時做額外的工作

焦點順序是另一個與鍵盤可訪問性密切相關的 WCAG 要求。 為滿足 A 級標準，焦點順序應與頁面上交互元素的視覺順序一致。 鍵盤用戶應該能夠在屏幕上從上到下並在與文本內容相同的水平方向（從左到右或從右到左）中瀏覽控制元素。

滿足此標準的最簡單方法是保留默認的焦點順序，它由元素在標記中的排列順序決定，因為它是。 當我們在控制元素的視覺順序和它們在源代碼中的佈局方式之間引入差異時，我們就有可能無法滿足此標準。

您可能還喜歡：使用 Liquid 和 Shopify 構建可訪問的麵包屑導航。

如果我們使用上面的屏幕截圖作為示例，假設我們希望“更新標籤”卡在為較窄的視口堆疊時與“更新描述”卡交換位置。 如果卡片呈現為彈性項目，我們可能會考慮使用 order CSS 屬性在特定斷點處更改它們的順序。

雖然order屬性影響彈性項目的視覺順序，但它不會更新它們在源代碼中的排列。 因此，當用戶按 Tab 鍵在每個按鈕之間導航時，“更新標籤”按鈕仍將在“更新描述”之前獲得焦點，即使它們在屏幕上的顯示順序相反。 這會導致焦點意外地在頁面上上下移動，從而給用戶帶來一種迷失方向的體驗。

避免此問題的一種方法是在標記中呈現兩個版本的卡片：一個按較寬視口寬度的預期順序排列，另一個按較窄視口寬度所需的順序排列。 我們可以使用display屬性在某些斷點處在它們之間切換。

如果我們不想在標記中保留兩個版本，我們將需要使用 JavaScript 來更新卡片在頁面上堆疊時的tabIndex屬性。 根據我們正在呈現的控制元素的數量，這種方法可能比在標記中維護不同版本的卡片更難獲得正確的結果。

4.自定義焦點狀態時，為最需要的用戶設計

瀏覽器使用outline CSS 屬性來呈現元素處於焦點的某種視覺指示。 焦點狀態旨在幫助用戶在使用鍵盤導航頁面時識別哪個元素將註冊鍵盤事件。

設計人員和開發人員替換瀏覽器呈現的默認焦點狀態是很常見的。 這可能涉及更新默認outline ，或完全刪除它並用另一個 CSS 屬性替換它，例如background 、 border 、 box-shadow 、 color或transform 。

您可能還喜歡：使用 Liquid 創建可訪問的分頁。

無論我們決定在我們的應用程序中呈現自定義焦點狀態，我們應該確保它們滿足以下可訪問性要求：

• 足夠的顏色對比度：我們的焦點狀態和它周圍的顏色之間應該有足夠的對比度，以便視力受損的用戶可以輕鬆地跟踪當前聚焦的元素。
• 顏色的變化與其他視覺指標相結合：色盲用戶可能不會注意到元素邊框、字體或背景顏色的變化。 它應該與其他不需要用戶能夠區分顏色的視覺變化搭配使用。 這也適用於涉及顏色變化的懸停和錯誤​​狀態。
• 在高對比度主題中可見：在 Windows 設備上啟用高對比度模式時，一些 CSS 屬性（包括background和box-shadow ）將被忽略。 顏色的變化也可能不會被記錄下來，這就是為什麼依賴額外的指示器非常重要，這些指示器對於需要背景和前景顏色之間更多對比度的人來說是可感知的。

雖然覆蓋默認outline屬性是可以接受的，但切勿在不提供替代品的情況下刪除默認焦點狀態。

5.為鍵盤用戶提供快捷鍵

如果有人使用鼠標瀏覽網頁，他們可以在頁面加載時滾動到無關的標題內容，以找到他們正在尋找的信息。 對於鍵盤用戶來說，這個過程不是很流暢，他們可能需要在多個導航鏈接或頁面主要內容之前的任何其他控制元素之間切換。

作為開發人員，我們可以在應用程序每個頁面的頂部提供一個“跳過鏈接”，以允許鍵盤用戶繞過頁面主要內容之前的控制元素。 跳過鏈接通常是隱藏的，直到它獲得焦點。 使用鼠標與您的應用程序交互的人看不到它，但對於使用鍵盤的人來說，它將是第一個獲得焦點的元素。

單擊鏈接時，焦點轉移到主要內容容器，鍵盤用戶可以立即開始在頁面上的主要控制元素之間切換。

跳過鏈接不僅僅是方便的快捷方式。 它們是旁路塊的示例，需要滿足 A 級 WCAG 標準。

自己成為鍵盤用戶，經常測試您的應用

對於不習慣使用輔助技術或設備的人來說，測試鍵盤可訪問性的學習曲線相對較低。 您只需要使用鍵盤、熟悉標準鍵盤行為以及使用 Windows 高對比度模式（通過獲取 Windows 設備或安裝虛擬機）。

在測試我們的應用程序的鍵盤可訪問性時，請記住以下一些問題：

• 我能否使用我的鍵盤與任何響應鼠標點擊和手勢的東西進行交互？
• 當它獲得焦點時，有人會知道如何與這個元素交互嗎？
• 焦點順序是否與頁面上交互元素的視覺順序相匹配？
• 我能否跟踪當前聚焦的元素，即使我需要更高的顏色對比度？
• 我可以很容易地到達頁面的主要內容嗎？

對所有這些問題都回答“是”並不需要付出很多努力，並且在任何情況下都能對用戶產生積極影響：無論他們有身體殘疾、正在尋找節省時間的方法，還是需要使用他們的電腦用一隻手。

輔助功能測試是應用程序開發的重要組成部分。 具體來說，鍵盤可訪問性與為使用屏幕閱讀器的人提供替代文本或為無法聽到音頻內容的人提供字幕一樣重要。 歸根結底，如果您希望您的應用程序可以完全訪問，那麼使用該應用程序不需要使用鼠標的能力。