無障礙網頁檢測培訓課程

第四章 編輯區

編輯區

說明

編輯區是一種跟使用者互動的基本元素，它需要使用者在該元件中輸入文字。

電腦是使用實體鍵盤來輸入，而手機則是使用虛擬鍵盤來輸入。

編輯區用於需要使用者輸入資料，如姓名、剩餘地址或備註欄等。

NVDA 在瀏覽模式下，於編輯區上欲輸入文字，需切換至焦點模式才能順利進行輸入。

有些編輯區會結合類似下拉式方塊的設計，在一邊輸入文字的情況下還可以用方向鍵上下選擇相關條目，如此可讓使用者減少輸入及降低輸入錯誤的機率。

這種設計對導讀軟體來說，較無障礙的設計是可以一邊輸入一邊聽讀相關詞組，與共有幾筆相關詞組等資訊。

這是屬於多樣的元件形態，除了設計者本身有無考慮到導讀軟體的操作外，導讀軟體本身的支援度也是一大關鍵。

除非是連續操作表單，否則使用 NVDA 在輸入完文字後，最好養成切換回瀏覽模式的習慣。因為有時送出資料或移到其他元素後，模式不一定會被自動切換為瀏覽模式。

操作

1. 使用方向鍵或 tab 鍵可以讓焦點在編輯區中駐點。
2. 利用 NVDA 的單鍵瀏覽：編輯區是 e 可直接跳至編輯區上。
3. 可以在編輯區中順利輸入及編輯文字。

模式

1. NVDA + 空白鍵：瀏覽模式與焦點模式輪流切換。
2. enter：切換為焦點模式。
3. esc：切換為瀏覽模式。

設定

建議將 NVDA 功能表 -> 偏好 -> 設定 -> 瀏覽模式，設定為非自動啟動焦點模式，設定項目如下：

• 勾選：頁面載入時啟用瀏覽模式
• 不勾選：焦點改變時自動切換焦點模式
• 不勾選：游標移動時自動切換焦點模式

雖然自動切換成焦點模式可以方便直接在編輯區輸入文字，這樣的預設值也許比較適合新手，但也帶來了一些副作用。

例如在瀏覽網頁時使用 tab 鍵或方向鍵會容易造成不小心改變某些元件的選項或卡在某個元件當中的情況，同時，在焦點模式下亦無法使用單鍵瀏覽功能。

因此會建議還是手動切換模式會比較理想，至少自己能完全掌握導讀軟體的模式，而不是讓它自動變來變去造成困擾或誤判。

態樣

1. 不論導讀軟體處於何種模式，只要使用 tab 鍵移入編輯區時皆能讓導讀軟體朗讀標題提示文字。
2. 若有特殊輸入格式時，需要讓導讀軟體朗讀相關提示文字。
3. 導讀軟體可朗讀「編輯區」或「編輯區多行」屬性，點顯器能摸讀到「edt」或「mln」縮寫。
4. 編輯區內需能順利編輯文字。
5. 相關提示文字不可在導讀軟體移入或輸入文字時自動消失或清空。
6. 輸入文字時，鍵盤之功能鍵不能被取消或鎖住。

原碼範例

編號 1 原始

原碼

<input type="text">

範例 1 原始

補充

不能沒有提示文字

編號 2 原始 + 使用 tab 鍵駐點無法朗讀提示文字

原碼

姓名<input type="text">

範例 2 原始 + 使用 tab 鍵駐點無法朗讀提示文字

補充

使用 tab 鍵駐點時無法朗讀標題提示文字

編號 3 使用 label 標籤包住編輯區來讓 tab 鍵駐點後朗讀標題

原碼

<label>姓名<input type="text"></label>

範例 3 使用 label 標籤包住編輯區來讓 tab 鍵駐點後朗讀標題

補充

點顯器切換成焦點模式亦可摸讀 label 標籤內之文字

編號 4 使用 label 標籤對應編輯區 id 來讓 tab 鍵駐點後朗讀標題

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name">

範例 4 使用 label 標籤對應編輯區 id 來讓 tab 鍵駐點後朗讀標題

補充

使用 label for input id 的作法比較標準，並且不受限於標籤位置

編號 5 使用 label 標籤包住編輯區並對應 id 來讓 tab 鍵駐點後朗讀標題

原碼

<label for="myname">姓名<input type="text" id="myname" name="name"></label>

範例 5 使用 label 標籤包住編輯區並對應 id 來讓 tab 鍵駐點後朗讀標題

補充

以上三種寫法的結果以檢測的角度來說，效果都是一樣的，而只要結果是符合規範的就可以通過檢測。

編號 6 label 沒有對應編輯區 id 也沒有包住編輯區的錯誤

原碼

<label>姓名</label>
<input type="text" id="myname" name="name">

範例 6 label 沒有對應編輯區 id 也沒有包住編輯區的錯誤

補充

使用 tab 鍵駐點時，無法朗讀標題提示文字

編號 7 label 對應錯編輯區 id 的錯誤

原碼

<label for="name">姓名</label>
<input type="text" id="myname" name="name">

範例 7 label 對應錯編輯區 id 的錯誤

補充

使用 tab 鍵駐點時，無法朗讀標題提示文字

編號 8 label 標籤被隱藏也會影響到導讀軟體的讀取

原碼

<label for="myname" style="display:none">姓名</label>
<input type="text" id="myname" name="name">

範例 8 label 標籤被隱藏也會影響到導讀軟體的讀取

補充

對無障礙不夠了解的設計師，可能會利用隱藏 label 標籤來讓畫面不要出現文字，但有些隱藏方式會讓導讀軟體也讀不到該 label 標籤

編號 9 加了隱藏類別的 label 標籤，只有導讀軟體才讀得到

原碼

<label class="visually-hidden-focusable" for="myname">姓名</label>
<input type="text" id="myname" name="name">

範例 9 加了隱藏類別的 label 標籤，只有導讀軟體才讀得到

補充

1. 舊版的 bootstrap3, 4 提供 sr-only 類別來在畫面上隱藏元素，但導讀軟體可以讀取到。
2. 新版的 bootstrap5 則使用 visually-hidden-focusable 類別來在畫面上隱藏元素，但導讀軟體可以讀取到。
3. 設計師也可以自創類別，寫 css 來達到類似效果。

編號 10 加入額外的補充提示文字(for id 版)

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name" placeholder="請以繁體字進行輸入">

範例 10 加入額外的補充提示文字(for id 版)

補充

除了標題外，有時需要進一步的格式說明或填寫範例

編號 11 加入額外的補充提示文字(包住編輯區版)

原碼

<label>姓名<input type="text" id="myname" name="name" placeholder="請以繁體字進行輸入"></label>

範例 11 加入額外的補充提示文字(包住編輯區版)

補充

1. 除了標題外，有時需要進一步的格式說明或填寫範例。
2. firefox 會朗讀兩次 placeholder 的文字。

編號 12 加入額外的補充提示文字(標題沒對應版)

原碼

<label>姓名</label>
<input type="text" id="myname" name="name" placeholder="請以繁體字進行輸入">

範例 12 加入額外的補充提示文字(標題沒對應版)

補充

1. 只要編輯區加了 placeholder 就會朗讀裡面的提示文字。
2. 沒有使用 label 設計的編輯區，但可以達到一樣的效果，還是可以通過檢測，但可以建議較標準的設計方式。

編號 13 在編輯區加入 title 屬性

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name" placeholder="請以繁體字進行輸入" title="若為字母，請以護照為準">

範例 13 在編輯區加入 title 屬性

補充

1. 這些屬性皆會朗讀。
2. 需要留意重複朗讀三次以上問題。

編號 14 利用編輯區的 value 屬性來放置提示文字

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name" value="請以繁體字進行輸入">

範例 14 利用編輯區的 value 屬性來放置提示文字

補充

1. 雖然有提示效果，但在輸入文字時，容易讓使用者造成困擾。
2. 原則上可以通過檢測，但可以建議標準的作法。
3. 需要注意，當焦點離開時，若未輸入文字，則需要將原本的提示文字加回去。

編號 15 利用編輯區的 value 屬性來放置提示文字，當焦點移入時會自動消失

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name" value="請以繁體字進行輸入" onfocus="clearvalue()" onblur="addvalue()">

範例 15 利用編輯區的 value 屬性來放置提示文字，當焦點移入時會自動消失

補充

1. 雖然有提示效果，但在取得焦點時，提示文字消失後，使用導讀軟體無法朗讀相關資訊。
2. 無法通過檢測，因為提示文字不能在取得焦點時消失。
3. 需要注意，當焦點離開時，若未輸入文字，則需要將原本的提示文字加回去。

編號 16 利用編輯區的 value 屬性來放置提示文字，當輸入時才讓提示文字消失

原碼

<label for="myname">姓名</label>
<input type="text" id="myname" name="name" value="請以繁體字進行輸入" oninput="clearvalue()" onblur="addvalue()">

範例 16 利用編輯區的 value 屬性來放置提示文字，當輸入時才讓提示文字消失

補充

1. 無法通過檢測，因為提示文字不能自動消失。
2. 需要注意，當焦點離開時，若未輸入文字，則需要將原本的提示文字加回去。

編號 17 自動完成功能

原碼

<form action="4-17.html" method="get">
    <label for="myname">姓名</label>
    <input type="text" id="myname" name="name" autocomplete="on">
    <p><button value="">送出</button>
</form>

範例 17 自動完成功能

補充

1. 自動完成功能是為了讓輸入較不方便或較慢的使用者可以快速完成輸入的方式，如肢體不方便的使用者。
2. 用來登入之欄位資料因安全性問題不適用自動完成功能
3. 只有在收集個人資料的欄位才會強制使用自動完成功能(AA等級)
4. 測試時需要先輸入文字，然後送出，讓瀏覽器有記憶。當編輯區具有自動完成功能時，導讀軟體才會朗讀相關提示文字

H98: Using HTML 5.2 autocomplete attributes

Web Content Accessibility Guidelines (WCAG) 2.1 7. Input Purposes for User Interface Components

編號 18 必填提示文字

原碼

<label class="text-danger" for="myname">姓名(必填)</label>
<input type="text" id="myname" name="name">

範例 18 必填提示文字

補充

直接把「必填」文字加在提示文字中才符合無障礙設計

編號 19 必填提示符號

原碼

<span>* 表示為必填欄位</span>
>p><label class="text-danger" for="myname">*姓名</label>
<input type="text" id="myname" name="name"></p>

範例 19 必填提示符號

補充

1. 不可只使用符號或顏色來標明線索。
2. 直接把「必填」文字加在提示文字中才符合無障礙設計。

編號 20 必填提示屬性

原碼

<label class="text-danger" for="myname">姓名</label>
<input type="text" id="myname" name="name" required="required">

範例 20 必填提示屬性

補充

1. 不可只使用屬性或顏色來標明線索。
2. 直接把「必填」文字加在提示文字中才符合無障礙設計。
3. aria-required 屬性狀況相同。

編號 21 多行編輯區

原碼

<label for="remarks">備註</label>
<textarea id="remarks" name="remarks"></textarea>

範例 21 多行編輯區

補充

效果、所有屬性皆與單行的編輯區大同小異

編號 22 格式與錯誤提示都在欄位旁邊

原碼

<label for="mycell">手機</label>
<input type="text" id="mycell" name="mycell">
<span>請直接輸入10個數字</span>
<div id="error" class="text-danger"></div>
<div><button id="btn">送出</button></div>

範例 22 格式與錯誤提示都在欄位旁邊

補充

只要有達到無障礙規範要求即可，使用者體驗的問題暫時不是首要考量

規範

1. HM1130112E 使用標籤組件將文字標籤與表單控制元件建立關連
   • 表單欄位沒有 label for 建立關聯
2. HM1130113E 無法使用標籤組件的情況下，用標題屬性來指明表單控制元件
   • 沒有 label for 建立關聯，亦不使用 title 屬性補充文字
3. HM2130500E 使用HTML 5.2自動完成之屬性
   • 欄位沒有自動完成功能，細部相關說明請見規範內文
4. GN1140102E 對有顏色的表單控制標題，提供文字線索提示
5. GN1330201E 提供文字描述以指明需填寫的必填欄位
   • 沒有直接使用文字標明必填欄位
   • 只使用符號標明必填欄位
   • 若所有表單項目皆為必填，可不標明必填欄位，若其中有些項目為非必填，則需要標明必填欄位
6. GN1330100E 提供文字描述以指明未完成的必填欄位
   • 必填欄位未填寫時，沒有文字提示(送出表單後)
7. GN1330101E 使用者輸入的內容不在允許清單中，或格式未符合所需時，均提供文字描述
   • 輸入錯誤後，沒有文字提示或描述(送出表單後)
8. GN1330102E 資料成功送出後，提供成功的回饋
   • 送出表單後，沒有結果提示
9. GN1330200E 在使用者送出資料前，先描述會發生什麼事
   • 表單用途不明確
10. GN1330202E 提供預期的資料格式與範例
    • 特殊格式或指定格式在填寫時就需要有文字說明
11. GN2330300E 提供文字描述以指明未完成的必填欄位，並建立可以讓使用者跳到出錯之處的機制
    • 輸入錯誤後，沒有將鍵盤焦點拉至錯誤欄位(送出表單後)
12. GN2330301E 使用者輸入的內容不在允許清單中，或格式未符合所需時，均提供文字描述，並提供建議的文字校正
    • 輸入錯誤後，需要提示更完整資訊，包括建議。

實測

1. 摩斯漢堡 電子信箱編輯區沒有提示文字
   • 從網頁最上方按單鍵瀏覽的 e 跳至電子信箱編輯區
   • 不通過，編輯區需要有標題提示文字
2. 渣打網銀 身份證字號等編輯區沒有提示文字
   • 從網頁最上方按單鍵瀏覽的 e 跳至身份證字號等編輯區並進行瀏覽
   • 不通過，編輯區需要有標題提示文字
3. 亞洲大學 不填直接送出表單後，未拉焦點至錯誤欄位
   • 從網頁最上方按單鍵瀏覽的 e 跳至帳號等編輯區並進行操作
   • 不通過(假設是檢測AA等級)，送出表單後，需要將鍵盤焦點拉至錯誤欄位以利修正
4. 新光醫院掛號 直接送出表單才知道有必填欄位
   • 從網頁最上方按單鍵瀏覽的 e 跳至證件號碼等編輯區並進行操作
   • 不通過，需要先直接以文字告知使用者哪些欄位是必填欄位，並且不能對導讀軟體隱藏
5. 臺北市單一陳情系統 案件編號欄位的必填處理
   • 從網頁最上方按單鍵瀏覽的 e 跳至案件編號編輯區
   • 查看原始碼觀察「請填寫這個欄位」的提示是怎麼設計的
   • 通過，有在 title 或 placeholder 屬性中撰寫相類提示文字也可以
6. google 搜尋 搜尋下拉編輯區的自動完成功能
   • 從網頁最上方按單鍵瀏覽的 e 跳至搜尋編輯區或 c 跳至搜尋下拉式方塊(同一個元素)
   • 輸入「錢」後，使用下方向鍵選擇想搜尋的項目
   • 按 enter 鍵進行搜尋
   • 通過，自動完成功能導讀軟體可瀏覽與操作
7. 中華民國視障者家長協會 捐款金額欄位的數字編輯區操作
   • 從網頁最上方按單鍵瀏覽的 e 跳至捐款金額編輯區
   • 除了直接輸入數字外，亦可使用上或下方向鍵來選擇。可以發現最小捐款金額
   • 觀察必填欄位的處理
   • 通過，有直接放置「必填」的文字提示到相關欄位中
8. 臺鐵線上訂票 日期欄位的格式處理
   • 從網頁最上方按單鍵瀏覽的 e 跳至日期編輯區並觀察格式
   • 通過，有在 title 或 placeholder 屬性中撰寫相類提示文字也可以
9. 臉書登入 姓氏編輯區沒有提示文字
   • 從網頁最上方按單鍵瀏覽的 e 跳至姓氏編輯區
   • 不通過，編輯區需要有標題提示文字
10. 中華電信 意見信箱的多行編輯區
    • 從網頁最上方按單鍵瀏覽的 e 跳至意見信箱編輯區
    • 發現「必填」設計有問題，不符合規範，但需要確認是否所有欄位皆為必填
    • 不通過，需要先直接以文字告知使用者哪些欄位是必填欄位，並且不能對導讀軟體隱藏
11. 自由時報報料 內容多行編輯區沒有提示文字
    • 從網頁最上方按單鍵瀏覽的 e 跳至內容編輯區
    • 朗讀表格欄位標題是表格方面的無障礙設計，與欄位本身的標題提示文字無關
    • 不通過，編輯區需要有標題提示文字
12. 台鐵訂票 出發站欄位有下拉屬性與自動完成功能
    • 從網頁最上方按單鍵瀏覽的 e 找到出發站
    • 輸入「臺」可以聽讀找到多少筆資料
    • 使用下方向鍵選擇想搜尋的項目
    • 按 enter 鍵確認項目
    • 還可以一邊輸入一邊縮小查詢範圍
    • 通過，自動完成功能導讀軟體可瀏覽與操作
13. 聯合報 搜尋編輯區只能用焦點模式查看
    • 從網頁最上方按 tab 鍵找到「登入」，再按一次 tab 鍵即可到達
    • 試著刪除元素屬性，將 div 的 class="input-holder" 刪除
    • 通過，因為 html 語法正確，焦點模式完全正常，輸入文字後也正常，使用瀏覽模式至少還能發現有此欄位
14. 小羔羊分享站(備用站點) 搜尋編輯區只能用焦點模式查看
    • 從網頁最上方按 tab 鍵即可到達
    • 試著刪除元素屬性，將 form 元素的 class="search" 刪除
    • 通過，因為 html 語法正確，焦點模式完全正常，輸入文字後也正常，使用瀏覽模式至少還能發現有此欄位
15. 松山區公所 發佈日期編輯區有格式提示
    • 按下快速鍵到達中央區塊
    • 按 tab 鍵到單元查詢並按 enter
    • 聽讀「發佈日期」欄位的格式資訊
    • 通過，有在 title 或 placeholder 屬性中撰寫格式提示文字是正確的
16. 健康存摺 輸入健保卡欄位會觸發事件拉動焦點
    • 從網頁最上方按 tab 找到「健保卡號」欄位
    • 在第一組健保卡號輸入4個數字後會被自動移到下個欄位
    • 在第二組健保卡號接著輸入2個數字後按 shift + tab 鍵想離開該編輯區，移到第一組健保卡號欄位
    • 不通過，焦點不可以被鍵盤陷阱困在某個區域或欄位中

補充

下拉式方塊的編輯區是一個複合式的屬性，也就是同一個元素有兩種以上的屬性。

從原始碼或實際使用上看來，下拉式編輯區的元素，重點還是以編輯區為主。

它需要在編輯區輸入文字後，使用下方向鍵才能選擇篩選出來的項目。

而傳統的下拉式方塊是原本就已經把選項歸納好放進下拉式方塊中，選項是固定的，並不像下拉編輯區是由你的輸入而動態產生選項的。

且通常下拉編輯區的下拉屬性可能是由無障礙屬性所產生，例如使用角色 role="combobox" 等。

這種元素在檢測時最容易遇到的障礙是輸入後無法搭配導讀軟體與方向鍵進行選取或確認。