报表表单提交错误和无障碍

这里是提交后的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> 
...

来源

2012-06-22 TekiusFanatikus

我觉得回到有错误的形式的情况下，你想更主要的是：

聚焦你的用户的浏览器，其有一个错误
提醒你的用户有输入是一个错误&是什么原因造成它（如无效的电子邮件）

所以可能的话，而不是使用户返回到default.cfm＃错误你可以关注他们在第一场与电子恐怖 - 例如把他们带回default.cfm＃名称并注入错误信息到字段标签：

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

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

另外，即使击球失误之前，它可能是有用的，包括在指定字段需要开始与标签的一些文本。虽然星号是一个良好的视觉线索，它可能不会那么强烈使用屏幕阅读器时遇到。

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

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

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

NVDA是一个开源的屏幕阅读器& JAWS，最流行的一个，有一个试用版。你不能用真实的东西来击败测试。

来源

2012-06-24 17:55:12 anotherdave

与此问题是，如果人有多个错误，你必须处理焦点或tabindeex。如果你不小心，你可能会导致更多的问题。 –

嗯，是的，你可能会说，你最好给人们他们的错误列表在表单的顶部，而不是直接聚焦于第一个错误 - 这是一个偏好，虽然;如果你看看什么是UX做了视觉的用户，大多数验证将集中你的浏览器上的第一个错误域。然而在任一方法的主要事情是，1）用户意识到错误的; 2）错误语义依赖于相关的输入 – anotherdave

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

更改链接<a href="#name" tabindex="-1">....</a>为它工作。我认为，铬与页内链接仍然是一个问题，但是这是我们无法控制的。

来源

2012-06-22 15:27:18

报表表单提交错误和无障碍

回答

相关问题