不要在按钮、链接或任何其他文本容器上使用固定的 CSS 高度或宽度
创始人
2025-07-06 11:00:46
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 使用固定值的情况下,当文字大小增大时会发生什么。在文字大小增大之前,按钮看起来很棒!但文字大小增大后就不那么好看了。

演示 2

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

1111111111111

另一种方法

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

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

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

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

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...