Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at:
Improving web accessibility is a critical priority at Airbnb, and we use the Web Content Accessibility Guidelines (WCAG) to help guide our compliance efforts. One area that often leads to accessibility issues is WCAG 1.4.4 Resize Text (Level AA). This guideline, which we’ll refer to as Resize Text, is particularly beneficial for people with low vision, whether correctable or not (for example, with glasses or prescription contacts). The standard specifies that web content and functionality must be maintained when text is scaled 200% (2x) of its original size. Ensuring our site meets this guideline is an important part of our ongoing work to enhance accessibility for all of our users.
Meeting the Needs of Users with Vision Difficulties
“90 million Americans over 40 have vision and eye problems. That’s more than 3 in 5.” CDC’s data emphasizes how critical it is to enhance accessibility. To illustrate, consider how the Airbnb homepage might appear to someone who has experienced a significant loss of visual acuity. The text becomes extremely difficult to read comfortably at various scales.
Image Description: A comparison of the Airbnb homepage with normal and scaled text.
Browser Zoom
Browser zoom is a common feature where users scale all content within a window using keyboard shortcuts. When you increase the zoom level beyond 100%, the viewport’s height and width proportionally decrease, while the content is magnified to fit the larger window. During our testing, desktop pages performed relatively well at the 200% zoom level, but the limitations of browser zoom became more pronounced on mobile, making text and UI elements difficult to interact with.
Font Scaling
Font scaling refers to adjusting text size independently of the overall page zoom. Unlike browser zoom, which scales all content, font scaling applies only to text elements, allowing users to customize the font size to their preference without affecting other layout parts. This approach is akin to Apple’s Dynamic Type feature on iOS, which sets a preferred system-wide text size that automatically adjusts across all compatible apps.
Understanding px, em vs rem
Choosing the right CSS length unit is crucial for supporting font scaling. Here’s an overview:
px: Fixed and doesn't change based on user's font size settings.
em: Relative, scales proportionally with the font size of its parent element.
rem: Relative to the root element's font size, providing more consistent and predictable scaling.
Airbnb prioritized using rem units for font scaling to ensure a consistent and maintainable solution.
Image
Image Description: Example of text scaling using px, em, and rem units.
Enabling a Seamless Transition for Designers and Developers
Transitioning from pixel-based values to rem units presents challenges, especially with multiple teams. To mitigate these challenges, Airbnb focused on automating the unit conversion process, reducing friction in design iterations, and educating stakeholders on the benefits of this approach.
Reducing Friction in Design Iterations
Designers continued authoring CSS in px units while using the Text Resizer — Accessibility Checker to simulate designs at 2X font size, spotting problems early in the design process.
Explore the importance of task automation and how it can streamline your processes.
Addressing the Complexity of Two CSS-in-JS Systems
Airbnb is transitioning from React-with-Styles to Linaria. Managing the conversion across these systems required leveraging Linaria’s support for CSS custom properties and plug-ins like postcss-pxtorem to automate conversions.
Improvements for Testing Components
Testing components with font scaling involved developing an internal plugin that allows setting the font-size on the HTML element directly. This enabled easier component validation for various root font sizes without creating new component variations.
Font Scaling on Mobile Safari
Supporting font scaling on Mobile Safari was challenging due to the lack of font size preference settings on the browser. By utilizing unique CSS properties and inline scripts, Airbnb normalized font sizes effectively.
Impact
Supporting scalable fonts dramatically improved accessibility on Airbnb. More than 80% of existing Resize Text issues were resolved, resulting in a more legible and usable interface.
Edworking is the best and smartest decision for SMEs and startups to be more productive. Edworking is a FREE superapp of productivity that includes all you need for work powered by AI in the same superapp, connecting Task Management, Docs, Chat, Videocall, and File Management. Save money today by not paying for Slack, Trello, Dropbox, Zoom, and Notion.
Remember these 3 key ideas for your startup:
Prioritize Accessibility: Ensuring your platform is accessible to all users will not only comply with guidelines but will also enhance the overall user experience. Discover best tools for release management.
Leverage Automation: Automating repetitive tasks like CSS unit conversion can significantly reduce the workload and make the transition smoother. Learn more about how to replicate office settings in remote work environments.
Consistent Testing: Regular testing with tools like the Text Resizer can help you identify and resolve accessibility issues early, ensuring a better user experience.
For more info on how creative solutions can improve user experiences, explore career opportunities at Airbnb. By integrating these strategic approaches, startups and SMEs can significantly improve their web accessibility, making their platforms more user-friendly for all audiences.
For more details, see the original source.
