第二十八天：加上元件描述

妳是否曾為網頁表單的難用所苦？舉例來說，標準的 GUI 應用程式裡，妳可以在核選框標籤上任何一個地方核選或取消核選；但是在網頁應用程式裡，妳祇能在核選框的框框裡纔能這麼做。這樣雖然煩人但還不至於無可挽回。但對於視盲的讀者來說，這個狀況可能更糟。即使是像迴響發表表單這樣子簡單的東西，一旦妳無法看到了，就可能非常難以使用（我們曾經注意過表格裡的相似問題：網誌月曆祇有在能夠一次被整個看到時纔會好用；如果一次祇能看到一天的話，就會變得相當困難）。

有一些 HTML 標籤可以讓表單比較容易使用。在此我所要談的是 <label> 標籤；至於其他的那些，妳可以在「延伸閱讀」裡找到。

<label> 標籤可以把任何表單輸入元件連結到表單稱號：文字盒、多列文字區域、核選框、圓形按鈕等等。這會讓螢幕朗讀軟體聰明地唸出輸入元件的稱號，讓使用者知道那到底是甚麼。除此之外，如果妳把核選框 (<input type="checkbox">) 加上了 <label> 標籤，寫著其後所出現的文字的話，妳的網頁表單也會跟 GUI 應用程式一樣：在文字稱號讓任何地方點選，都可以對核選框起作用。

誰因此獲益？

Jackie 從中獲益了。因為當 Jackie 在表單間跳躍時， JAWS 會把每一個元件的名稱（從他們的 name ）唸出來；但這樣可能並不明智。不過如果這些表單元件也有稱號的話， JAWS 就會改成去念這些稱號文字。「 Text: name. 」 (TAB) 「 Text: email address. 」 (TAB) 「 Text: URL. 」 (TAB) 「 Text area: comments. 」之類的。
Lillian 從中獲益了。因為一旦元件被貼上了稱號， Lillian 就能按下核選框後的文字，還能生效。這麼一來，就能夠大幅提高用把滑鼠游標對到核選框的容錯範圍；而以她有限的視力來說，這個範圍顯然是越大越好。
Bill 應該也要從中獲益了，可惜還沒有。他主要是透過鍵盤，也就是 TAB 鍵來導覽。當他跳到表單裡的核選框時， Mozilla 應該要把焦點移到整個稱號外的矩形外框，可惜並沒有這樣，焦點祇移到核選框本身的矩形外框而已（然而 Internet Explorer 的結果是對的，甚至 Netscape 4 也能弄對。 Mozilla 這回遜掉了）。

怎麼做： Movable Type

在 Movable Type 裡，編輯妳的迴響清單模版。在接近底下的地方，妳會看到有個表單包含了像是這樣的元件：

名字:<br /> <input name="author" /><br /><br /> Email 地址:<br /> <input name="email" /><br /><br /> 網址:<br /> <input name="url" /><br /><br /> 迴響:<br /> <textarea name="text" rows="10" cols="50"></textarea><br /><br /> <input type="checkbox" name="bakecookie" />記住我的資訊?<br /><br />

每一個裸露的稱號都應該要被裝進 <label> 標籤裡。同時，因為 <label> 標籤會用 ID （而不是 name ）指到表單元件去，所以每個 <input> 標籤也都還要再加上 ID 屬性。全部加起來，最後看起來應該會像這樣：

<label for="author">名字:</label><br /> <input id="author" name="author" /><br /><br /> <label for="email">Email 地址:</label><br /> <input id="email" name="email" /><br /><br /> <label for="url">網址:</label><br /> <input id="url" name="url" /><br /><br /> <label for="text">迴響:</label><br /> <textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br /> <input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">記住我的資訊?</label><br /><br />

請確定妳也在迴響預覽模版、迴響出錯模版和單篇彙整模版裡都做了相同的修改。

怎麼做: Greymatter

在「 Edit Karma & Comments-Related Templates 」裡，妳應該會看到一個叫「 {{entrycommentsform}} Posting form 」的模版，裡面包含著這樣的東西：

Name <BR> <INPUT TYPE=TEXT NAME="newcommentauthor" SIZE=40> <P> E-Mail (optional) <BR> <INPUT TYPE=TEXT NAME="newcommentemail" SIZE=40> <P> Homepage (optional) <BR> <INPUT TYPE=TEXT NAME="newcommenthomepage" SIZE=40> <P> Comments <BR> <TEXTAREA NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

請改成這樣：

<label for="newcommentauthor">Name</label> <BR> <INPUT TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40> <P> <label for="newcommentemail">E-Mail (optional)</label> <BR> <INPUT TYPE=TEXT id="newcommentemail" NAME="newcommentemail" SIZE=40> <P> <label for="newcommenthomepage">Homepage (optional)</label> <BR> <INPUT TYPE=TEXT id="newcommenthomepage" NAME="newcommenthomepage" SIZE=40> <P> <label for="newcommentbody">Comments</label> <BR> <TEXTAREA id="newcommentbody" NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>

Dive Into Accessibility