웹에서 텍스트 크기 조정을 재고하는 것

에어비앤비의 웹 접근성 개선 노력은 텍스트가 200% 확대될 때 읽을 수 있도록 보장하는 데 초점을 두었습니다. 데스크톱에서는 브라우저 줌이 효과적이었지만, 모바일 기기에서는 뷰포트가 제한되어 있어 어려움이 있었습니다. 에어비앤비는 텍스트 크기만을 조정하는 글꼴 크기 조정을 선택했습니다. 글꼴 크기 조정을 지원하기 위해 에어비앤비는 rem 단위를 선택했습니다. 이는 루트 요소에 기반하여 글꼴 크기에 따라 비례하여 크기가 조정되는 방식입니다. 이렇게 하면 텍스트 크기가 일관적으로 조정되며 다른 레이아웃 요소에는 영향을 미치지 않습니다. 에어비앤비는 이 전환을 자동화하고 디자이너들이 디자인 단계에서 글꼴 크기 조정을 시뮬레이션할 수 있는 도구를 제공하여 전환을 용이하게 하였습니다. 두 가지 CSS-in-JS 시스템, React-with-Styles와 Linaria에서 전환을 관리하는 것은 추가적인 도전이었습니다. 에어비앤비는 Linaria의 사용자 지정 속성 지원 및 post-CSS 플러그인을 활용하여 대부분의 글꼴 관련 속성을 전환했습니다. 필요한 경우 px 단위를 사용할 수 있는 탈출구도 제공되었습니다. 이러한 접근성 개선의 구현은 'Resize Text'와 관련된 보고된 문제의 수가 대폭 줄어들고 시각 장애가 있는 개인의 사용 경험을 개선했습니다. 사용자 요구를 우선하고 최고의 실천을 채택함으로써 에어비앤비는 포괄적인 웹 디자인에 대한 헌신을 보여주었습니다.