跳到内容

理解SC 1.4.10:回流(AA级)

简而言之

目标
无需水平滚动即可放大内容
作者任务
使文本在视口宽度内回流

意图

此成功标准的目的是支持视力低下的人,他们需要放大文本并在单列中阅读。当浏览器缩放用于将内容缩放到400%,它会回流,即在一列中显示,以便滚动不需要在多个方向上。

对于视力低下的人,使用回流放大文本可以阅读。这是至关重要的。放大可以感知字符。回流启用跟踪。跟踪是沿着文本行进行,包括从一行的末尾到开头下一行的。

避免向阅读方向滚动,以显示被视区切断很重要,因为这样的滚动会显著增加阅读所需的努力。同样重要的是,内容不能隐藏在屏幕外。例如,缩放垂直滚动页面不应导致内容被藏在一边。

回流焊的工作原理

HTML/CSS、PDF和ePub等技术的用户代理具有回流方法内容以适应窗口(视口)的宽度。适当编写后,页面当用户使用时,内容可以回流(环绕)以保持在窗口边界(视口)内放大以放大内容的大小。内容的空间关系可能会改变当用户缩放时,所有信息和功能都应该继续可用。

支持内容回流也称为“响应式Web设计”。它已启用通过CSS媒体查询为不同的视窗宽度重新格式化web内容(在特定断点),以便为移动设备提供优化布局比如平板电脑或智能手机。重要的是,这些断点不仅被触发通过更窄的视口,而且当用户使用浏览器缩放功能进行缩放时进入页面。

在100%(默认)比例的桌面浏览器中,支持回流的典型网页在两列、三列或多列中显示内容。在某个点触发时随意放大布局更改,因此内容现在将显示在更少的列中。在更高的放大比例为200%或更高,内容通常在单个列。位于边缘列中的部分内容,如导航菜单或补充内容,现在通常会出现在主内容的顶部或下面。

视距和显示分辨率

320个CSS像素的值被选为作者可以选择的合理最小大小实现。此值与报告的小型显示的视口宽度一致通用移动设备。320 CSS像素的宽度正好对应于桌面浏览器窗口设置为1280px的宽度,并放大到400%。应该注意的是这400%适用于维度,而不是区域。这意味着默认值的四倍宽度和默认高度的四倍。

图中显示了在小屏幕设备靠近、大屏幕设备远离的情况下,通过视距在视网膜上生成相同图像所需的字符大小。
图1在不同分辨率的显示器上显示相同CSS像素大小的字母

当我们阅读时,印刷品的大小不如它投射在上面的图像重要我们眼睛的视网膜。手机设计用于近距离观看,而桌面设计用于为了看得更远。因此,手机上打印的16像素实际上更小在桌面上打印16像素以上。这不是一个问题,因为这两种打印尺寸都有投影如果按预定距离观看,视网膜上的图像将相同。

内容的可见性和可用性

有多少内容是可见的,可能会在不同的尺度上发生变化。例如,导航在桌面布局中完全可见的菜单通常折叠成更少的项目,甚至进入单个菜单按钮(“汉堡包”图标模式),以便它们屏幕空间更小。

只要所有内容和功能仍然完整,就满足成功标准可用-直接或通过可访问控件显示,或通过直接链接。

回流的内容例外

需要二维布局才能使用或表达意思的内容在没有二维布局的情况下无法回流失去意义,因此不需要呈现二维图像滚动。例如,图形和视频本质上是二维的。切割将图像堆叠起来会导致内容无法使用。然而,它可以使这些元素保持在视口的边界内,甚至与其他元素一样内容缩放到400%(请参阅咨询技术)。

数据表在标题和数据单元格之间具有二维关系。这种关系对于传达内容至关重要。因此,这一成功标准无需沿以下方向滚动数据表即可显示文本(例如,垂直滚动页面中的水平文本)。但是,数据中的单元格除非单元格包含的内容类型也需要用于用法或含义的二维布局。

提供工具栏以编辑内容的界面需要同时显示内容和视口中的工具栏。根据工具栏按钮的数量,工具栏可能需要沿文本方向滚动。

响应式网页设计和其他满足此成功标准的方法

使用响应式网页设计方法是实现允许人们放大到400%的目标。每个变量(CSS断点)同一URL的页面应该一致(比较WCAG 2.1的一致性).

对于使用遗留系统或无法更新布局的组织方法出于某种原因,一个替代的一致性版本可能是一个移动站点它有一个固定的320像素宽的布局。用户应该能够找到该版本从默认网站。

避免水平和垂直书写语言中的滚动

成功标准适用于水平和垂直书写语言。缩放水平书写语言的页面,其中页面垂直滚动默认情况下(例如英语)不需要水平滚动。缩放页面对于默认水平滚动的垂直书写语言,不需要垂直滚动。

回流与成功标准的关系1.4.4调整文本大小

回流成功标准的重点是让用户无需向两个方向滚动。成功标准1.4.4调整文本大小同样适用,因此应该可以将所有文本的大小至少增加到200%,同时满足回流焊要求。对于大多数实施,随着放大倍数的增加,文本将继续放大,因此用户可以将文本放大400%以上。在文本执行的实现中当人们放大时(例如当它被改变时基于媒体查询以适应小屏幕使用),它必须仍然是可能的放大到200%,以满足“调整文本大小”标准。

例如,如果默认浏览器设置为100%缩放,则当窗口宽度为1280px,在200%的缩放下,相同的20px意味着文本大小为200%。在400%缩放时,作者可能会决定将文本大小设置为10px:文本现在将与默认的100%缩放浏览器设置相比,仍将放大到200%。不需要在每个断点处实现200%的文本放大,但应该可以以某种方式将文本放大200%。

移动操作系统上的浏览器

移动操作系统上的大多数浏览器不会将回流和缩放结合在一起和桌面浏览器上一样。这些移动浏览器通常在更改时支持回流设备的方向--内容将调整为新的视口宽度。然而,这些移动浏览器只能将内容放大到1.4.4。调整文本大小以不限制回流到单个尺寸的方式,例如通过使用缩小内容的捏手势或双击特定列它填充了视口宽度。这意味着在大多数移动浏览器中缩放内容无论作者做什么,都需要进行二维滚动。

移动用户代理可以当用户放大内容时提供回流,如Dolphin浏览器所示安卓。移动操作系统上浏览器缺乏放大的回流支持因此可以被视为用户代理支持问题。

优点

  • 响应式设计的单柱视图
    网站使用响应式设计。当一个人放大到300%以上时,布局是回流到一列。用户可以轻松阅读内容,无需横向滚动阅读。
  • PDF产品回流
    在为符合PDF/通用可访问性(ISO 14289)而创建的PDF中可以进行回流和放大,使低视力者可以阅读。

示例

示例1:响应式设计

请注意,随着缩放百分比的增加,导航首先更改为隐藏选项在“更多”下拉菜单后面。随着缩放的继续,大多数导航选项最终在“汉堡”菜单按钮后面。所有信息和功能仍然可用来自此网页。没有水平滚动。

相关资源

资源仅供参考,不暗示任何认可。

技术

本节中的每个编号项目代表一种技术或技术组合WCAG工作组认为足以满足此成功标准。然而,没有必要使用这些特定的技术。有关使用其他技术,请参见了解WCAG成功标准的技巧特别是“其他技巧”部分。

足够的技术

咨询技巧

尽管一致性不是必需的,但以下附加技术应该为使内容更容易访问而考虑。并非所有技术都可以在所有情况下使用或将有效。

失败

以下是被视为本成功标准失败的常见错误WCAG工作组。

关键术语

css像素

视角约为0.0213度

CSS像素是CSS中所有长度和度量的标准度量单位。此单位与密度无关,与实际硬件像素不同在显示器中。用户代理和操作系统应确保CSS像素尽可能靠近CSS值和单位模块3级参考像素[[!css3-values]],它考虑了显示器的物理尺寸以及假定的观看距离(内容作者无法确定的因素)。

测试规则

以下是本成功标准某些方面的测试规则。它是不需要使用这些特定的测试规则来检查是否符合WCAG,但它们是定义和批准的测试方法。有关使用测试规则的信息,看见了解WCAG成功标准的测试规则.

返回页首