简体繁体 English

我是否需要使用EM大小调整布局以符合WCAG 2.0标准？

[英]Do I need to use EM sizing for the layout to meet the WCAG 2.0 criteria?

原文 2011-12-15 09:32:16 8 3 css/ accessibility/ wcag

According to the WCAG 2.0, EM units should be used as font-size, to meet the WCAG 2.0 minimum criteria: 根据WCAG 2.0，EM单位应使用字体大小，以满足WCAG 2.0最低标准：

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

But I could not find anything about about using EM's for the layout. 但我找不到关于使用EM进行布局的任何事情。 Can someone tell me if its sufficient to use EM's only for the font-sizes? 有人可以告诉我它是否足以使用EM仅用于字体大小？

3 个解决方案

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

Short answer: not necessarily, other ways to comply with WCAG 2.0 success criteria 1.4.4 are possible. 简短回答：不一定，其他符合WCAG 2.0成功标准1.4.4的方法也是可能的。

Long answer: 答案很长：

The document you link (How to Meet WCAG 2.0) reads itself, about the techniques : 您链接的文档（如何符合WCAG 2.0）会自行了解有关这些技术的信息：

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. 专门针对您评论的技术，成功标准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. 其中一种技术是C28：使用em单位指定文本容器的大小这是有效的，因为容器大小是“100个字符宽”，如果字符大小加倍，容器大小也加倍（因为它是始终相对于字体大小 ）但是，这会带来容器大小经常超出视口的不良影响，引入“丑陋”的水平滚动条。

So, are there other ways to comply with it? 那么，还有其他方法来遵守它吗？ Yes, there are. 是的，有。 You can use eg G146: Using liquid layout , which implies judiciously combining percentages and ems (both being relative units), and accounting for a logical order of the contents. 您可以使用例如G146：使用液体布局 ，这意味着明智地组合百分比和ems（两者都是相对单位），并考虑内容的逻辑顺序。

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." “文本可以在没有辅助技术的情况下调整大小，最高可达200％而不会丢失内容或功能。” (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. 您可以使用浏览器菜单（请注意，字体大小与页面缩放不同）或使用用户样式表轻松增加字体大小。