为什么
尽管一些网页设计工具为按钮等元素指定了 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 ,然后让浏览器执行其默认的魔法,使元素适合视口。