代码之家 › 专栏 › 技术社区 › Betulino

一行中的多个表单字段是否具有良好的可访问性?

accessibility datepicker forms

Betulino · 技术社区 · 1 年前

我知道应该避免多列表单,以及为什么它不利于可用性和可访问性。我的问题是把2-3个相连的形式元素放在一起。例如,“名字”和“姓氏”的文本字段、复选框“是”和“否”以及“开始日期”和“结束日期”的日期选择器。

Form with some form fields next to each other

Form with all fields stacked vertically

我读到过水平堆叠不利于访问(屏幕阅读器、屏幕放大镜和键盘用户),因此应该避免,但城市、州和邮政编码的例外情况经常被提及。如果将元素相邻放置会给一些用户带来障碍,那么规则是始终避免,对吧?为什么允许例外?问题可能是忽视了这些情况下所需的无障碍措施吗?

在我目前的项目中,我编码了一个网页,两个日期选择器紧挨着,键盘导航出现了一些问题。我正在决定是尝试修复它,还是改为完全垂直的布局。

在可访问性方面,一行中的几个表单字段是否是“否”,或者如果有动机,这实际上是一种好的做法?如果是,需要进行哪些调整以确保表格可访问?

0 回复 | 直到 1 年前

slugolicious 1 年前

这取决于您所指的可访问性的“部分” WCAG 还有易用性。

在上查看我的答案 this UX StackExchange question 简单解释一下两者之间的区别,因为if会影响你的问题的回答方式。

WCAG中没有任何内容表明信息应该垂直堆叠或水平布局不好。那里是一个准则, 1.4.10 Reflow ,也就是说,当内容缩放到400%时,用户不应该同时在水平和垂直方向上滚动,但这并不意味着水平布局不好。

您提到屏幕阅读器在水平布局方面遇到了困难。对于一个完全失明的人来说,布局根本不重要。他们将使用屏幕阅读器导航到页面上的所有元素,无论它们是如何布局的。在您的第一个屏幕截图示例中,开始日期和结束日期水平相邻,NVDA用户可以按 F 转到下一个表单元素,或者 E 转到下一个<输入>字段,而不管布局如何。

从屏幕放大率的角度来看,水平布局也并不重要。用户可以向左/向右或向上/向下平移放大镜。

同样适用于键盘用户。他们可以 选项卡 到下一个表单元素,如果该元素不在屏幕上(无论是垂直还是水平),浏览器会将其滚动回视图中。如果字段相邻,那么水平制表就没什么大不了的了。

所以这实际上归结为可用性问题。水平布局是否对可用性不利?我不能回答这个问题,因为我关注的是可访问性一致性。但这里有两篇文章提到了一家备受尊敬的可用性公司的水平布局:

https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ (主要讨论何时使用复选框与单选按钮,但它们涉及水平布局)
https://www.nngroup.com/articles/horizontal-scrolling/ (不一定是关于水平布局,但它确实谈到了由布局引起的水平滚动)

“我读到水平堆叠不利于访问(屏幕阅读器、屏幕放大镜和键盘用户),因此应该避免。”

你有这方面的参考资料吗?

*在可访问性方面,一行中的多个表单字段是否为“否”*

不,这不是“不”。

需要进行哪些调整以确保表单可访问。

没有特定于水平布局的内容,但使表单可访问通常需要

正确标记元素(通常使用<label>元素或<字段集>/<图例>)
- WCAG 4.1.2
处理错误条件
- WCAG 3.3.1
- WCAG 4.1.3
提供指示
- WCAG 3.3.2

还有许多其他适用于表单的WCAG检查点,但这些都是大型检查点。