Accessibility fail: large text settings in modern web & mobile browsers

in Web Design & Development

Illustration of my friend laughing at me for using large fonts

My eyes prefer large text. Even though I have almost perfect vision, my eyes are more comfortable with a larger text size setting. This is true whether I'm reading something on my desktop computer or my mobile phone. Unfortunately, support for increasing the native text size on webpages is scant, and each company has their own method of implementation. Many accessibility standards have been established over the past few decades, but when it comes to default text size settings, there's almost zero consensus around implementation and support. Without a standard, it's been difficult for web designers to factor in the feature within their designs. So we don't.

9 January 2017 update: The text below has been edited to reflect the new Page Zoom feature on Safari (Desktop).


A. Desktop web browsers

The three desktop web browsers I tested (Google Chrome, Mozilla Firefox, Apple Safari) offer three types of support for large text.

A1. Page zoom

A page zoom of 120% means that the entire webpage (images, text, white space, et al.) is magnified by 120%. It magnifies everything equally, so it's the safest way to increase the text size on a page and carries zero risk of breaking the layout.

Support

  • Chrome & Safari allows users to set a page zoom for all pages.
  • Firefox only allow users to increase zoom by hitting Ctrl + during a session, but the zoom setting is not saved for future sessions.

A2. Default font size

The default font size is supposed to function like the page zoom. If I increase the default font size from 16px to 24px, (select parts of) webpages should be enlarged accordingly. Unfortunately, many webpages are not designed/coded properly to take advantage of this setting. For example:

Screenshot of Google search results for Adventure Time

Above: Google search results in Chrome with font size setting "very large"

Support

  • Chrome and Firefox (but not Safari)

A3. Minimum font size

Having a minimum font size means that any text that falls below, say, 14px will be increased to 14px. It's a handy tool to make fine print legible, but does not do the design/layout any favors when it's used to increase the text size as a whole:

Screenshot of Apple website on Safari

Above: Apple website in Safari with a minimum font size of 24px

Support

  • Safari and Firefox (but not Chrome)

B. Mobile web browsers

With mobile browsers, large text support differs depending on whether you're on iOS or Android.

B1. iOS

In iOS, there is one "larger text" setting within the operating system's accessibility panel and that setting propagates to all supported apps and websites. Unfortunately, some iOS-only CSS variables must be used to turn this setting on within webpages, so very few websites support it (including Apple.com). On the plus side, the variables are accessible through CSS, which gives web designers some control over how their design might scale under different settings.

B2. Android

Android uses separate, unconnected text size settings for its operating system and its web browser (Google Chrome). For webpages, Chrome on Android offers a "text scaling" option that enlarges text on all webpages. Unlike iOS' solution, it doesn't require designers to implement it, which means it automatically works for all websites. However, it also means that designers have no control over it.


Every product has their own way of supporting large text, with very little consensus over what the best option is. Sadly, solutions that give zero control to the designer are the most robust. For example, on desktop browsers, page zoom (A1 above) is a simple and straightforward override. The solutions that do offer some modicum of control are either incredibly obscure (iOS CSS variables) or unsupported by major websites (font size fail on Google.com). As a web designer who wants my designs to support large text settings, I'm at my wit's end.

My eyes are not looking forward to old age.

Illustration me as an old man using a magnifying glass to read on my phone

By Jason Li

Share this post on

comments powered by Disqus