无障碍访问

为什么阻止双指缩放会将视力低下的访客拒之门外

一些网站为了显得「更简洁」而使用的设置,可能会让一个需要放大的人完全无法阅读页面。

这是什么

这项检查专门查看一个页面的 viewport 元标签是否包含了禁用缩放的设置——最常见的是 user-scalable=nomaximum-scale=1,被添加到了原本仅仅是为移动端响应式所必需的同一个标签上。这些附加设置过去有时被用来防止意外的双击导致意外放大,但它们有一个严重的、无意的副作用:它们会完全阻止缩放,即使访客是有意想要双指放大。

这与页面根本没有 viewport 标签(那会导致另一种、纯视觉性的问题,在我们其他的 viewport 指南中讲过)是不同的——这里专门讲的是一个存在但被配置为主动阻止缩放的 viewport 标签。

为什么重要

许多视力低下的访客依赖双指缩放,把它作为在任何页面上舒适阅读网页内容的正常方式,根据自己的视力状况调整到合适的缩放级别。阻止这项功能不只是造成不便——对于真正需要它的人来说,这可能让页面的内容完全无法阅读,就是这么彻底,无论页面其他部分设计得多好。

这在 WCAG(标准的网页无障碍指南)中被明确指出,它要求不能禁用缩放,正是因为这对视力低下人士的影响有多直接——这被认为是较为严重、且完全可以避免的无障碍失败之一,恰恰因为它剥夺了浏览器本身默认就已经提供的一项功能。

如何解决

  1. 检查你页面的 viewport 元标签中是否有 user-scalable=no,或者 maximum-scale 的值为 1 或更低。
  2. 如果存在,就移除这两个特定部分,保留标签其余部分(width=device-width, initial-scale=1)不变。
  3. 如果最初的目的是防止在某个特定交互元素上意外的双击缩放,那就通过更针对性的样式来处理那个元素,而不是禁用整个页面的缩放。
  4. 如果你使用的是网站建设工具,这很少是平台默认设置的东西——检查你添加到页面 <head> 部分的任何自定义代码片段。
  5. 之后在实际手机上测试,尝试在页面上双指缩放,确认它现在能正常响应。

看看你自己的网站是否也有这个问题

Launch Readiness 会在几秒内检测你的网站是否存在此问题以及其他约 50 个上线前的问题——免费,无需注册。

立即免费检测