- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
关于表单和架构的“正确”、“语义”和“可访问”使用的文章如此之多,我正在重新思考我如何处理表单。什么是“正确的”实际上有太多的变化,以至于我不再 100% 确定什么是真正准确的。
在 MDN 文章 ( here ) 中,它提到:
With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.
<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-date”,在每个标签前使用“checkout”。特别是在标记步骤的情况下。这将是重复的,有时会令人困惑我会假设......但我总是将表单的各个部分分组在 <fieldset>
中。 .现在我正在重新考虑使用 fieldset
和 legend
完全没有,但它现在是否违背语义?权衡取舍是什么?有余额吗?
此外,我将使用相同的 MDN 文章,所以我不会在整个网络上发送给您,
Note that even without considering assistive technologies, having a formal label set for a given widget lets users to click on the label to activate the corresponding widget in all browsers. This is especially useful for radio buttons and checkboxes.
Some assistive technologies can have trouble handling multiple labels for a single widget. Because of this, you should nest a widget inside its corresponding element to build an accessible form.
<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>
现在,在这种情况下,这两个项目的标签相当常见,我使用了这两种方法,但是这里可访问性和语义之间是否存在平衡?我倾向于将标签 not 包装输入以确保代码的一致性,我知道他们在这个问题上有激烈的争论(主要是放弃 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
关联,以便用户可以单击(或触摸)标签以激活复选框/ radio 。
如上所述,使用 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
关于html - 是否有表单可访问性和语义的标准化方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30669776/
某人在 Silverlight posted MVVM 目前缺乏标准化,所以每个人都有自己的风格.. 这就是为什么我和 WPF Disciples 的一些人正在积极讨论每个人都同意的 MVVM 元素。
我有以下数据集: dat tests2 * 20 Score 1 13.333333 2 10.666667 3 2.666667 4 9.333333 5 13.3333
我有一个 double 组,表示某些事件发生的概率,[25,25,25,10,15] 表示事件 A,B..E。这些数字加起来是 100。 通过我的分析,我希望能够排除某个事件发生或不发生的可能性。 所
USPS webtools 很贵,而且 Google Maps 没有某些地址。有没有免费或开源的解决方案? 最佳答案 根据您的业务性质,或者如果您是非营利或教育机构,有一家在线提供商可为您提供 fre
我有一个 json 对象,里面有对象例如 user: {"name": "tim"} 并希望有一种方法将其转换为 "user.name": 'tim' 我已经尝试过:Javascript Recurs
我有一个名为 spam 的数据集,其中包含与垃圾邮件相关的 58 列和大约 3500 行数据。 我计划将来对此数据集运行一些线性回归,但我想事先进行一些预处理并将列标准化为均值和单位方差为零。 我被告
我试图找到一种方法来强调音频中高点和低点之间的差异。我似乎找不到有关如何执行此操作的文档-也许可以使用ffmpeg完成。非常感谢来自对信号处理了解更多的人的一些指导。 最佳答案 从根本上讲,膨胀器与压
如何缩放/规范化每行数据(观察)?像 [-1:1] 这样的 z 分数? 我看过之前的帖子,其中涉及整个数据集的标准化,如下所示 https://stats.stackexchange.com/ques
例如: http://www.google.co.uk www.google.co.uk google.co.uk 将全部转换为: google.co.uk 我本来想使用 System.Uri 类,但
我可以使用此代码从 json 文件导入数据... import requests from pandas.io.json import json_normalize url = "https://da
规范化 Prolog 原子中空白字符(空格、换行符、制表符)的最佳方法是什么,例如在 SWI-Prolog 中。IE。我想要一个规则: normalize_space_in_atom(+Atom1,
如何缩放/规范化每行数据(观察)?像 [-1:1] 这样的 z 分数? 我看过之前的帖子,其中涉及整个数据集的标准化,如下所示 https://stats.stackexchange.com/ques
我正在尝试阅读代码片段,但它对我来说没有任何意义。请帮助我 /** * To make it easy to query for the exact date, we normalize all
我是一名研究人员,拥有大约 17,000 份自由文本文档,其中大约 30-40% 与我的结果相关。是否有一个开源工具可以用来确定与结果相关的最常见的单词(甚至短语,但不是必需的),并对已经出现的单词的
我正在尝试使用 L2 范数(单位长度)对 numpy 矩阵的行进行标准化。 当我这样做时,我发现了一个问题。 假设我的矩阵“b”如下: 现在,当我对第一行进行标准化时,如下所示,它工作正常。 但是当我
我有一个 3 列数组。数组的第一列的值介于 1 和 10 之间。我需要提取第一列为 1 的所有行,并规范化该数组切片的第三列。然后对第一列等于 2 等的所有行重复相同的操作。 如果我运行此代码,它会使
如果我通过许多不同的文件/脚本使用这个结构当需要更改时,如何才能只更改一个地方,而不必在每个文件中更改它。 u = contents incomingUrl = urlparse(u).query o
我有 1MB 的文本文件。我想删除空格、换行符、制表符,并以 4KB 迭代方式将 1MB 文件的字符大小写从小写转换为大写。 我写了这段代码: for (i = 0, j= 0; i 首先,让我们定
这实际上是一个机器学习分类问题,但我想有一种非常好的快速而肮脏的方法来做到这一点。我想将描述 NFL 球队的字符串(例如“San Francisco”或“49ers”或“San Francisco 4
我正在创建游戏评论数据库。我对此很陌生,但我正在尽力。关于数据库的一点点:系统很简单,用户填写 php 表单,在其中插入他的姓名、电子邮件,然后选择反馈是好还是坏并留下评论/建议。我正在添加照片的视觉
我是一名优秀的程序员,十分优秀!