可访问性 页面缩放
为什么
视力低下的人需要缩放内容才能使用页面。
什么
文本缩放的“大哥”是页面缩放。缩放一切！这些原则很容易理解。
- 避免水平滚动。
- 所有内容均可用。
- 所有功能均可用。
- 避免在图像中使用文本。
- 为关键内容提供空间。
可用意味着没有任何内容被裁剪、截断或遮挡。
页面缩放通常会在 响应式网站上触发移动视图，这是好事。
如何操作
您现在将学习支持页面缩放的五种技术。
为关键内容提供足够的空间
不要让次要内容占据屏幕。
隐藏的图标
在这个来自 Samsung India 的示例中，页面被放大到 400%。内容缩放正常。没有水平滚动条。但是，聊天按钮占据了浏览器窗口的很大一部分。搜索、购物车或菜单按钮不容易访问。并且按钮图形的质量很低。此外，还有一个巨大的应用程序广告。
改进
- 为聊天按钮添加一个**最小化按钮**。使用最小化版本作为默认。
- 使用**矢量图形**（如 SVG）而不是光栅图形（如 PNG）。
- 仅为移动**设备**显示移动广告。
无杂乱
在这个来自飞利浦的例子中，整个视口都可用于主要内容。主导航已打开，没有杂乱。文本和图形缩放良好。
视口已设置
<meta name="viewport" content="width=device-width, initial-scale=1">
了解更多关于响应式网页设计的信息。
避免水平滚动
二维滚动令人困惑。
固定宽度
在这个来自戴尔的例子中，我们只能看到标题的一小部分。该网站在缩放时不会缩放。结果是很大的水平滚动，使得二维页面导航困难。
此外，cookie 同意按钮是固定的，即使已给予同意也无法删除。徽标和图标是低分辨率的 PNG，缩放效果不佳。未设置视口。
改进
- 让网站响应式。
- 为 cookie 按钮添加一个**最小化按钮**。使用最小化版本作为默认。
- 使用**矢量图形**（如 SVG）而不是光栅图形（如 PNG）。
所有内容和功能均可用
缩放时不得隐藏任何内容。
隐藏的选项卡
在这个来自索尼的例子中，带有产品信息的选项卡在桌面浏览器中使用页面缩放时不可访问。即使用户滚动，滚动也发生在浏览器窗口之外。所有规格、功能、评论和支持都无法访问。问题是整个部分是“粘性的”
<section class="sticky-nav">
.sticky-nav {
position: fixed;
z-index: 1035;
top: 0;
}
此部分在移动视图中高 159 像素。当放大四倍时，固定部分占据了桌面视图的 636 像素。浏览器高度为 720 像素，减去浏览器顶部部分，为主内容留下的空间不多。
固定内容不一定不可访问。关键是要始终在常见的浏览器尺寸下使用页面缩放测试您的网站。
在移动视图中，选项卡下的内容是可访问的。
华为的粘性导航不是很高，因此为主内容留下了足够的空间。
避免在图像中使用文本
在这个来自小米的例子中，缩放后的文本呈像素化，因为它属于图像的一部分。文本的一部分也在浏览器窗口之外，因此用户必须滚动才能阅读整个产品标题。除了可访问性外，使用纯 HTML 和 CSS 显示文本还有很多好处：响应式、可翻译和可搜索。
