Airbnb 提升网页可访问性的技术实践

Airbnb 技术博客最近详细介绍了他们如何通过实施文本缩放指南，提升对视力困难用户的网页可访问性。即使文本字体大小加倍，Airbnb 仍能保持网页内容、功能和良好的用户体验。

背景与需求

根据《网页内容可访问性指南》（WCAG），网页内容需要为残障人士提供更好的访问体验。轻度视力障碍在美国相当普遍，CDC 估计其发生率高达五分之三。Reddit 用户也提到，不仅视力障碍用户会使用浏览器的文本缩放功能，普通用户也会因各种原因调整字体大小，例如：

• 视力障碍用户通常会在浏览器中设置“大字体”选项。
• 用户会通过键盘或鼠标调整字体大小，主要用于提升可访问性。
• 高分辨率显示器用户可能会将页面缩放至 110% 或 125%，以便更清晰地阅读字体。
• 用户在放松、分享屏幕或 Zoom 会议时也会调整字体大小。

WCAG 1.4.4 文本缩放指南

WCAG 1.4.4 要求，除了字幕和图像文本外，其他文本应能在不使用辅助技术的情况下缩放至 200%，且不会丢失内容或功能。Airbnb 通过字体缩放与浏览器缩放相结合的方式满足这一要求。字体缩放仅调整文本大小，而浏览器缩放则按比例调整所有网页内容，后者可能对部分用户造成不良体验。

技术实现

Airbnb 的核心技术是使用 em 和 rem CSS 单位代替 px 单位。px 是固定单位，不随用户偏好字体大小变化，而 rem 是相对于根元素字体大小的相对单位（默认根元素字体大小为 16px）。使用 rem 单位可以更好地适应用户的浏览器偏好。em 单位则是相对于父元素字体大小的相对单位，但在复杂布局中可能导致级联字体大小变化，难以管理。

Airbnb 团队优先选择 rem 单位用于字体缩放，而非按比例缩放所有元素。这种选择提供了更一致和可预测的字体缩放效果。

实施与成效

Airbnb 将这一设计选择推广至整个代码库（使用两种不同的 CSS-in-JS 系统），并确保设计师和开发者采用新方法。他们还解决了跨平台问题（如 Safari 移动端）。通过自动化工具将单位转换为 rem，Airbnb 成功完成了这一过渡，解决了超过 80% 的现有文本缩放问题，且新问题数量显著减少。

总结

Airbnb 通过采用 rem 单位实现字体缩放，显著提升了平台的整体用户体验。开发者可以参考完整文章，了解更多技术细节和示例。