在上篇文章中，我們簡單介紹了一些在幾乎所有表單中都可以適用的無障礙設計原則與注意點，這篇文章更深入解析了註冊表單這個常用情境中，我們可以怎麼設計來讓所有人都能容易地使用，從而讓使用者快速註冊來完成他們的任務📃
- 錯誤訊息可以即時顯示在欄位下方。錯誤格子可以在錯誤訊息之外加上 aria-invalid="true"，使螢幕閱讀器也能在回到格子的時候立即發現出錯。
- 統一錯誤訊息顯示的時間點與方式。雖然在系統上有區分不同驗證方式，但是對使用者來說同樣都是錯誤，所以使用統一的方式來呈現能使使用者更能預期如何發現並改正錯誤。
- 如果錯誤訊息是顯示在各個欄位下方，可以在送出表單後將 focus 跳回第一個錯誤欄位，使螢幕閱讀器使用者、放大功能使用者與所有的使用者更容易注意到錯誤的存在。
- 如果錯誤訊息統一在送出後顯示在頁面上方的區域，需要設計讓螢幕閱讀器使用者也能快速定位的回饋（如透過改變頁面標題、將錯誤訊息區域標題加上Heading (H1) 等）。
- 使用圖標來標示錯誤訊息時，可以加上 aria-label="Error" ，使螢幕閱讀器使用者也能從圖標識別錯誤。
在進入正題之前，我們先稍微了解一下註冊表單的特性：
「沒人想要使用你的註冊表單，他們只是想要使用你的產品」
- 不知道你會不會跟我一樣，在購物網站要開心結帳時發現「居然要註冊！」時會突然覺得剛才的購物欲降低30%😩。
註冊表單是存在在使用者與他們真正目的中間的任務。以購物網站來說，很多棄單的原因正是因為使用者在準備結帳時才發現需要經過繁瑣的註冊環節；而註冊也會考驗部分使用者對於網站的信賴程度：我需要多信賴你，我才能把我的個人資料儲存在你的資料庫？ - 所以在設計註冊表單之前，可以考慮免註冊，或是可以使用註冊以外的方式登錄，例如使用其他常見帳號來登錄等，來降低再註冊表單上需要花費的時間。
- 即便要註冊，也需要徹底思考從使用者獲得的資料，盡量最低限度的要求。例如沒必要搜集生日的話，就不要要求使用者輸入生日（不要再寄生日電子報給我！！）。
關於其他註冊表單可以留意的設計點，這篇 Sign-up form best practices 有很好的總結，強烈推薦可以看看。
我們挑選了幾個不同的網站與產品，像是知名電商平台如PChome，樂天市場，售票系統如兩廳院、年代售票，國外著名的產品如Google、Amazon、Spotify，來觀察他們怎麼呈現註冊表單與錯誤訊息。
下面我們會從幾個重點來觀察這些錯誤訊息：
- 錯誤訊息出現的時間點？
- 錯誤訊息出現的方式？
- 如何呈現複數錯誤訊息？
- 錯誤訊息出現的時間點：統一於填寫欄位完，移動到下一個欄位之後
- 呈現錯誤訊息出現的方式：出現於錯誤欄位下方
- 如何呈現複數錯誤訊息：基本在填寫完之後就會出現單一錯誤訊息。在送出之後同時會呈現複數欄位的錯誤，並focus在第一個錯誤欄位上
在我們考察的十個網站中，我們決定頒給spotify全場最佳🎉
我們來介紹為什麼覺得spotify做得很棒：
符合我們上篇文章中提到的幾個方針與小特點
- 易發現：在時間點上首次出現於填寫完欄位之後，因此容易被察覺。
- 易定位：因為錯誤訊息顯示位置出現在欄位下方，不論是明眼使用者、放大功能使用者或是螢幕閱讀器使用者都能很容易地一起看到錯誤訊息與錯誤欄位，進而有效率地修正內容。另外，即便沒有察覺到出現了錯誤訊息，在按下註冊之後也會將焦點移動到最上方的錯誤欄位，這點除了有助於所有使用者認知到錯誤的存在，也能夠更有效率地定位錯誤的位置。
- 不只依賴顏色做錯誤提示，而是有使用圖標做標示
錯誤訊息的出現方式是一致的
我們觀察到的是在一般輸入之下，不論是「電子郵件已被註冊」，或者是「密碼太短」等不同的錯誤訊息，Spotify回報錯誤的方式都是一致的，也因此使用者可以預期錯誤訊息的出現方式。會把這個列為一個優點，是因為有許多服務目前是沒有做到這點的（會在下方介紹Google的部分詳述）。
很好的螢幕閱讀器體驗
螢幕閱讀器使用者的角度來說，除了一些基本項目做得很好之外（如有將錯誤欄位標示成aria-invalid="true"，所以使用者可以聽到「信箱 編輯區 無效的輸入」而不是「編輯區」），
Spotify還有一個有趣的設計點：如果查看Spotify的原始碼，會發現他們將錯誤圖標上了aria-label="Error"，也就是說螢幕閱讀器在報讀的時候也會把圖標唸出：「Error，請輸入你的電子郵件地址」。
這一點其實對於螢幕閱讀器使用者來說是個非常好的提示，主要有兩大功能：
- 圖標可以更明確地使螢幕閱讀器使用者知道「這是一個錯誤訊息」：出現在欄位下方的資訊有時候並不一定是錯誤訊息，也可能是輔助說明（例如密碼需要包含什麼內容、長度）。
非螢幕閱讀器使用者可能可以靠顏色或圖標區分錯誤訊息，但是對於螢幕閱讀器使用者來說，有時候需要去靠上下文或是情境去推測這是一個說明文字還是錯誤訊息。但是一旦有了圖標與其圖片描述，螢幕閱讀器也會唸出「圖片 error 電子郵件地址不匹配」，即便錯誤訊息沒有在字面上寫出「錯誤：」，也能讓使用者輕易知道這是個錯誤訊息。 - 圖標可以讓螢幕閱讀器使用者跨越欄位更快速地找到其他錯誤。
在「用你的金手指打開一扇扇任意門：物件的類型與快速導覽」一文中，我們有介紹到螢幕閱讀器使用者是有快捷鍵可以瀏覽特定物件的，在其中也有可以在圖片中跳躍的快捷鍵（以常見的螢幕閱讀器NVDA來說是使用G鍵）。
當使用者認識到在錯誤訊息前面會有一個圖標的時候，使用者就可能會想「可以透過查找圖標（圖片）來有效率地找找看其他錯誤訊息」，從而更有效率地修正錯誤。當然，前提是表單中沒有太多其他圖片要素。Spotify這個頁面簡潔地呈現了需要填寫的內容，讓使用者可以專注在填寫任務上。
以下是螢幕閱讀器使用者實際填寫表單的操作影片與評價：
@!(https://youtu.be/DZzqSucHqmY?feature=shared)
- 錯誤訊息出現的時間點：有欄位於填寫完後即時出現的，也有欄位在送出表單後呈現
- 呈現錯誤訊息出現的方式：出現於欄位下方
- 如何呈現複數錯誤訊息：在送出之後同時將複數欄位變成錯誤欄位，並focus在第一個錯誤欄位上
哪一點比較可惜？
錯誤訊息出現的時間點與出現方式不一致
其實關於錯誤訊息出現的時間點，攸關於在程式上我們是使用前端驗證還是後端驗證的方式，這一點根據驗證資料內容的不同與資料的安全度等會有所不同，但是作為設計師，我粗淺理解在操作上大致分為兩種：可以在使用者輸入完之後顯示錯誤的與需要在按下送出等按鈕後才能做驗證的。
Google的註冊表單中，只有使用者名稱欄位使用了即時驗證（輸入完之後會立即告訴你「這個名稱已有人使用」等），但是姓氏或是密碼是否符合規範，需要等到按下「繼續」按鈕後才會出現。
這會使在使用者名稱欄位中已經認識到「這個網站是即時驗證錯誤的！」的使用者，在覺得可以成功註冊而按下送出按鈕之後又必須面對錯誤訊息。
另外在螢幕閱讀器的使用上，也是只有使用者名稱在輸入完之後會使用一個名叫 aria-live 的技術，給螢幕閱讀器使用者即時提示：「剛剛的欄位出現錯誤了喔！」，但是其他的欄位並沒有任何相應的提示。這點會發生的問題也與上述類似，也就是讓螢幕閱讀器使用者會產生「出現錯誤會即時回報給我吧！」的錯誤預期。
引用當晚測試者的話來說：「能夠即時報錯很好，但是如果只有一個欄位能夠做到的話，寧可所有欄位都使用同樣的非即時報錯。」
換句話來說，對於使用者而言，具有統一性、可預期的報錯體驗，比起只有單一欄位能夠做到極致體驗來得重要。
對螢幕閱讀器隱藏圖標
Google也有在錯誤提示的句首加上錯誤圖標，而我們發現Google將圖標隱藏於螢幕閱讀器使用者，也就是說螢幕閱讀器使用者並不會知道圖標的存在。
也許其考量點在於圖標作為輔助性訊息，因此認為圖標對於螢幕閱讀器使用者並非需要知道的資訊。但是在與Spotify表單的比較當中，我們發現其實如果有做正確標示（將圖標的文字加上「錯誤」等），就可以提供螢幕閱讀器使用者一個可能的線索，更有效率地辨別錯誤訊息。
以下挑選幾個有特色的例子分享給你！
由於篇幅原因，在「我們覺得有什麼問題」之中，只會列舉一些問題，並不會將所有的問題點窮舉出來。
- 錯誤訊息出現的時間點：在按下「確定」送出按鈕之後
- 錯誤訊息出現的方式：使用上方出現的彈跳對話框（系統預設）
- 如何呈現複數錯誤訊息：一次只會顯示一個錯誤訊息對話框，所以在修正完一個提交之後會再跳出另一個錯誤對話框。
我們覺得有什麼問題？
- 不易發現與不易修正：對於放大功能使用者而言，由於出現的彈框與正在輸入的欄位距離很遠，很難立即發現彈框出現。由於彈框出現，在關閉彈框前頁面會暫時進入無法操作的狀態。且由於錯誤訊息放在對話框之中，並須先從輸入欄位移動到上方對話框→閱讀並記住錯誤訊息→返回輸入欄位並修正，使得修正的難度變得更高。
- 錯誤訊息出現的時間點：在填寫完欄位移動到下一格之後出現
- 錯誤訊息出現的方式：出現在畫面中央的pop up對話框（網站客製版）
- 如何呈現複數錯誤訊息：基本上每一格都是在填寫之後會跳出提示。如果無視提示按下送出按鈕，會出現一個對話框裡面記載所有的錯誤欄位。值得一提的是，雖然欄位樣式看起來像是超連結，但是點了沒有任何反應
我們覺得有什麼問題？
- 錯誤訊息的出現方式干擾使用者：由於在每一次出現錯誤的時候都會出現對話框來告知錯誤，需要關閉才能進行下一步，好處是確實能注意到錯誤訊息的發生並即時更正，但是由於必須在輸入與關掉對話框之間的操作模式來回切換，對於使用者來說是十分受到干擾的體驗。對於螢幕閱讀器使用者而言，關閉後的焦點不會自動移回發生錯誤的那格，使用者可能會誤以為是焦點所在的那格是有輸入錯誤
- 錯誤訊息出現的時間點：基本在送出表單之後統一出現
- 呈現錯誤訊息出現的方式：上方出現一個區域統一顯示，並且會有超連結連結到錯誤欄位，也會在各個格子周圍提示。
- 如何呈現複數錯誤訊息：上方出現一個區域統一顯示
我們覺得有什麼問題？
- 缺少對於螢幕閱讀器使用者的提示與定位：在刷新頁面之後，雖然在螢幕上是以醒目的紅色區塊作為提示，但是焦點並沒有自動移到這個區塊上，讓螢幕閱讀器使用者需要在花時間尋找定位，才能閱讀到這個區塊，另外這個錯誤訊息的區塊並沒有充足的語意標記元素來明確的知道這區塊是錯誤訊息的顯示區。如果能在這個區塊的開頭使用標題 h 來指明這段是個錯誤訊息顯示的話，不但能讓螢幕閱讀器使用者快速定位到區塊開頭也明確的指出區塊目的，能夠更容易且快速的辨識與定位錯誤訊息。
推薦延伸閱讀：在這篇文章 How to Provide Accessible Form Error Identification - Level Access 裡面提到錯誤訊息區塊如何使用 ARIA-region/live region 和 tabindex 來達到對螢幕閱讀器的提示作用。
想要在這裡趁機表達一下自己個人對於Accessibility與設計的想法。
其實我認為上面對於Google的評價有一點雞蛋裏挑骨頭，甚至有點沒有全面考慮：例如雖然我們提到錯誤訊息出現的時間點與出現方式雖然不一致，但是因為Google將表單本身設計得很簡潔，只有三個欄位，也因此使用者能夠很快地填完並試錯，並不會產生填完之後發現有十個錯誤需要修改的挫折感。
我相信設計師一般在考慮易用性時，一定也會優先考慮使用者體驗的視角，然後再與其他的要素與其他的團隊成員進行協商，以達到在各個方面平衡的結果。我們想要提供Accessibility作為一個設計的視角，並不是「不這樣做就不好或不對」，而應該是將Accessibility納入考量之後，從具體的情境、工程上的限制等去綜合考慮。
另外，我認為無障礙設計不是一家之言，也沒有正解。也正如考慮易用性可以有很多的出發點與分析方式，我們的分析也是受限於我們的背景與認知的一個主觀分析。
我們提供一個視角，但絕對不全面；雖然不全面，但是用意在於提高大家的討論與對無障礙觀點的注意。我們也歡迎並邀請更多不同的設計師進行補充與討論，因為更重要的是絕不是做到一百分的完美，而是把對於無障礙的考量列為其中一個重要的體驗考量點的心態，使越來越多的使用者能夠在我們的產品中獲得更好的體驗 ✨
關於註冊表單、inline error，你想知道更多嗎？
- 這篇文章總結了欄位內錯誤訊息的出現時間點與交互設計的詳細分析： Inline validation in forms — designing the experience
- 如何使欄位內錯誤訊息更無障礙？適合有一點點工程背景知識的你，介紹aria-invalid或是aria-live等技術：How to make inline error messages accessible
- 無障礙規範WCAG中對於識別錯誤的相關規範：適合願意啃Hardcore文章與規範的你（相關規範：3.3.1、3.3.3、3.3.4）：WCAG, Understanding SC 3.3.1:
Error Identification (Level A)
