Airbnb 如何通过可调整的文本尺寸来满足视力不佳用户的需求

Airbnb Tech Blog 最近详细介绍了 Airbnb 是如何为视力障碍用户提高可访问性的。Airbnb 的团队认真执行了文本大小调整指南，这样即使文本字体大小翻倍，平台也能保持网页内容和功能正常，维持良好的用户体验。

网页内容可访问性指南是一套标准和建议，旨在让残障人士更方便地访问网页内容。轻度视力障碍是一种相当常见的现象。美国疾病控制与预防中心估计，在美国，这一问题的患病率为五分之三。此外，正如许多 Reddit 用户提到的，会使用浏览器（或网站，如果可用）的文本大小调整功能的不仅仅是视力障碍用户：

任何有视力障碍的用户都可能在浏览器中设置了“大字体”选项。[lightmatter501]

是的，人们使用键盘或鼠标按钮缩放字体大小。主要是因为可访问性。 [throwtheamiibosaway]

对于某些页面，我会以 110% 或 125% 的缩放比例查看浏览器，因为我的显示器是 3440x1440 分辨率，有时字体会太小而难以阅读。我想这也算可访问性。[Reddit 用户]

如果我想在椅子上靠一会儿，或者向某人展示某物，或者在 Zoom 上共享我的屏幕，我就会这样做。[superluminary]

我更改了最小字体大小，因为我只喜欢访问某一个网站。但我还年轻，眼睛还好。[lontrachen]

WCAG 1.4.4 文本大小调整指南（AA 级）要求，除了标题和文本图像外，文本可以在不使用辅助技术的情况下调整到 200% 大小，而不会丢失内容或功能。Airbnb 的博客文章详细介绍了他们如何使用字体缩放特性作为内容缩放的补充。字体缩放与增加或减少文本字体大小的能力有关，而不一定会影响页面的非文本元素。另一方面，使用浏览器缩放功能会按比例缩放所有 Web 内容，这可能会导致某些用户的体验不佳。

他们的核心思想是使用 em 和 rem CSS 单位代替 px 单位。px 单位是固定的，不会随着用户首选的字体大小而变化。另一方面，rem 单位是相对于根元素的字体大小。在许多浏览器中，根元素默认为 16px，因此 1rem 通常等于 16px。使用 rem 单位设置字体大小是个好主意，因为它的设计是为了适应用户的浏览器偏好。em 也是一个相对测量单位，与 rem 不同，它是基于父元素的字体大小，或具有定义字体大小的最近父元素的字体大小。

这篇博客文章解释道：

em 和 rem 单位之间的选择通常取决于字体缩放所需的控制和可预测性级别。虽然我们可以使用 em 单位，但它们可能导致级联字体大小变化，这可能难以管理，尤其是在复杂的布局中更困难。相比之下，rem 单位提供了一种更一致、更可预测的字体缩放方法，因为它们总是与根元素的字体大小相关联。

[…]在 Airbnb 的案例中，团队决定优先使用 rem 单位进行字体缩放，而不是按比例缩放所有元素。

该博客文章还详细介绍了在整个代码库中传播相应的设计选择（他们的代码库使用了两个不同的 CSS-in-JS 系统）、确保设计人员和开发人员采用新方法以及解决跨平台问题（例如移动设备上的 Safari）的过程。Airbnb 认为这种体验是成功的：

选择字体缩放作为产品可访问性策略带来了一系列显著好处，大大增强了我们平台的整体用户体验。进行这一更改时，使用自动化操作将度量转换为 rem 单位使转变更容易了。在这些更改扩张到整个网站范围后我们查看了总体问题数量，发现现有的调整文本大小问题中有超过 80% 都得到了解决。此外，从那时起，我们看到的新问题越来越少。

他们还邀请开发人员阅读全文，并查看文章提供的详细技术说明和演示。

原文链接：

How Airbnb Caters to Users with Low Vision with Accessible Text Resizing（https://www.infoq.com/news/2024/05/airbnb-accessible-text-resizing/）

声明：本文为 InfoQ 翻译，未经许可禁止转载。