無障礙訪問 錯誤

為什麼

每個人都會犯錯。當我們犯錯時，我們需要理解我們為什麼失敗，以便能夠糾正自己。可訪問的表單需要有可感知且可理解的錯誤訊息，供色盲、失明或視力低下者以及有認知能力限制的人使用。

什麼

可訪問的錯誤訊息是

• 以文字形式寫出。可以使用顏色和圖示，但不能單獨使用。
• 靠近導致失敗的元素。
• 資訊豐富，幫助使用者。
• 在程式碼中與失敗的元素相關聯。

此外，將焦點移動到出現故障的表單控制元件上會很有幫助。

在此登錄檔中，使用者輸入了數字而不是字元。

如何操作

您將學習五種建立可訪問錯誤訊息的技術。

以文字形式書寫

錯誤訊息以文字形式書寫，此外還有警告圖示和紅色邊框。三種不同的指示器使使用者能夠清晰地瞭解此錯誤情況。僅使用圖示和紅色邊框不足以讓所有使用者理解。

近距離

彼此靠近的設計元素被感知為相關的，而分開的元素則被感知為屬於不同的組。

在此示例中，錯誤訊息靠近失敗的欄位。結合欄位之間的大邊距，很容易理解錯誤訊息屬於哪個欄位。

資訊豐富

資訊越豐富越好。

在我們第一個示例中，“您的名字必須至少包含兩個字母，不能包含特殊字元”這個錯誤訊息資訊量很豐富。它是用人類語言寫的。可以改進，寫得更精確

“您的名字只能包含字母，不能包含數字。”

越精確越好。這意味著系統需要更多的錯誤訊息來處理不同的情況。在決定要建立多少種不同的錯誤訊息和情況時，要務實。詢問使用者他們是否明白出了什麼問題。如果他們不明白，請更精確地撰寫錯誤訊息。

與表單控制元件關聯

但程式碼呢？

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?">

<p id="firstName-length-error" role="alert">您的名字必須至少包含兩個字母，不能包含特殊字元</p>

該錯誤具有 alert 角色。這很好。即使它不在焦點上，螢幕閱讀器也會朗讀其內容。

錯誤訊息未與欄位關聯。可以使用 aria-describedby 屬性來完成。該值是錯誤訊息的 ID。

此外，我們應該在無效的表單控制元件上新增 aria-invalid="true"，以告知螢幕閱讀器表單控制元件已失敗。輸入欄位的改進版本

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error" aria-invalid="true">

移動焦點

與客戶端驗證相比，這對於伺服器端驗證更重要。當用戶提交表單時，焦點會移動到第一個無效欄位。

在此示例中，所有三個欄位都無效。焦點移動到了第一個欄位“名字”。當用戶開始鍵入時，錯誤會消失。