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

你是否曾为网页表单的难用所苦?举例来说,标准的 GUI 应用程式里,你可以在核选框标签上任何一个地方核选或取消核选;但是在网页应用程式里,你祇能在核选框的框框里才能这么做。这样虽然烦人但还不至于无可挽回。但对于视盲的读者来说,这个状况可能更糟。即使是像回响发表表单这样子简单的东西,一旦你无法看到了,就可能非常难以使用(我们曾经注意过表格里的相似问题:网志月历祇有在能够一次被整个看到时才会好用;如果一次祇能看到一天的话,就会变得相当困难)。

有一些 HTML 标签可以让表单比较容易使用。在此我所要谈的是 <label> 标签;至于其他的那些,你可以在“延伸阅读”里找到。

<label> 标签可以把任何表单输入元件连结到表单称号:文字盒、多列文字区域、核选框、圆形按钮等等。这会让荧幕朗读软体聪明地唸出输入元件的称号,让使用者知道那到底是甚么。除此之外,如果你把核选框 (<input type="checkbox">) 加上了 <label> 标签,写着其后所出现的文字的话,你的网页表单也会跟 GUI 应用程式一样:在文字称号让任何地方点选,都可以对核选框起作用。

谁因此获益?

  1. Jackie 从中获益了。因为当 Jackie 在表单间跳跃时, JAWS 会把每一个元件的名称(从他们的 name )唸出来;但这样可能并不明智。不过如果这些表单元件也有称号的话, JAWS 就会改成去念这些称号文字。“ Text: name. ” (TAB) “ Text: email address. ” (TAB) “ Text: URL. ” (TAB) “ Text area: comments. ”之类的。
  2. Lillian 从中获益了。因为一旦元件被贴上了称号, Lillian 就能按下核选框后的文字,还能生效。这么一来,就能够大幅提高用把滑鼠游标对到核选框的容错范围;而以她有限的视力来说,这个范围显然是越大越好。
  3. 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>

延伸阅读