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

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