Question

以下是帖子提交网址的内容：

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>
...

Answer 1

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

将您的链接更改为<a href="#name" tabindex="-1">....</a>，以使其生效。我认为Chrome仍存在内嵌链接问题，但这是我们无法控制的。

Answer 2

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

将用户的浏览器聚焦到有错误的输入
提醒您的用户存在错误＆amp;导致它的原因（例如无效的电子邮件）

所以可能，不是将用户带回 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>

然后在错误和字段本身之间提供语义链接。

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

在这些类型的场景中，您可以创建一个隐藏文本内容的类（不显示：无，因为屏幕阅读器也会忽略它），以便为用户提供更多的上下文信息，例如： / p>

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

主要的是用实际的屏幕阅读器测试东西。虽然你不会像盲人一样拥有相同的体验（因为你不习惯用它浏览，但这看起来很奇怪），你会被告知什么是和不读出来的。

NVDA是一个开源屏幕阅读器＆amp; JAWS是最受欢迎的广告之一。你无法用真实的东西击败测试。

报告表单提交错误和可访问性

2 个答案: