How Airbnb Caters to Users with Low Vision with Accessible Text Resizing

The Airbnb Tech Blog recently detailed how Airbnb enhances accessibility for users with vision difficulties. Through careful implementation of text resizing guidelines, Airbnb maintains web content, functionality, and a good user experience even as the text font size is doubled.

The Web Content Accessibility Guidelines are a set of standards and recommendations to make web content more accessible for individuals with disabilities. Mild visual disabilities are a fairly common occurrence. The CDC estimates the prevalence of the issue to be 3 out of 5 in America. Furthermore, as many Reddit users mention, not only users with a visual disability may reach out to text resizing capabilities of their browsers (or website, when available):

Anyone with a visual disability is likely to have a “large font size” option set in their browser. [lightmatter501]
And yes, people scale the font size with keyboard or mouse buttons. Because of accessibility mostly. [throwtheamiibosaway]
For some pages, I view the browser at 110% or 125% zoom since my monitor is 3440x1440 and sometimes the font is too small to read. I guess that still counts as accessibility. [Reddit user]
I just do it if I want to lean back in my chair for a while, or if I’m showing someone something, or if I’m sharing my screen on Zoom. [superluminary]
I change the minimum font size because of only one particular website I like to visit. But I am young and still have good eyes. [lontrachen]

The WCAG 1.4.4 Resize Text (Level AA) guideline requires that except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. Airbnb’s blog post details how they use font scaling as a complement to zoom scaling. Font scaling ties to the ability to increase or decrease text font size without necessarily affecting non-text elements of the page. Using browser zooming capabilities on the other hand scales all web content proportionally, which may lead to a suboptimal experience for some users.

The core idea consists of using em and rem CSS units instead of px units. px units are fixed and do not vary with the user-preferred font size. rem units on the other hand are relative to the font size of the root element. The root element defaults to 16px in many browsers, so 1rem is often equal to 16px. Setting font sizes with rem units is a good idea because it is designed to adapt to the user’s browser preferences. em is also a relative unit of measurement that unlike rem is relative to the font size of the parent element or the font-size of the nearest parent with a defined font size.

The blog article explains:

The choice between em and rem units often comes down to the level of control and predictability required for font scaling. While em units can be used, they can lead to cascading font size changes that may be difficult to manage, especially in complex layouts. In contrast, rem units provide a more consistent and predictable approach to font scaling, as they are always relative to the root element’s font size. […]

In the case of Airbnb, the team decided to prioritize the use of rem units specifically for font scaling, rather than scaling all elements proportionally.

The blog article additionally goes into detail about spreading the corresponding design choices across the entire codebase (which uses two different CSS-in-JS systems), ensuring designers and developers adopt the new approach, and solving cross-platform issues (e.g., Safari on mobile). Airbnb deemed the experience successful:

Choosing font scaling as the product accessibility strategy brought about a range of significant benefits that notably enhanced our platform’s overall user experience. Making that change using automation to convert to rem units made this transition easier. When looking at our overall issues count after these changes were site-wide, more than 80% of our existing Resize Text issues were resolved. Moreover, we are seeing fewer new issues since then.

Developers are invited to refer to the full article and review the detailed technical explanations and demos that are provided.