我不曉得 label 原本是用來做什麼的？ 不過我覺得用它來處理一些無障礙的表單效果不錯，
在這篇文章我們就試著來用看看。
當你寫一個需要網頁使用者輸入某資料的文字框時，
例如網業訂餐服務要輸入電話號碼，
你或許會這樣設計你的表單：

請輸入電話：

其原始碼內容如下：

<p> 請輸入電話：
<input type=text name=user_tel>

使用舊版導盲鼠瀏覽網頁， 遇到文字輸入欄只會唸「可編輯的文字」，
你雖然知道這是一個可以輸入文字的欄位，
但不一定曉得它要你填寫的是什麼內容。
假如你已經是個老手，
自然知道此時該進入導盲鼠的快覽功能，
或者運用其他讀屏焦點移動的方式找到要你輸入什麼的那段提示信息，
這才知道可編輯的文字要輸入的是什麼？

新版導盲鼠比較聰明， 當遇見可編輯的文字，
它會主動把在此輸入欄附近的文字內容抓來朗讀，
好讓你知道在這裡該輸入什麼資料？
然而，
如果此時你正在用導盲鼠閱讀這篇文章，
試著按九宮格加號聽聽它如何呈現上面那個文字輸入欄的提示訊息，
咦？似乎導盲鼠唸的不只是「請輸入電話」而已吧？
這原本是它的貼心設計，
遇到可編輯的文字時它會主動朗讀離此輸入欄最近的文字內容，
好讓使用者知道這個文字輸入欄該寫什麼。
但你也發現了，
「可編輯的文字」附近的文字不一定都是此輸入欄的題是信息呀！
導盲鼠卻把它們全都抓過來唸給你聽，
難怪你要聽得霧煞煞。
如果遇到的是表格頁面，
輸入欄很多，
而每個輸入欄的提示訊息不一定在該欄位附近，
導盲鼠就更難朗讀正確的信息給我們聽了。
因此我個人覺得設計網頁的時候，
如何讓瑩幕閱讀軟體知道哪些文字內容才是某個文字輸入欄的提示信息？
並且正確的報告使用者，
這點非常重要，
你寫的表單要讓視障使用者都能精確地了解每個文字欄該輸入的是什麼？
才能算是一個成功的無障礙網頁設計。
要讓導盲鼠抓到我們真正需要的網頁資訊，
利用 label 標籤是一個很好的選擇。

上面的文字輸入欄我們可以做一點修改， 請同樣按九宮格加號看看下面這個文字輸入欄：

請輸入電話：

其原始碼如下：

<p> <label for=tel>請輸入電話：</label>
<input id=tel type=text name=user_tel>

你會發現導盲鼠只會朗讀「請輸入電話：」， 你使用螢幕閱讀器一聽便知在這裡該填什麼，
這樣是不是好多了？
其實這個輸入欄的作用跟上面那個沒什麼兩樣，
只不過我在這裡加入了 label 標籤，
導盲鼠遇到有 label 標籤的文字輸入欄就不會唸一大堆不相干的內容了，
只會把用 label 標籤包住的提示信息唸出來；
如果遇到有許多輸入欄的表格頁面，
只要每個輸入欄都有相對稱的 label 標籤，
不管有多少個文字輸入欄，
導盲鼠都能把每個輸入欄的提示信息報出來。

label 的用法很簡單， 注意這個例子中的 label 開始標籤，
它有一個「for」屬性：
for=tel
然後再注意 input 標籤，
它有一個「id」屬性：
id=tel
for 和 id 這兩個屬性的設定值依樣。
我們可以這樣子想：
「label 的 for，
要對應到 input 的 id」。
因此，
除了把要顯示的提示內容用 label 包住以外，
label 標籤的 for 屬性設定成什麼，
input 也要設定一個相同的 id 屬性。
如此成雙成對，
這樣子你的網頁使用者不管 tab 到哪個文字輸入欄，
導盲鼠或其他螢幕閱讀器才都可以精確的唸出它的題是信息，
讓使用者能夠輕鬆地了解每個文字方塊到底要輸入的是什麼。

以下就是將 label 標籤應用在表格中的範例， 請注意表頭中每個項目 label 標籤的 for 屬性，
和每個文字輸入欄input 標籤的 id 屬性，
不管有幾個文字輸入欄，
只要每個 input 的 id 都有跟他們對應的 label for 設定，
網頁用戶在填寫這些文字輸入欄，
螢幕閱讀器都可正確報告這些文字欄該輸入什麼內容。
除了 label 的使用方式之外，
還有許多地方值得我們學習，
我們日後會來慢慢介紹。
此外還有頁面的美觀設計，
在這個表單非常困擾我，
因為眼睛簇簇，
根本看它沒有！
不曉得 label 在電腦螢幕上會產生怎樣的效果？
我們日後還是可以針對頁面樣式設計多少也學習一些，
如此只要身邊有明眼朋友稍微幫忙檢查頁面效果，
我們雖然自己看不見，
也可以設計出賞心悅目的網頁了。

最後， 假如你把下面這張表單的 label 標籤拿掉的話，
比較看看就會知道 label 之於螢幕閱讀器有多麼重要，
尤其導盲鼠更是這樣，
使用其他閱讀軟體或許還感覺不出來，
總而言之，
我們都希望別人的網頁對視障者更友善，
那我們自己設計的網頁當然更要注意無障礙的設計了，
你說是嗎？

[code]

<br> <title>阿金師的灶咖</title> <br> <form name=kitchen action=#here> <p> <label for=tel>請輸入電話： </label> <input type=text name=user> <br> <table forder=3 width=100%> <caption> <!-- 表格名稱--可略不寫 --> 阿金師廚房菜單表<br> </caption> <tr> <!-- 表頭呈現 --> <th width=50%> <label for=itm> 項目 </label> </th> <th width=10%> <label for=prc> 價格 </label> </th> <th width=40%><label for=full> 點餐數量（請在此填寫）</label> </th> <br> <tr> <!-- 項目一 --> <td> <input id=itm value="紅燒獅子頭" name=item_1 type=text readonly> <td> <input id=prc value="25元" name=dollars_1 type=text readonly> <td> <input id=full name=how_many_1 type=text> <br> <tr> <!-- 項目二 --> <td> <input id=itm value="魷魚絲鮑魚獅子頭" name=item_2 type=text readonly> <td> <input id=prc value="52元" name=dollars_2 type=text readonly> <td> <input id=full name=how_many_2 type=text> <br> <tr> <!-- 項目三 --> <td> <input id=itm value="辣味焗烤獅子頭" name=item_3 type=text readonly> <td> <input id=prc value="35元" name=dollars_3 type=text readonly> <td> <input id=full name=how_many_3 type=text> <br> <tr> <!-- 項目四 --> <td> <input id=itm value="爐灶自助式烘烤獅頭湯" name=item_4 type=text readonly> <td> <input id=prc value="50元" name=dollars_4 type=text readonly> <td> <input id=full name=how_many_4 type=text> <br> <tr> <!-- 項目五 --> <td> <input id=itm value="橘子皮包獅子頭泡咖啡特餐" name=item_5 type=text readonly> <td> <input id=prc value="150元" name=dollars_5 type=text readonly> <td> <input id=full name=how_many_5 type=text> <br> <tr> <!-- 項目六 --> <td> <input id=itm value="美人獅子頭咖啡浴貴妃池" name=item_ˊ6 type=text readonly> <td> <input id=prc value="235元" name=dollars_6 type=text readonly> <td> <input id=full name=how_many_6 type=text> </table> </form> <br> <br>
[/code]

執行