作者：AhmadShaded译者：前端小智来源：css-tricks点赞再看，养成习惯GitHubhttps://github.com/qq44924588...已经收录在网站上，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。您是否曾尝试点击或点按某个元素（例如：按钮、链接）并注意到只有在您点击该元素的特定区域时它才会响应？这一定会发生，因为可点击区域并未应用于整个元素。为了更清楚，请参考下图。左图的可点击差异（红圈部分）明显比右图小很多，所以右图的用户体验会更好。本文将介绍一些示例，以及如何通过示例增加可点击差异，提高用户体验。WCAGguidelinesWCAG全称WebContentAccessibilityGuidelinesWeb内容无障碍指南，简单的说，就是为了方便残障人士（包括弱视患者、盲人、聋人、学习障碍、行动不便、认知障碍……）访问Web相关为内容制定标准可以使网站更加人性化。例如，在WCAG指南2.3.2中规定：网页中不包含任何闪烁超过3次/秒的内容。用户应该能够使用台式机/笔记本电脑上的键盘和手机或平板电脑上的触摸屏进行输入。不要将移动屏幕上的按钮做得太小，以至于您可以按正确的按钮。触摸目标的最小尺寸优选至少为44×44像素。菲茨定律菲茨定律是人体工程学中人机交互和人类活动的模型；它预测快速移动到目标区域所需的时间是到目标区域的距离和目标区域大小的函数。在下图中，我模拟了两个按钮的不同情况。左边的按钮更小，距离更远，用户需要更多时间与之交互。在右侧，按钮尺寸更大，更靠近其同级输入元素，这将使交互更容易、更快速。接下来，让我们看一些更真实的例子。注意：记住WCAG指南和Fitts定律的概念。按钮在需要时使用实际的
