In this week’s Best Practice of the Week (BPOW), we examine the best ways to provide help for users who need to resize the text on your web pages in order to read the content more easily.
How well do you know what your site visitors need? For example, do you know if people can read the content easily, or is the default font size too small? And, if text is too small for people to read – do they need your help making it larger?
In 2009, Nielsen Norman Group (NN/g) conducted an informal survey of 12 designers, asking the question, “Should you offer users help to adjust font sizes, or can you simply rely on the built-in browser commands?” The resulting blog post, Guesses vs. Data, presented the results, revealing that many times, well-meaning interaction designers made some faulty assumptions.
75% incorrectly stated that all users who need this already knew how to resize font sizes with their browsers (false). In 2011, I observed several rounds of usability testing which revealed a surprising number of older users who were still unfamiliar with how to adjust font sizes in their browsers, and that handy “text resizing widget” was a total mystery to them. These trends may be changing as more tech savvy users age into disabilities with better browser support. However, without ongoing real-world testing and empirical data, we really are just guessing about what’s best for the user (a bigger topic we can discuss next time). In the spirit of Best Practices of the Week, let’s look at what you can do today to ensure that users have what they need.
According to the Web Content Accessibility Guidelines, Guideline 1.4.4 states that users should be able to resize text on a web page up to 200 percent without loss of content or functionality, and they should be able to do this without having to use assistive technology. What does this mean? Should we be teaching people how to resize text using their own browsers? Or, should we be creating a text resizing widget? As usual, we find our answers in adhering to web standards and in respecting our users.
Follow web standards
- Structure. Build your pages using valid code and semantic markup.
- Let go. Don’t define the text size on your web pages using fixed pixels.
- Go bigger. If you could measurably increase the time that people spent on your site, would you do it? Of course! One really easy way to improve the readability of your web content is to simply enlarge the default font size.
Respect the reader
- Let readers define their needs. No two users are alike, so their needs may be very different. Some people who have significant vision loss will increase the browser’s default font size. Others may use a screen magnifier. And some, like my mom, will just stop visiting your web site if the text is too small for her to read. And, then she’ll call me. If your web pages are built with web standards and web accessibility best practices, none of these scenarios become an issue. And, my mom won’t call me to complain.
- Consider responsive web design. We often hear about the benefits that responsive web design can offer when designing to support multiple devices, and you may have even heard about the benefits that responsive web design provides for users with low vision. The same concepts apply with regards to text content. Allow the user’s screen resolution and custom settings to define the presentation of your web content.
5 good reasons to leave text resizing widgets in the Wayback Machine
- Text resizing widgets add variables to the design and interface that are difficult to build, predict, and maintain.
- People often overlook text resizing widgets.
- People don’t always understand what text resizing widgets actually do.
- Most text resizing widgets are pushed to the far right side of the page, buried in a top level navigation bar. Unfortunately, this is an area where low vision users are most likely to miss seeing it.
- There is no consistent way to implement text resizing widgets on web pages. Therefore, every text resizing widget presents a unique set of controls (two letter A’s? three? four? a plus/minus sign? a reset button? something else?). This places a burden on the user to have to learn how to use your widget.