dar*_*her 3 forms html5 accessibility
有很多关于表格和架构的"正确","语义"和"可访问"使用的文章,我正在重新思考我如何处理表单.什么是"正确"的字面上有很多变化,我不再100%真正准确的了.
在MDN文章(这里)中,它提到:
在这个例子中,屏幕阅读器将为第一个小部件发出"果汁大小小",第二个小部件发出"Fruit juice size medium",第三个小部件发出"Fruit juice size large".
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small" />
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium" />
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large" />
<label for="size_3">Large</label>
</p>
</fieldset>
</form>
现在,我可以看到上述示例的好处,但是,我说我做了一个多步购物车,我不希望辅助技术说"Checkout:cc-number","Checkout:cc-在每个标签之前"使用"结帐日期.特别是在标记步骤的情况下.这将是重复的,有时我会假设混乱...但我总是将一个表格的部分分组<fieldset>.现在,我使用的是反思fieldset和legend根本的,但现在它违背语义？什么是权衡？有余额吗？
另外,我将使用相同的MDN文章,所以我不是通过网络发送给你的,
请注意,即使不考虑辅助技术,为给定小部件设置正式标签集也允许用户单击标签以激活所有浏览器中的相应小部件.这对于单选按钮和复选框特别有用.
某些辅助技术可能无法处理单个窗口小部件的多个标签.因此,您应该将窗口小部件嵌套在其对应的元素中以构建可访问的窗体.
<form>
<p>
<input type="checkbox" id="taste_1" name="taste_cherry" value="1">
<label for="taste_1">I like cherry</label>
</p>
<p>
<label for="taste_2">
<input type="checkbox" id="taste_2" name="taste_banana" value="1">
I like banana
</label>
</p>
</form>
现在,在这种情况下,这两个项目的标签相当普遍,我使用了这两种方法,但这里的可访问性和语义之间是否存在平衡？我倾向于把标签没有包装输入以保持代码的一致性,我知道他们在这个主题上有很强的争论(主要是能够放弃for并且不需要id和/或在标记的不同区域中有标签).所以,我不是试图重新讨论这里的争论,我倾向于使用,for而id不管我是否将元素包装在一起label.但是,如果存在可访问性问题,那么为什么后者不是金标准呢？
还有一点,WAI-Aria规则现在有所贡献,那么这些规则对表单的可访问性和语义有多大影响呢？
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<form>
<fieldset>
<legend>Fruit juice size*</legend>
<p>
<label for="size_1">
<input type="radio" name="size" id="size_1" value="small" aria-labelledby="size_1_label" />
<span id="size_1_label" required aria-required="true">Small</span>
</label>
</p>
<p>
<label for="size_2">
<input type="radio" name="size" id="size_2" value="medium" aria-labelledby="size_2_label" />
<span id="size_2_label">Medium</span>
</label>
</p>
<p>
<label for="size_3">
<input type="radio" name="size" id="size_3" value="large" aria-labelledby="size_3_label" />
<span id="size_3_label">Large</span>
</label>
</p>
</fieldset>
</form>
在处理语义和可访问标记时,我真的很好奇是否存在标准化方法.到目前为止,人们似乎只是做了他们认为正确的事,然后在互联网上发出自己的想法.
我已经阅读了W3C的草案和建议,但即使他们使用不同的例子.有没有人有证据表明哪种方法真正改善了与表单相关的可访问性和语义？他们的任何特定网站是否有时间资源来测试这个并得出一个我能够审查的准确结论？
你的问题的答案真的是"它取决于".
您上面列出的所有可访问标记都是有效的.因此,如果您只是寻找可访问的标记,则可以使用任何示例.其余的决定真的归结为
当您的表单中出现错误时,它们需要以编程方式与它们引用的表单字段相关联.在保持标签本身的同时,有两种方法可以做到这一点:
您可以将错误文本添加到标签本身.使用包装标签可以使您在DOM中出现此错误文本的顺序具有更大的灵活性.您可以将错误放在标签之前,标签之后,输入之后或输入之前.因此,您可以选择使用包装技术而不是非包装技术:
<label>My Input
<input type="text" aria-invalid="true" id="myinput" name="myinput"/>
<span class="error">The input field must be a valid username</span>
</label>
第二种技术是使用ARIA关联错误.这非常灵活,因为它允许多个元素形成输入的标签,也可以用于其他指令.
<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror"/>
<span id="myerror" class="error">The input field must be a valid username</span>
现在,如果您的输入是复选框或单选按钮,您将需要维护 for和id关联,以便用户可以单击(或触摸)标签以激活复选框/收音机.
如上所述,使用ARIA标记技术,您可以将多个元素与单个输入字段相关联.这对于提供其他说明和提示非常有用.aria-labelledby用于可访问的名称(标签),aria-describedby但可以用于提示,也可以使用多个ID引用多个元素.
<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror" aria-describedby="unameinstructions"/>
<span id="myerror" class="error">The input field must be a valid username</span>
<span id="unameinstructions">A valid user name must contain at least one alpha, one numeric character and must be at least 8 characters</span>
这是我在可访问的动态表单上创建的一个演示文稿http://www.slideshare.net/dylanbarrell/accessible-dynamic-forms-27169766它引用了一些示例代码,可以在这里找到https://github.com/dylanb/a11yvalid并且可以在此处找到良好最佳实践的运行示例(除了CSS样式选择之外)http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html