前面有一篇文章再「可愛小豬問卷調查」這張表單，
裡面有一個「小豬名稱」的文字輸入框。
這是一個想要幫小豬徵求一個名稱的文字框，
網友們只要再這個文字框內輸入想要給這隻可愛小豬一個好玩的名稱內容就行。
問題就是當導盲鼠焦點按到這個文字框框的時候，
語音只會朗讀「可編輯的文字」，
誰能知道這「可編輯的文字」是要人家輸入什麼鼕鼕嗎？
有經驗的你，
或許知道可利用九宮格移動焦點的方式來了解某個文字籃要輸入的是什麼資料，
可是對於剛學習網路的人，
或者不熟悉導盲鼠操作的朋友來說，
他們遇到「可編輯的文字」框框的時候，
怎知道要輸入什麼？
這就牽涉道無障礙網頁設計的重要話題。
網頁設計一定要充分考慮到每個使用者是否能方便使用你所設計出來的頁面，
尤其是表單的設計，
更需要考慮到每個使用者，
是否能知道表單裡頭每個資料籃位應該寫的是什麼東西，
要勾選的項目有哪些等等？
如此你才可以透過網頁參觀的訪客表單資料填寫得到真正想要了解的資料，
否則當網頁瀏覽者來到了一個不知道要如何輸入資料的表單時，
你猜他們會怎樣楚哩？
如果是你，
進入一個不曉得要你幹麻的網頁，
你會怎麼辦呢？
「第一個動作毫不考慮，
大概就是立即關閉網頁閃人吧！」
許多網頁在設計上網網忽略了無障礙使用的問題，
名演朋友很簡單，
拿眼睛一喵就知道在哪個資料籃位該填入哪些東西，
或者該入和選取打勾他們要的項目。
盲用藉面的操作就不是這樣子了。
當你只聽見語音朗讀說「可編輯的文字」，
你知道這裡可以填寫文字內容，
可你知道這裡要填寫什麼資料嗎？
當你遇到語音朗讀說「選擇扭」，
你知道這裡有一些可供選擇的項目，
可是究竟有哪些東西可以選擇？
或者我已經選擇了哪些東西了嗎？
又或者遇到和取方塊的時候，
雖然知道這個和取方塊是否已經打溝了，
但到底已經被打溝溝的適哪些選擇項目呢？
好多好多網頁使用上的困擾，
我們該怎麼克服呢？
有時候逛到一些絕得很莫名其妙的網頁，
真是不曉得該怎樣閱讀才好，
例如預到圖形超連結，
或者圖形的按鈕，
只聽見島忙屬哩哩嚕嚕唸了一堆什麼 http://www 的網址名稱，
根本也不曉得這個是啥意思，
真的很討厭，
坦白獎遇到這類型的網頁，
除非我有太多的美國人時間了，
否則根本就立即關閉視窗，
再去找其他我能閱讀的網頁。
這一偏我們先來說一下 label 標籤的語法使用方式吧，
剩下的無障礙網頁設計，
等我自己學會了之後再根各位一起參詳參詳。
就以「問見調查」小朱銘稱這個文字方塊來說，
焦點移到文字方塊的時候，
我們希望導盲鼠不僅僅只朗讀「可編輯的文字」告訴我們這裡是一個可以輸入的文字框，
還要跟我們講這是一個輸入小豬名稱的可編輯的文字框框，
我們如何設計出這樣的網頁呢？
注意哦！語音朗讀不但要無障礙，
點字也要能摸得到文字方塊的提示訊息，
而且也要考慮到明眼朋友使用網頁的時候，
讓他們醫看就知道這個文字方塊要輸入的是什麼內容。
唉唷！那麼麻煩呀？
要考慮自己的需求，還要考慮人家的需求嗎？
那是當然的囉！
你一定要相信你自己的網頁，
除了忙人會來看，
明眼人也會來唷！
因為網頁內容越精采，來參觀的訪客就越多啊！
訪客閱大，人氣越旺，
我們就更願意提供我們的分享與服務給更多朋友，
如此這般的良性循環下去，
魚是餵了有更好的分享，
我們就願意更賭力的求進步，
這樣的付出應該是植德的啦！
不過這篇文章裡我們要學習的 label 標籤還算很容易。
如何讓導盲鼠或者其他各類讀屏把文字輸入框的提示信息主動朗讀出來呢？
或者也讓點字顯示器也能呈現文字輸入框框的提示與？
很簡單，只要用 label 標籤把文字方塊的提示語包裹起來就行了。
文字輸入框我們就拿「可愛小豬問卷調查」這張表單為例，
可分成以下幾點解說：
1. 把提式語言用 label 標籤包起來：
<label>
小豬名稱：
</label>
2. 在 label 的開始標籤餒加入 for 屬性，修改之後的內容及成為：
<label for='inp'>
小豬名稱：
</label>
注意：for= 後面的那個字串，
需跟 input 的 id 屬性的字串要依樣哦！
至於你想要用什麼樣的字串，
就看你自己了。
我之所以用 inp 這個字串，
因為 input 標籤縮寫字可以成為 inp，
我絕得這樣子比較好記住。
3. 把文字框輸入內容的標籤寫上：
<input type='text' name='pig_name' id='inp' value=''>
注意：input 標籤的 id= 後面的字串內容，
要跟 label 開始標籤的 for= 後面的字串依樣才行，
要不然島忙屬不曉得位啥就會給它抓不到文字輸入框的提示語喔！
把上面的說明搞董了以後，
將來我們就可以用 label 標籤來把文字輸入框或者各類型的選擇按鈕的提示語包起來，
當島忙屬跳入這個框框裡頭的時候，
不但語音朗讀會主動告訴我們這個輸入欄位要輸入的是什麼資料，
而且使用點字顯示器也能很容易的摸獨到提示的語言，
根本不需要再用九工格案件來移動焦點才知道提示信息的內容。況且有些網頁根本連移動焦點也不一定就能抓得到提示語，那就不曉得某個欄位該輸入哪些內容嚕！
好的！現在我們就把第一張表單做個修改吧！
讓這個表單的文字輸入框的提示語用 label 包起來，
至少能完成無障礙設計的第一昭。
代碼內容如下：
執行
為何要教學網頁
為何要教學網頁
為何要教學網頁
為何要教學網頁
為何要教學網頁
為何要教學網頁
為何要教學網頁