辅助功能和文本大小调整,如何?
Accessibility and Text Resizing, how?
Web 可访问性级别 AA 的规范之一,即文本可以调整为 200%,而不会丢失内容或功能。
所以如果我放大到 200%,一切都需要看起来正确。
关于字体大小,我该如何实现?
您应该尝试使用 em
而不是 px
..
例如,如果您的 body
中有 div
- 假设页面正文的 font-size
设置为 16px
。
如果您在 div 部分中想要的字体大小是 12px
,那么您应该指定 0.75em
(因为 12/16 = 0.75)。
您应该尝试使用 "rem"(支持大多数浏览器)。
然后你设置根的字体大小(html)。所有的页面都重新调整大小,例如如果你想要 "h1" 总是 2 倍的主体,将它设置为 2rem;
这个问题不是字体大小或字体大小单位的问题,因为大多数常见的浏览器都有内置的缩放功能,可以缩放任何文本,而不管字体大小单位。问题是调整大小可能会导致文本容器开始重叠,然后导致某些内容或功能变得不可见(因为它最终隐藏在其他内容之后)。 Success criterion 1.4.4 是在缩放功能还没有今天普及的时候编写的。 (在 2008 年,有几种浏览器支持缩放,但许多人仍在使用不支持缩放的旧浏览器,而文本大小调整(与缩放不完全相同)可能会导致网页内容重叠。)
因此,虽然使用 em
、%
、rem
等单位是个好主意,但您需要确保文本容器(例如 section
元素、nav
等)在放大到 200% 或将文本大小时调整到 200% 时不会重叠。例如,您可以使用 %
或 em
等单位来描述列宽,或者您可以确保以默认大小彼此相邻的文本容器在放大时最终彼此下方. 如果你使用响应式设计让你的网页适应不同的屏幕尺寸,你应该也能处理桌面浏览器中的缩放。
Web 可访问性级别 AA 的规范之一,即文本可以调整为 200%,而不会丢失内容或功能。
所以如果我放大到 200%,一切都需要看起来正确。
关于字体大小,我该如何实现?
您应该尝试使用 em
而不是 px
..
例如,如果您的 body
中有 div
- 假设页面正文的 font-size
设置为 16px
。
如果您在 div 部分中想要的字体大小是 12px
,那么您应该指定 0.75em
(因为 12/16 = 0.75)。
您应该尝试使用 "rem"(支持大多数浏览器)。 然后你设置根的字体大小(html)。所有的页面都重新调整大小,例如如果你想要 "h1" 总是 2 倍的主体,将它设置为 2rem;
这个问题不是字体大小或字体大小单位的问题,因为大多数常见的浏览器都有内置的缩放功能,可以缩放任何文本,而不管字体大小单位。问题是调整大小可能会导致文本容器开始重叠,然后导致某些内容或功能变得不可见(因为它最终隐藏在其他内容之后)。 Success criterion 1.4.4 是在缩放功能还没有今天普及的时候编写的。 (在 2008 年,有几种浏览器支持缩放,但许多人仍在使用不支持缩放的旧浏览器,而文本大小调整(与缩放不完全相同)可能会导致网页内容重叠。)
因此,虽然使用 em
、%
、rem
等单位是个好主意,但您需要确保文本容器(例如 section
元素、nav
等)在放大到 200% 或将文本大小时调整到 200% 时不会重叠。例如,您可以使用 %
或 em
等单位来描述列宽,或者您可以确保以默认大小彼此相邻的文本容器在放大时最终彼此下方. 如果你使用响应式设计让你的网页适应不同的屏幕尺寸,你应该也能处理桌面浏览器中的缩放。