【问题标题】:Is it important to have relative units to ensure Section 508 / WCAG 2.0 Level AA compatibility?拥有相关单位以确保第 508 节/WCAG 2.0 AA 级兼容性是否重要?
【发布时间】:2023-12-07 14:32:02
【问题描述】:

我以像素为单位定义了所有字体大小,例如

body {
  font-size: 14px;
}
h1 {
  font-size: 42px;
}

在线第 508 节/WCAG 2.0 AA 级兼容性检查器之一建议我将其替换为相对单位,以便通过浏览器增加字体大小的人可以访问它。这是一个真正的要求吗?我怀疑是因为其他在线检查器都没有这样建议我(尽管我确实理解并非总是可以自动测试它)。

【问题讨论】:

    标签: html css accessibility section508 wcag2.0


    【解决方案1】:

    据我所知,508 并未明确要求字体大小可调整,但专家明确建议允许字体大小调整。尼尔森says

    让用户控制字体大小:微小的文本会通过显着降低任务吞吐量来让用户感到厌烦。 IE4 有一个很棒的用户界面,可以让用户轻松更改字体大小;让我们在下一代浏览器中恢复这种设计。

    在这一行,Section 508 § 1194.21(g) 声明:

    应用程序不得覆盖用户选择的对比度和颜色选择以及其他单独的显示属性

    其中包括字体大小并与WCAG text resize success criterion 兼容:

    作者的责任是创建不妨碍用户代理有效扩展内容的 Web 内容

    只要您不禁止调整文本大小(例如使用文本图像或使用text-resize-adjust CSS),就可以了。但是,归根结底,relative font size 的使用提供了更好的文本大小调整体验,其中不仅包括字体大小,还包括换行等属性。

    出于这些原因,我认为相对字体大小对美学很重要,但对可访问性并不重要。

    【讨论】:

    • 这主要是旧版 (
    • @steveax 我不确定你在争论什么。也许我不清楚?有人可以建立一个阻止文本大小调整的站点(参见我的编辑示例),这违反了第 508 节。另一方面,有人可以建立一个站点,最大限度地利用浏览器字体大小调整功能(如我链接的视口大小的排版)其中包括 508 和 WCAG。
    • 感谢您的回答。但基本上,既然你可以用 Ctrl + / Ctrl - 调整你的字体大小(如上所述蒂芙尼),不管它的字体大小是用相对单位还是固定单位定义的,我似乎可以同时使用这两种单位,对吧?
    • @Deka87 是的,您可以同时使用两者。但是,您将使用视口相对字体大小获得更好的印刷美感。具体查看带有演示和讨论的 css-tricks 链接:css-tricks.com/viewport-sized-typography 出于这些原因,我会考虑相对字体大小对美学很重要,但对可访问性并不重要。
    • bishop,并不是真的在争论,只是注意到在过去,使用 px 作为字体大小会阻止 IE 用户调整文本大小。在现代浏览器中不是问题。
    【解决方案2】:

    W3C 将“调整文本大小”列为要求之一,但它指出用户必须能够在不使用辅助技术(如屏幕放大镜程序)的情况下增加页面上的文本大小。要对此进行测试,您可以在受影响的页面上按 CTRL-+ 或 command-+,如果文本大小增加,则您的内容符合要求。要了解更多信息,请查看:Understanding SC 1.4.4, resize text

    【讨论】:

    • 谢谢!这也很有帮助。
    【解决方案3】:

    “px”单位被定义为“css 像素”。它们已经是“相对单位”

    https://www.w3.org/Style/Examples/007/units.en.html

    px 单位是 CSS 的神奇单位。它与当前字体无关,通常也与物理厘米或英寸无关。

    因此,您使用的工具不准确或已过时,因为它不再是现代浏览器的问题。

    您也可以采用上述链接文档中指出的方法:

    但是对于字体大小,使用 em 会更好。想法是(1)不设置 BODY 元素的字体大小(在 HTML 中),而是使用设备的默认大小,因为这是读者可以舒适阅读的大小; (2) 表示em中其他元素的字体大小

    【讨论】:

    • 谢谢,亚当。该工具确实注意到“px”单位可以被视为相对单位,认为无论如何都不建议使用它们。不过,您的其余答案也很有意义。