RSS Airbnb Tech Blog - Medium

ウェブでのテキストサイズ変更の再考

Airbnbは、ウェブアクセシビリティを向上させるために、テキストが200%まで拡大された状態で読みやすくなるようにすることに焦点を当てました(テキストサイズの変更)。デスクトップ上では効果的ですが、モバイルデバイス上ではビューポートが限られているため、ブラウザのズームが問題となった。Airbnbは、ページのズームとは独立してテキストサイズを調整するフォントスケーリングを選択しました。 このアプローチで、テキストサイズが一貫してスケールし、レイアウトの他の要素には影響しません。デザイナーがデザイン段階でフォントスケーリングをシミュレーションできるツールも提供し、rem単位の移行を簡単化しました。 2つのCSS-in-JSシステム、React-with-StylesとLinaria、での移行の管理も、新たな課題を生みました。Airbnbは、Linariaのカスタムプロパティサポートとpost-CSSプラグインを使用し、ほとんどのフォント関連プロパティを変換しました。px単位を必要に応じて使用できるように、逃げ道も提供しました。 これらのアクセシビリティ向上の実装により、「テキストサイズの変更」に関する報告された問題の数が大幅に減少し、視力障害者らのユーザーエクスペリエンスが向上しました。Airbnbは、ユーザーのニーズを重視し、ベストプラクティスを採用することで、包括的なウェブデザインに対するコミットメントを示しました。
favicon
medium.com
Rethinking Text Resizing on Web