我是否需要对布局使用 EM 尺寸调整才能满足 WCAG 2.0 标准?

发布于 2024-12-21 11:38:16 字数 252 浏览 6 评论 0原文

根据 WCAG 2.0,应使用 EM 单位作为字体大小,以满足 WCAG 2.0 最低标准:

http://www.w3.org/WAI/WCAG20/quickref/Overview.php

但是我找不到任何关于使用 EM 的信息 布局。有人可以告诉我仅使用 EM 来设置字体大小是否足够吗?

According to the WCAG 2.0, EM units should be used as font-size, to meet the WCAG 2.0 minimum criteria:

http://www.w3.org/WAI/WCAG20/quickref/Overview.php

But I could not find anything about about using EM's for the layout. Can someone tell me if its sufficient to use EM's only for the font-sizes?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

烟织青萝梦 2024-12-28 11:38:17

根据 http://www.w3.org/TR/2010 /NOTE-WCAG20-TECHS-20101014/C28 您还需要使用 em 进行布局(对于文本内容)以满足“足够”的标准。

According to http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/C28 you need to use em's for layout as well (for text-content) to satisfy the "sufficient" criterion.

栀梦 2024-12-28 11:38:17

我倾向于使用 EM 来调整文本大小,但使用 % 来指定容器宽度以用于布局目的,如以下示例所示: http://www.w3.org/TR/WCAG20-TECHS/G146

I tend to use EMs for text sizing, but % to specify container widths for layout purposes, as shown in the example here: http://www.w3.org/TR/WCAG20-TECHS/G146

当梦初醒 2024-12-28 11:38:17

简短回答:不一定,遵守 WCAG 2.0 成功标准 1.4.4 的其他方法也是可能的。

长答案:

您链接的文档(如何满足 WCAG 2.0)会自行读取,有关技术

请注意,所有技术都是信息性的 - 您不必遵循它们。下面列出的“足够的技术”被认为足以满足成功标准;然而,没有必要使用这些特定的技术。

也就是说,如果你想出另一种方法来满足一个标准,那就可以,只要你确实满足了那个标准。

具体到您评论的技术, 成功标准 1.4.4 的技术。 确定

通过使用以下一种或多种技术,确保文本容器在文本大小调整时调整大小,并使用相对于内容中其他测量值的测量值。

严格遵循该文本,您可以遵循其中一种或多种技术来符合该标准。其中一项技术是C28:使用 em 单位指定文本容器的大小 这之所以有效,是因为容器大小为“100 个字符宽”,如果字符大小加倍,容器大小也会增加也会加倍(因为它总是相对于字体em大小)但是,这会带来不良效果,即容器大小经常超出视口,从而引入“丑陋”的水平滚动条。

那么,还有其他方法可以遵守吗?是的,有。您可以使用例如G146:使用液体布局,这意味着明智地组合百分比和em(两者都是相对单位),并考虑内容的逻辑顺序。

我特别喜欢:

  • 结合流体和液体设计,使容器尺寸增加,直到或多或少填满视口。
  • 手动检查是否满足成功标准,即检查

“无需辅助技术即可将文本大小调整最多 200%
不损失内容或功能。”
(这就是标准的内容)。我个人添加了一些保证金,以考虑不同的平台行为。
您可以使用浏览器菜单或用户样式表轻松增加字体大小(请注意,字体大小与页面缩放不同)。

Short answer: not necessarily, other ways to comply with WCAG 2.0 success criteria 1.4.4 are possible.

Long answer:

The document you link (How to Meet WCAG 2.0) reads itself, about the techniques:

Note that all techniques are informative - you don't have to follow them. The "sufficient techniques" listed below are considered sufficient to meet the success criteria; however, it is not necessary to use these particular techniques.

That is, if you come up with another way to meet a criterion, it is ok, as long as you really meet that criterion.

Going specifically to the technique you comment, the techniques for the success criterion 1.4.4. establish that

Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques.

Strictly following that text, you can follow one or more of those techniques to comply with the criterion. One of these techniques is C28: Specifying the size of text containers using em units This works because, as the container size is, say, "100 characters wide", if the character size doubles, the container size doubles as well (as it is always relative to the font em size) However, this brings the undesirable effect that the container size often grows beyond the viewport, introducing "ugly" horizontal scrollbars.

So, are there other ways to comply with it? Yes, there are. You can use e.g. G146: Using liquid layout, which implies judiciously combining percentages and ems (both being relative units), and accounting for a logical order of the contents.

I am particularly fond of:

  • Combining fluid and liquid designs, so that container size increases until it more or less fills the viewport.
  • Manually check that the success criterion is met, that is, check that

"text can be resized without assistive technology up to 200 percent
without loss of content or functionality."
(that's what the criterion reads). I personally add some margin, to account for different platform behaviors.
You can easily increase the font size with your browser menus (beware, font size is not the same as page zoom), or with user style sheets.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文