無障礙 自動填充
為什麼
autocomplete 屬性使表單對所有使用者都更容易、更高效，特別是對於注意力缺陷、有認知障礙、行動不便、低視力或盲人使用者。
什麼
您是否曾遇到過一個網頁表單，您的瀏覽器以一種神奇的方式自動填充了欄位？這是因為瀏覽器很智慧，或者表單作者正確地使用了 autocomplete 屬性。
這對每個人都很方便。這對運動障礙或認知障礙的使用者非常有幫助。填寫表單可能很困難，而 autocomplete 屬性經常是助一臂之力。
如何操作
Autocomplete 可用於 <input>、<textarea>、<select> 和 <form> 元素。該屬性有許多可能的取值，例如：
- "name": Daniel Zhang
- "given name": Daniel
- "family name": Zhang
- "organization": Alibaba Group
- "country-name": China
- "street-address": 699 Wang Shang Road
完整取值列表：使用者介面元件的輸入用途。
示例：一個登錄檔單
這個登錄檔單包含電子郵件和生日欄位。這是提供自動填充的好機會。許多使用者在瀏覽器中儲存了這些詳細資訊，以便使用啟用了自動填充的表單。瀏覽器需要了解欄位的用途。
標籤和佔位符是一些瀏覽器的提示，但不是萬無一失的解決方案。最好的方法是新增神奇的 autocomplete 屬性。
<input id="email" autocomplete="email" name="email" aria-required="true" placeholder="Email" required>
<select id="dobDay" autocomplete="bday-day" aria-required="true" required>
<select id="dobMonth" autocomplete="bday-month" aria-required="true" required>
<input id="dobYear" autocomplete="bday-year" placeholder="YYYY" aria-required="true" required>
異常
沒有例外就沒有規則。上面的程式碼示例將使表單易於使用、高效、無錯誤且無障礙。如果表單詢問的是另一個電子郵件地址，而不是“您的”電子郵件地址，那麼新增 autocomplete 屬性就沒有意義了。當資料可能未儲存在瀏覽器中時，它不應具有該屬性。
並非所有表單都零錯誤。您如何編寫可訪問的錯誤訊息。請繼續閱讀！
