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

你是否曾为网页表单的难用所苦？举例来说，标准的 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