web - WCAG 3.2.2 On 网站上的输入和切换开关

Question

我已经阅读了 WCAG 和其他处理解释的资料，如果我必须遵守 3.2.2 或不遵守，我仍然有点困惑。也许你有一些额外的想法：

1. 页面上的切换开关将用于基本上重置具有选定行的表
2. 切换默认为“开启”并显示“最佳组合”
3. 如果用户选择不同的行，则切换开关变为“关闭”状态，并通知用户“进行了更改”

更新：行数在 1 到最大值之间。30，大部分用户都会有5个左右。行包括财务信息，因此您可以根据您选择的行（或为您预先选择的行）获得最终金额。我们没有指定将保存状态，但这是一个好主意 - 切换可以将用户选择与默认选择交换。我对设计师的建议是使用（重置）按钮，但他们会有切换按钮......这只是第一步 - 您必须在提交之前确认选择。

Toggle 的状态也是动态改变的——如果用户不改变对行的选择，它保持默认状态，如果用户做出改变，它就会被切换......

所以我的困境是——这是否改变了背景？

如果再次切换切换开关，则选择默认行并再次通知用户。

我个人认为这很危险，我建议使用确认对话框或提交按钮，以便用户在更改发生之前确认更改。

但是在阅读理解 SC 3.2.2 （https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html）时，我可能弄错了，如果切换开关更改行选择，那完全没问题立即通知用户（在视觉上我们更改了切换按钮之外的文本，屏幕阅读器用户将通过视觉隐藏的状态消息（角色=“状态”）得到通知）。

你怎么看 - 如果切换“重置”非默认行选择是否可以，或者我们应该有一个“确认”（确认对话框/提交按钮）？

概念图：

显示切换按钮更改数据集的动画 gif

标签： webwcag

Answer 1

我不会直接讨论 SC 3.2.2，因为它与更改下拉列表和页面更改等有关。如果您单击切换/复选框，那么您期望某些内容会发生变化，所以应该没问题（如果没有实际的代码示例，总是很难做到 100%，但 95% 肯定）。

但是，我们正在“接近”其他指南，例如SC 3.3.6 - Error prevent All。然而，你再次传递了这个，因为这是在提交之前，但它确实暗示了一个需要解决的问题。

如果用户在提交前不小心按下了开关怎么办？您在问题中提到了这一点，因为您已经想到了！

显然，如果有一个确认屏幕，并且如果他们不小心重置了他们的数据，并且有一种方法可以撤销他们的提交，那么根据 WCAG，这不是问题，但是对于每个人来说，这都是多么糟糕的用户体验。

因此，简短的回答是解决方案可能（几乎可以肯定）“通过”WCAG，但让我们尝试将其从“最低要求”转变为辅助技术和其他用户的“出色体验”！

1.切换前保存“状态”

正如评论中所建议的，现在在您的问题中，在切换之前保存状态将是最好的选择。

这样，如果我从列表中选择了 10 个选项，然后切换到“数据集 1”（默认），我仍然可以通过简单地切换回“数据集 2”（我的选择）来恢复我的选项。

通过能够扭转它，很容易避免错误，并且实现起来应该非常简单。

个人认为这是最好的方法。

有几点需要考虑：-

• 确保切换复选框对每个人都有意义。我可能会建议2 个单选按钮更合适，一个名为“默认选项”，一个名为“您的选择”或“用户选择的选项”等。这比一个复选框更有意义，后者很难以这样的方式命名很明显，您可以在两种状态之间切换。
• 确保您有一个aria-live区域或类似机制让屏幕阅读器用户知道他们选择的选项已更改。我可能会在此通知中添加“您可以通过选择'您的选择'来切换回您的选择”或类似的内容，以便人们知道这是一个可逆的过程。

2. 将其设为“恢复默认值” <button>。

在这里有一个复选框是没有意义的，人们知道他们是否更改了一个选项，因此他们知道是否显示默认值。

同样，我喜欢将复选框视为“是/否”的答案。我想不出我们能以“是/否”的方式提出什么问题/陈述是有意义的。

因此<button>，假设操作不可逆，那么“恢复默认值”会更有意义。

这意味着您绝对应该弹出一个确认模式，以避免意外擦除用户选择。（如你所说）

例如：“恢复默认值”->“您确定，您的选择将丢失。” ->“是恢复默认值”或“不保留我的选择”。