不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度

2023年 11月 15日 55.4k 0

为什么

尽管一些网页设计工具为按钮等元素指定了 CSS 高度值,但设置高度或最大高度实际上可能会违反  WCAG 2.2 Success Criterion 1.4.4 Resize Text.

标准要求:

除了字幕和文本图片外,文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。

如果对影响元素计算高度和宽度的 CSS 属性使用固定值,当文字大小增大时,元素内部的文字会被截断。

还不信服?

你可能会想:"但当我把浏览器放大到 200% 时,按钮文本看起来很好!"这可能是这个标准的一个常见误解。我以前不知道浏览器缩放只是问题的一部分!

深入了解 SC 1.4.4: Resize Text ,它指出我们(“作者”)必须处理用户只增加文本大小的情况,因为他们的浏览器(或其他“用户代理”)可能没有缩放功能。

文档说:

如果用户代理不提供缩放功能,但允许用户更改文字大小,那么作者有责任确保在调整文字大小时内容仍然可用。

这个标准也是为什么 CSS font-size 属性使用 rem单位,而 line-height 属性不使用单位的一个原因。在没有浏览器缩放等机制的情况下,文字大小必须可以调整到 200%。

但怎么办?处理起来比你想象的更容易!

代码演示

注意:为了这些演示的目的,请假装我们使用 rem 单位设置 font-size。我在这里使用 px 单位,以免继承我的网站的基本字体样式。

演示 1

首先,我们看看在 font-size 、 height 、 line-height 和 width 使用固定值的情况下,当文字大小增大时会发生什么。在文字大小增大之前,按钮看起来很棒!但文字大小增大后就不那么好看了。


  delete all

演示 2

现在,我们使用相同的代码,并尝试在 line-height 和 padding 中不使用单位,以影响按钮的 height 和 width 。当文字大小加倍时,我们应该不会看到文字被截断。


  delete all

1111111111111

另一种方法

理解文档中提到的一种技术是 C28:使用 em 单位指定文本容器的大小。根据我的经验,随着视口尺寸的缩小,我发现这种方法更难维护。

想象一下,一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。如果文本被设备大小截断,这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险:

  • SC 1.4.4 调整文本大小
  • SC 1.4.10 重排

在使用技术 C28 时,防止出现这种情况的一种方法是利用 CSS 属性,如 max-width ,但我个人更倾向于使用尽可能少的 CSS 属性(以降低长期维护成本)。与使用 width 和 max-width 相比,我们可能只需使用 padding ,然后让浏览器执行其默认的魔法,使元素适合视口。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论