About Text Resize Widgets and Fishing
Here's a collection of previous comments and updated notes on why not to provide only a text resize widget on your website.
Update: I still strongly encourage sites to provide instructions on how to change text size with browser settings. However, some might want to provide a quick method for people to change the text on their site, without users having to learn the browser functionality. In that case, I recommend combining that with the instructions so that users can see the fishing instructions and not just stop at the fish; that is, not putting only the widget on each page. E.g., something like:
<h1>How to Change Text Size or Colors
<h2>Changing Text on this Website Only
[widget]
<h2>Changing Text and Colors on This and Other Websites
<p>You can use your browser settings to change text size and colors on this and other Web sites that meet W3C accessibility guidelines and are designed for accessibility, flexibility, and user control...
Examples of providing both
- Lighthouse provides a widget along with "Learn about resizing text" on each page. (Ironically, I think the widget doesn't increase the text nearly enough.)
Comments on an email thread
http://www.webaim.org/discussion/mail_thread.php?thread=3315 ends with:
-------- Original Message --------
Subject: Re: [WebAIM] good example of contrast widget?
Date: Mon, 09 Apr 2007 11:20:40 -0500
From: Shawn Henry <shawn@w3.org>
> [in reply to various replies about text size switchers versus instructions, and browser support]
We debated which method to use when we redesigned the W3C WAI Web site <http://www.w3.org/WAI/> a couple of years ago. We chose to provide instructions on how to change settings in browsers, rather than provide a "switcher" [text resize] widget.
There is an expression that goes something like this: "Give a person a fish and you feed him for a day, teach a person to fish and you feed him for a life time."
At the top of all WAI Web pages is a link to "Change text size or colors"; it is in a gray bar that is visually separate from the site design. It links to a page <http://www.w3.org/WAI/changedesign> that explains how to change settings in different browsers, and also answers: "Why doesn't this work with some other Web sites?"
Some points about this method:
* It teaches people how to change their settings, which will help them with other Web pages that are well designed. (A switcher only helps with the one Web site.)
* It explains why changing the settings doesn't always work, which will hopefully lead some people to encourage improvements in sites and browsers that aren't well designed.
If you have comments and suggestions for improvements to this page, we'd love to hear them; the footer has an e-mail address: "Feedback welcome to wai-eo-editors@w3.org (a publicly archived list)."
Note that you are welcome to copy or link to <http://www.w3.org/WAI/changedesign>.
Misc notes
In reply to some questions:
- all major browsers and as far as I know almost all configurations (combination of browser, operating system, assistive technology) provide users some functionality to resize text in a web page; therefore, with a properly designed/developed site and users who know how to use their text resizing functionality, a text resize widget is not needed
- however, many users don't know about browser text resizing features
- if you put a resize widget on your page you don't help people learn how to resize the text on other pages. also it usually provides very limited resizing options compared to the browser settings, and therefore won't meet many people's needs.
Putting a link to instructions on how to change text with browser settings is a vastly stronger education tool:
- it teaches users how to also change text on other sites!
- it teaches web designers who might not be coding their sites well
On Scalable Text. Summary: In order to provide scalable text, make textual information text (rather than images), and use relative text sizes (rather than absolute). Scalable text is important for people with low vision. The basics of providing scalable text are very simple. However, strict design requests can pose challenges. This page covers: Basic issue with scalable text, testing text scaling, relative sizing text, textual information presentation (make text text, not images), and more.
Using WAI's "How to Change Text Size or Colors" page
You are free to copy or link to WAI's "How to Change Text Size or Colors" page, per http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231. An advantage to just linking to it is that when it is updated, you get the updates automatically. You are also free to reproduce it however you would like. Just include a link to the original and copyright:
<a href="http://www.w3.org/WAI/changedesign.html">How to Change Text Size or Colors</a>, S.L. Henry, ed. <a href="http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231">Copyright © 2005 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved.</a>
If you do make improvements, it'd be nice if you would share those with WAI (wai-eo-editors@w3.org) for the next update.