1

帖子提交 URL 如下所示：

default.cfm?fuseaction=Seasons.edit&sid=2569#errors

我为我的错误添加了一个内部锚点。代码如下所示：

<a name="errors"/>
<div id="errors">
    <p>An error has occured:</p>
    <ul>    
        <li><label for="name">Missing or invalid season name, click to jump there</label></li>
    </ul>
</div>

<form action="#errors" id="gronk" method="post">
<fieldset>      
<legend>Edit Season</legend>

<div class="row">
    <span class="cell">
        <label for="name"><span class="required">*&nbsp;</span>Season name<span class="wcag_hide"> Required string</span></label>
        <input type="text" name="name" id="name" class="formFields" value="" />
    </span>
</div>
...

这是使错误报告可访问的有效方法吗？

我曾想过把它改为，但我相信它只适用于 IE：

...
<li><a href="#name">Missing or invalid season name, click to jump there</a></li>
...
4

2 回答 2

0

不，不是。一个表单元素只能有一个标签。你的第二种方法更好，但我会删除“点击跳转”部分。

更改您的链接以<a href="#name" tabindex="-1">....</a>使其正常工作。我认为 Chrome 仍然存在页内链接问题，但这超出了我们的控制范围。

于 2012-06-22T15:27:18.393 回答
0

我认为在返回有错误的表单的情况下，您想要的主要是：

  1. 将用户的浏览器聚焦到有错误的输入
  2. 提醒您的用户存在错误以及导致错误的原因（例如无效的电子邮件）

所以可能，与其将用户带回default.cfm#errors ，不如将它们集中在第一个出现错误的字段上——例如，将它们带回default.cfm#name并将错误消息注入字段标签：

<li>
    <label for="name"><span title="Error">Missing or invalid season name. Please enter a </span>Season name</label>
    <input id="name" name="name" type="text"/>
</li>

然后，这给出了错误和字段本身之间的语义联系。

此外，即使在遇到错误之前，在标签中包含一些文本以指定该字段必须以开头也很有用。虽然星号是一个很好的视觉线索，但在使用屏幕阅读器时可能不会那么强烈。

在这些类型的场景中，您可以创建一个将文本内容隐藏在屏幕外的类（不是 display:none，因为这也会被屏幕阅读器忽略），以便为用户提供更多上下文信息，例如：

<label for="name">Season name *<span class="contextInfo">(this is a required field)</span>:</label>

最主要的是使用实际的屏幕阅读器进行测试。虽然您不会获得与盲人用户相同的体验（因为您不会习惯用它浏览，这可能看起来很奇怪），但您会被提醒什么是读出的和没有读出的。

NVDA是一款开源屏幕阅读器，而JAWS是最受欢迎的一款，提供试用版。你不能用真实的东西打败测试。

于 2012-06-24T17:55:12.647 回答