重新思考网页上的文本调整大小

To better understand the accessibility challenge, let us explore how browser zoom functionality works. You may already be familiar with this feature, using keyboard shortcuts like Command / Ctrl + or Command / Ctrl — to scale all content within a window. When you increase the zoom level beyond 100%, the viewport’s height and width proportionally decrease, while the content is blown up to fit the larger window.

为了更好地理解可访问性挑战，让我们来探讨浏览器缩放功能的工作原理。您可能已经熟悉这个功能，使用像Command / Ctrl +或Command / Ctrl -这样的键盘快捷键来缩放窗口中的所有内容。当您将缩放级别增加到100%以上时，视口的高度和宽度按比例减小，而内容被放大以适应更大的窗口。

As part of our accessibility testing strategy, we were using browser zoom to test the usability of our pages both on desktop and mobile sizes. Desktop testing showed that our pages did relatively well at the 200% zoom level with our responsive web approach across the site. We saw fewer issues in the overall user experience when compared to mobile web.

作为我们的可访问性测试策略的一部分，我们使用浏览器缩放来测试我们的页面在桌面和移动尺寸上的可用性。桌面测试显示，我们的页面在整个站点上采用响应式网页的方式在200%缩放级别下表现相对良好。与移动网页相比，我们在整体用户体验方面遇到的问题较少。

This works well on desktop, where we serve a smaller breakpoint (e.g., wide to compact) and the viewport is relatively spacious. However, the limitations of browser zoom become more pronounced on mobile web, where the viewport is smaller. If we were to scale the content in a mobile viewport, it would have to fit into a viewport that is half the width and half the height of the original. This can result in significant accessibility issues, as the text and UI elements become extremely difficult to read and interact with. As shown in the image on the right, the ability to view even a single listing within a screen’s worth of space is not possible without scrolling, leading to a frustrating experience.

这在桌面上效果很好，我们提供了一个较小的断点（例如从宽到紧凑），视口相对宽敞。然而，在移动Web上，由于视口较小，浏览器缩放的限制更加明显。如果我们在移动视口中缩放内容，它必须适应原始视口宽度和高度的一半。这可能导致严重的可访问性问题，因为文本和UI元素变得极难阅读和交互。如右侧图像所示，即使在屏幕大小的空间中查看单个列表也是不可能的，必须滚动，这导致了令人沮丧的体验。

Airbnb’s homepage shown at browser zoom 100% on the left, and the same screen shown at 200% showing the search an...