关注 WCAG 2.5.5，打造更佳目标尺寸

您是否曾经在使用移动设备时遇到过点击按钮却没有任何反应的挫折感，因为目标尺寸太小，无法识别您的点击？也许您的手指比较粗，就像我一样，或者是因为灵活性有限。这是因为我们这些用户必须与之交互的元素目标区域正在不断缩小，这令人沮丧。

让我们来谈谈 **目标尺寸**，以及如何将其做得足够大，以便用户可以轻松地与元素进行交互。对于在屏幕空间非常有限的小型手持触摸屏设备上访问内容的用户来说，这尤其重要。

成功标准再探

我在之前的一篇文章中讨论了（没有双关语）成功标准，涵盖了 WCAG 2.1 标准中的“名称中的标签”。简而言之，WCAG 标准是我们用来确定我们的工作是否“无障碍”的基准。

如果您想知道是否有一个关于目标尺寸的标准，答案是肯定的。它就是 WCAG 2.5.5。直接引用指南。要获得 AAA 级别的 WCAG 2.5.5 合格标准，需要“指针输入的目标尺寸至少为 44×44 CSS 像素，除非：

• 等效：目标可以通过同一页面上至少为 44×44 CSS 像素的等效链接或控件访问；
• 内联：目标位于句子或文本块中；
• 用户代理控制：目标的尺寸由用户代理确定，作者无法修改；
• 必要：目标的特定呈现方式对于传达的信息至关重要。”

可能出错什么？

这只是一个尺寸，对吧？很简单。不可能出错。

真的吗？

小型目标尺寸可能会给许多人造成无障碍障碍。您是否曾经在颠簸的路上行驶时，尝试使用手机上的应用程序，却无法点击某个元素？这就是无障碍障碍。对于有运动技能或认知障碍的人来说，如果目标尺寸太小且不符合 WCAG 要求，他们会更难使用，因为这会对他们造成更大的困难。

我并不想批评 Twitter，但这是我在寻找小型目标示例时遇到的第一个值得注意的例子。

想象一下，患有神经肌肉疾病的人（例如多发性硬化症、脑瘫、关节炎、震颤或阿尔茨海默病）或其他运动障碍的人需要克服多少障碍才能在任何这些情况下激活目标。

我经常看到另一个很喜欢的示例？广告。您是否曾经难以点击关闭广告的微小“X”按钮？

我个人没有运动技能或认知障碍，我发现自己经常会摸索几下，才能够点击到一些目标区域。对于那些需要使用笔或触控笔来点击目标尺寸至少为 44×44 像素的人来说，这可能是一项艰巨的任务。当目标尺寸不符合推荐的指南时，这些目标不应该需要多次尝试才能激活。

目标尺寸注意事项

WCAG 2.5.5 提供了详细的说明，以帮助我们通过定义我们刚刚看到的四种类型的控件来解决这些问题：等效、内联、用户代理和必要。

我们将研究确定目标尺寸的不同注意事项，并将它们与 WCAG 指南进行对比，帮助我们做出良好的、无障碍的设计决策。

考虑“点击”和“轻触”之间的区别

该成功标准确保目标尺寸足够大，以便用户可以轻松地激活目标，即使用户在手持设备上访问这些目标也是如此。当涉及到激活目标时，我们通常将小屏幕与“轻触”而不是“点击”联系起来。这是我们在确定目标尺寸时需要考虑的事情。

鼠标和类似的输入设备在屏幕上使用指针，这被认为是“精细”的精度，因为它允许用户以精确的方式访问屏幕上的元素。理论上，精细的精度使得更容易访问更小的目标尺寸。问题是，这种类型的输入设备对于某些用户来说可能很困难，无论是握住设备，还是其他认知或运动技能方面的困难。因此，即使有精细的精度，有一个清晰的目标仍然是一个好处。

另一方面，触摸可能存在问题，因为它是一种精度非常“粗糙”的输入机制。例如，用户在使用鼠标或触控笔时可能缺乏精细的控制水平。手指比鼠标指针大，通常会阻挡用户对正在激活或触摸的屏幕上确切位置的视野。因此，精度“粗糙”。

这个问题在响应式设计中更加严重，响应式设计需要适应各种精细和粗糙的输入。对于可以由带有鼠标的台式机或笔记本电脑以及带有触摸屏的移动设备或平板电脑访问的网站，必须同时支持这两种输入类型。

这使得我们实际使用的目标尺寸变得非常重要。根据使用控件的用户是谁、该控件的功能是什么、使用频率和位置，我们应该考虑使用更大、更清晰的目标，以防止意外操作。

但是，尽管如此，我们确实有一个 CSS 媒体查询可以检测指针设备，这样我们就可以针对精细或粗糙输入交互设置特定的样式，并且 它得到了很好的支持。以下是一个直接从规范中提取的示例

/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width: 30px;
    min-height: 40px;
    background: transparent;
  }
}

但是等等。虽然这很好，但 Patrick H. Lauke 对这个交互媒体查询提出了一个警告，并指出 它可能导致错误的假设。

考虑不同平台有不同的要求

当 WCAG 指定确切的值时，值得注意。请注意，建议我们将目标尺寸设置为至少 44×44 像素，这在 WCAG 2.5.5 说明 中至少提到了 18 次。

但是，您可能还看到了来自 Apple 的“人机界面指南” (iOS) 和 Google 的“Material Design”（在他们的平台设计要求中）等其他指南中类似的要求。

考虑目标的“可点击区域”

请注意，Apple 的平台要求在描述理想目标尺寸时提到了“可点击区域”。这意味着我们讨论的是空间，以及目标的外观。例如，Google 的 Material Design 建议交互式元素的目标尺寸至少为 48×48 dp（与密度无关的像素）。但是，如果您的设计要求需要 24×24 dp 的图标怎么办？完全可以利用填充来帮助我们围绕图标创建更多交互式空间，构成 48×48 dp 的目标尺寸。或者，正如 Material Design 中所 记录的那样

触摸目标是屏幕上响应用户输入的部分。它们会延伸到元素的可视边界之外。例如，一个图标可能看起来是 24×24 dp，但它周围的填充构成了完整的 48×48 dp 触摸目标。

考虑响应式布局行为

没错，我们必须考虑在旨在响应不同视窗大小的设计中，事物是如何移动和排列的。一个例子可能是按钮在小屏幕上堆叠，但在更大屏幕上并排显示。我们希望确保过渡考虑周围元素的放置，以防止元素或目标重叠。

说到并排显示，WCAG 中有一个关于并排目标的例外情况值得重点说明

并排：显示的内容通常可以根据可用的屏幕宽度重新排列（响应式设计）。在重新排列的内容中，目标可以出现在行上的任何位置，并且可以根据可用屏幕的宽度改变位置。由于目标可以出现在行上的任何位置，因此其大小不能超过可用的文本和句子或段落之间的间距，否则目标可能会重叠。出于这个原因，包含在一个或多个句子中的目标被排除在目标大小要求之外。

(强调我的)

现在，我们不是一定要谈论并排的按钮。我们可以在文本中添加链接，而文本可能会打破目标的放置，可能分成两行。

考虑目标与其周围环境的关系

我们刚刚了解了文本块中的并排链接如何免受 44×44 规则的限制。根据目标与其周围元素的关系，还有一些类似的例外情况。

让我们再举一个 WCAG 解释器在描述并排目标例外情况时提供的例子

如果目标是整个句子，并且句子不在文本块中，那么目标的尺寸至少需要是 44×44 CSS 像素。

这是一个好例子。我们应该考虑目标是它自己的块还是更大文本块的一部分。如果目标是它自己的块，那么它需要遵守规则，无论是带有简短标签的按钮，还是链接起来的完整句子。另一方面，链接起来的完整句子在另一个文本块中，则不必满足目标大小要求。

你可能会认为句子或段落末尾的链接图标需要遵守规则，但 WCAG 明确表示这些目标被豁免

脚注或句子内或末尾的图标被认为是句子的一部分，因此被排除在最小目标大小之外。

这很有道理。想象一下，内容的行高为 32 像素，末尾有一个填充到 44×44 像素的图标，以及不小心激活图标的可能性。

考虑目标是否由用户代理设置样式

如果目标完全没有样式——就你没有添加任何 CSS 的意义而言——而是采用了浏览器提供的默认样式，那么就没有必要强调 44×44 规则。这很有道理。用户代理就像系统级的 UI，因此用我们自己的样式对其进行表面上的更改将覆盖整个系统，这会导致该 UI 中出现不一致。

所以，是的，如果你正在使用默认的 <button> 等等，并且没有其他样式或大小应用于它，那么它就可以正常运行。但是我们很多人使用重置来跨浏览器规范化 UI 元素，所以请注意你的代码库中的这种情况，因为这会影响目标的用户代理样式。

考虑是否还有其他方法可以激活该功能

我们都使用过页面内锚链接，对吧？heck，CSS-Tricks 通常在文章开头有一个目录，它只是一个锚链接列表。

WCAG 实际上使用锚链接作为一种例子，说明它在满足目标大小要求方面是豁免的。为什么？因为手动向下滚动到页面上的特定位置与点击链接跳转到那里一样容易。有两种方法可以完成相同的事情，其中一种方法内置在浏览器中。

但我们仍然应该在使用目录时小心。我不完全确定，但鉴于目录是链接列表，每个链接可能构成了它自己的文本块，而不是更大文本块（如段落）的一部分。因此，在这种情况下，列表项之间可能需要稍微多一点的间距。这样可以减少意外裁剪或同时点击两个或多个目标的可能性。

总结

WCAG 2.5.5 标准为应用清晰、无障碍且易于激活的目标大小提供了指导。正如我们所见，在许多情况下，目标的大小在完成操作方面至关重要。

目标大小指南的有趣之处在于哪些内容被豁免。虽然我们没有单独涵盖每个特定的豁免，但我们确实研究了许多需要仔细考虑目标大小的情况，从使用的输入设备类型到目标与其周围元素的关系，以及许多其他因素。

可访问的目标大小的关键在于，不是一定要使用更少的样式来设置目标（尽管我们确实看到了默认的用户代理样式被豁免），而是要根据上下文进行样式设置。我们可能还可以在此处涵盖数十种情况并检查样式是如何发挥作用的——所以如果你有任何情况，请分享！

在样式方面，CSS 规范具有特定的功能，例如 pointer 的交互式媒体查询，可以使目标大小对于用户来说更加出色。如果使用得当，它将成为检测访问者是否使用精细或粗略输入设备的绝佳方法。这样，我们可以调整内容，使他们的体验比我们以相同的方式对待这些差异时更好。

所以，是的，目标大小很容易被忽视。但希望你现在和我一样，真正地欣赏到正确大小的目标，因为你现在有了信息来制作你自己正确大小的目标。