網頁標題: 在表單加入 label 標籤

Warning: fopen(/home/crazy/www/learner/cpuroom/programmer/has_read.php): failed to open stream: Permission denied in /home/crazy/www/compose/reading.php on line 2077

Warning: fputs() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2079

Warning: fclose() expects parameter 1 to be resource, bool given in /home/crazy/www/compose/reading.php on line 2080
 
﹗﹗﹗觀看留言:此文章已經有4則留言 ﹗﹗﹗


我不曉得 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]

執行


回 · 大家來學php 這一篇文章封面


本文張貼者:程咬金〔張貼時間:民國101年7月6日(星期五)12點02分 | 更新次數 #2 | 最後更新:民國101年7月7日(星期六)20點42分〕 | 寫信給程咬金 | 參訪部落:「小程故事」

回本頁目錄


學習的故鄉首頁
本站公告:〔您越需要我們,我們就越有創意〕 本站說明書:〔發現故鄉還有改進的地方,請來信告訴原丁們〕
觀察應用學習點數 :〔咱的故鄉有您的參與,會使我們有更大的發揮空間,展現更豐富精彩的學習畫面〕 〔期待藉由無障礙網頁設計,能讓視障小朋友更愛看書、更愛寫作且更愛學習〕:盲用電腦「心得分享」
〔為了讓我們有乾淨的學習環境,請勿任意在本站散播商業廣告與不合法文件或聯結〕:本站宣示