Scrap text resize widgets and teach people how to resize text

Something that always bugs me is when somebody slaps a text resize widget on their site and calls it “accessible”. Job done. Maybe that is a bit unfair since there are many sites that actually are accessible that have a text resize widget, but my non-scientific guess is that a majority of sites that have a feature like that are a long way from being accessible and use a text resizing widget as a band-aid instead of addressing the underlying problem.

Instead of cluttering client sites with this kind of widget I’ve started adding a set of pages with information that helps the user resize text in their browser. It’s a bit like the information provided by the BBC’s My Web My Way but nowhere near as detailed (the BBC site really is incredibly detailed, with screenshots and explanations for many, many combinations of web browsers and operating systems).

The reason I’m providing this info instead of text resizing widgets is that I hope it will teach people how to use their browser, thus enabling them to resize text on every site they come across while using the Web. (Unless of course it’s an all-Flash site or a site that uses images for large portions of text, but in those cases there is always the option to do what I do – use the back button and be done with the site.)

I’m not the only one to think helping people understand how to use their browser is a better idea than replicating browser functionality. In Teach a Man to Fish (or How to Resize Text), Ian Lloyd posted a video (Text Resizing - Visual Guide) he created that explains how to change text size in several different browsers. In addition to visually showing how to change the settings, the video contains a voice-over which will help understanding.

I think this is a great idea, and a nice complement to screenshots and textual descriptions of changing the settings. However I think YouTube may not be the best place to host a video like this because of the low resolution and high compression it uses. A video of this kind needs to be crisp and non-blurry, considering the target audience.

I don’t know which options are available if you can’t host the video yourself, but I have a hard time believing even a fairly large video will be downloaded enough times to bring down your site or increase your bandwidth costs by any significant amount (if at all).

Posted on September 21, 2007 in Accessibility, Browsers, Usability

Comments

  1. I’ve always been skeptic about those widgets. I am not convinced that the people who need to use them yet don’t know how to do it themselves are capable of finding and using the widgets — especially when they’re often designed reasonably small and low-profile.

    Teaching people how to do is a great idea. As for hosting a bit higher quality video, perhaps Stage6 (http://stage6.divx.com) is an alternative?

  2. I totally agree with you and that why I have done a comment on that subject on the current WCAG 2.0 draft for the criterion 1.4.4.

    The sufficient technique for this criterion say that : “Providing controls on the Web page that incrementally change the size of the text” is a good technique to satisfy this criterion and for me it’s sound like this scrappy widget

  3. September 21, 2007 by Paul Walker

    Or, both teach him to fish, and give him one fish free - Maybe we should be putting in the text resize widget, and then, have the act of resizing the text display a little tip, leading to the pages on how to resize text in a specific browser. And of course, the text resize widget would resize the text too…

    Something like ‘You can easily resize the text on any page using your browser - _How?_’ (I’m not a copywriter for a reason)

  4. I provide such links on my personal website, while also sizing text using keywords and percentage values. I consider it just a helpful widget for those who are not familiar with the built-in browser tools.

    As for the helpful pages you’ve added to client sites; I think that’s a great idea, although it’s probably necessary to think hard about the site you’re going to add these pages to. I can imagine not all of your clients want to include such pages, and also, I can imagine quite a large audience that won’t be on the site long enough to find (or care about finding) these helpful pages.

    All in all, it’s a very nice effort, great initiative!

  5. Brilliant Idea. I try and make my sites accessible and flexible when it comes to font sizes but I refuse to spend my time re-creating what already exists and works perfectly well.

  6. Amen! You can’t assume people even know what those widgets are, especially if your site is geared towards older adults. I worked on a non-profit for the elderly once, and one of the most well-received areas I included with the help page was tips on how to use the site. One of the tips actually explained how to resize text from within your browser.

  7. Mmm, maybe somebody should make a series of movies or Captivate presentations (Flash based) about how to resize text in browsers etc and just make them free to use Creative Commons licensed content. Then people can either host them themselves or access them from some central site. This would avoid people reinventing the wheel trying to make some good demo movies.

    Using Adobe Captivate (or similar Flash based presentation tool, no favouritism intended!) has the benefit that it makes use of screenshots rather than simply being captured video running at several frames a second, the mouse movements etc being animated within Flash rather than simply part of the captured video. This makes a big impact on the issues of bandwidth required to display this kind of content. Of course it does mean it’s video or flash which both have their own accessibility issues but it would be a great resource for people to include or link to for the purpose you’ve described above.

  8. It’s impossible to teach people how to resize text. We (I and my coworkers) were trying to show articles according to the browser settings. After a week we have been forced to use pixel-based font sizes, because ignorant M$ Internet Explorer users whined (“My fonts are too small”, “My fonts are too large”) - there were dozens of calls. I think most non-IT users won’t even bother with learning how to configure their browser properly, because “Other sites look ok, so it must be your fault.” :(

  9. Since text resize widgetery relies on JavaScript (which is most certainly not available on all browsers), I would argue that they do almost nothing for accessibility.

    I have found that the default size for text is almost always just fine, because people who need bigger text will have adjusted their operating system resolution to compensate anyway. The problem comes when web designers reduce the size of text to smaller than the browser default.

  10. The only problem with using the browser to control text size is that it becomes a global issue. Make the text smaller and every site you visit has smaller text and vice versa. When sites enable the user to resize the text it’s a site-specific preference. Now don’t get me wrong, I really dislike those text widgets but they do serve a purpose. If the next generation of browsers are able to store text size preferences on a per-site basis then the problem would be solved.

  11. I have always been firmly in the camp that sneers at text resize widgets, but actually found myself reconsidering them the other day.

    I have been looking at the WCAG2 proposed requirement to be able to resize text from 50% to 200%. That seemed a little excessive to me, so I’ve been testing a variety of sites and found that, yes, indeed, things tend to get really weird at the ends of this range - for just about every site. (Yes, even this one!) 3-Column layouts and horizontal navigation bars that use over 60-70% of the available width are particularly susceptible.

    Probably the only reasonable way to have a page be completely usable at 200% is to have an alternate layout, and a likely way to get to it would be from a (gasp!) text resize widget.

  12. I totally support what you are saying. Often text resize widgets are reliant on javascript which many people disable or are not supported in the way they wish to use the internet. Plus, I do a fair few accessibility audits on sites, that the owners said their site was sold to them as accessible just because they had a resizer added. Also by enabling the viewer to understand how to take control themselves helps them greatly if they follow outgoing links from websites. You did a great article a while back looking at both sides of text resizers, which was really informative and helpful.
    I have used them on various sites when persistently requested, and in some sites they are appropriate in addition to some supporting materials…although I do try to emphasise that helping readers to learn how to view websites will enrich their experience of the internet further.

  13. Many people don’t know how they can resize the text in their browser. Newcomer, elderly people and persons with disabilities that make first experience with the WWW have often the same problems.

    We discussed such features with persons with disabilities and they told us, that not all know how to resize the text.

    Then we search for features without javascript to implement a text resize widget on a page. 97% of all german WWW users have javascript active, but we found no solution without javascript. Only a small solution with cookies and PHP.

    On my own page, I have made a accessibility page where my visitors can read how they can resize the text in the browser and how they can use my site only with keyboard. I don’t like javascript and I don’t found a solution only with CSS. If a widget will help most people to resize the text, I don’t know, but I think it’s better to tell the people how they can do this.

  14. Oh the irony. An author who preaches accessibility trying to encourage people to delve into the depths of browser menus when one simple click will do.

    I jest, Roger. Well, slightly.

    I greatly admire the effort you put into improving usability, accessibility and web standards, I also really enjoy reading your blog but just because there’s an existing way to do something, it doesn’t mean there isn’t a better way.

    Me? I know my browser pretty much inside out, but I thank the designer who allows me to alter text size with a single click. How easy and convenient. How…usable.

    And just in case anyone out there is under the mistaken impression that this functionality is solely the realm of JavaScript, it’s not. Text resizing can be achieved with a trivial amount of server-side code that every browser will honour. Don’t confuse implementation with behaviour.

    Actually, I’m with you, Roger. “You’ve got text-resize functionality and you say this makes your website more accessible?” No. Clearly it doesn’t. However, why not give those designers who have a vested interest in improving usability a break?

    And end-users reading about how to use their browsers? Noble, but futile, methinks.

    One-click rules. OK?

  15. September 21, 2007 by Roger Johansson (Author comment)

    Ian:

    I know my browser pretty much inside out, but I thank the designer who allows me to alter text size with a single click. How easy and convenient. How…usable.

    Easy and convenient… perhaps. For that particular website. If what you need happens to match the size (or sizes) that is offered. If you happen to find the text resize widget and it is big enough for you to see it. It leaves you with no option on all the sites that do not have a text resize widget though.

    But maybe what you are saying is that every single site should implement a text resize widget? What about the back button and scroll bars? Some people don’t know how to use those either ;-).

    One-click rules. OK?

    What’s wrong with one keyboard shortcut (Cmd/Ctrl - +) that works everywhere?

  16. I always found text resize and printable view widgets quite silly. Cmd/Ctrl - + or Ctrl + scroll up/scroll down is not that difficult. Most people leave their hand on the mouse when reading text anyway, so leaving your other hand on the Ctrl button is possible. The problem with the text resizing widgets is that they are often located at the top of the page. If a reader wishes to adjust the text size half-way through a lengthy article, he/she is forced to scroll to the top of the page to make the change. The keyboard/mouse method is functional anywhere in the page.

    As for the printable view widget, I feel that the designer/site creator should be obligated to create an alternate CSS with media=”print,” which utilizes browser functionality, and be done with it. However, as many web designers know, people are surprised when what comes out of the printer does not look like the web page they see on the screen…a topic I’m sure you have already addressed. Long live reader comments!

  17. I always resize text with my keyboard if I’m using something that supports that (this was functionality in IE 6 that didn’t make it to IE 7 I noticed). It just doesn’t get much easier. And as far as usability… it beats a developer-provided widget hands down because my keyboard is in the same place and works the same way, regardless of what site I’m on. If I relied on widgets, I’d have to locate the interface on each and every site. Yep, keyboard’s where it’s at for me: ctrl++, ctrl+-, and ctrl+0… all give me total ctrl :)

  18. I always get a little chuckle when I see a text resize widget (a graphic) that has been made so small that even I find it hard to read the ‘T’…

    I’m not really sold on them either, but I’ve learned that visitors don’t visit pages with ‘how to do stuff to visit here correctly’ information either. I think its good to provide, much like the old accessibility statement, but not the answer in itself.

    If the default behaviour allows for text resizing in the browser and it has an extra feature - lets say a (widget?) link that is really a style switcher for either a clearer layout or different sized text, so its JS but with a PHP backstop - then I don’t really see how its harmful. As long as the link (widget?) isn’t so small that its can’t be found by someone who needs larger text.

    I would worry if the fonts were in pixels rather than ems, and that the only way to resize was from the JS run widget.

    I see what you mean by teaching a man to fish but usability experience tells me that most users are too time poor to want to learn how to fish, they’re not surfing they’re trying to do something like internet banking or buying a tshirt then get back to their busy lives. Therefore it can’t ever be an expectation on our part the user cares beyond complaining I guess.

    So build it right the first time then add enhancements but think wisely before you fall for every gadget going. I’d like to see the widget, if used, become way bigger and be incorporated as a design element. Otherwise what’s the point of a little button?

    Simply denying the ability to resize for those who don’t know how is neither accessible, usable or even profitable. After all its all about bums on seats and sales conversion. Hypothetically if it were me going to a site, if there was a feature I needed (like bigger fonts) and I had one option - reading a page - then I’d go to another site with bigger fonts in the first place…

    so build it correctly the first time I guess.

    but I agree with you to some extent, they don’t mean accessible by a long shot (such as the tiny tiny widget or the JS reliant one)… just my 2 cents.

    What is worse is a site that doesn’t even care I guess.

  19. September 22, 2007 by Roger Johansson (Author comment)

    Steven:

    If the default behaviour allows for text resizing in the browser and it has an extra feature - lets say a (widget?) link that is really a style switcher for either a clearer layout or different sized text, so its JS but with a PHP backstop - then I don’t really see how its harmful.

    I don’t think it’s harmful either. It’s just that I think it’s better to at least attempt to teach end users how they can resize the text on any website. Widgets are short term, teaching is long term.

    Adding a text resize widget, just like the equally silly “print this page”, “bookmark this page”, “back to top”, and “tell a friend” stuff won’t kill anyone. But they all add what is, in my opinion, completely unnecessary clutter.

    so build it correctly the first time I guess.

    Which, as it involves using sensible default text sizes, units, and colour contrasts, reduces the number of people who will need to increase text size, thus reducing the need for a text resize widget ;-).

  20. Text size widgets as options are OK, I think, as long as they are just options. Some of them do look a bit out of place in a no-CSS, no-script, browser though, so such widgets should at least be designed so they only show up when they actually work.

    One-click rules. OK?

    I reserve my “one-click” action for the back button, since I see no point in exploring the many thousand variants found behind text resizing widgets all over the web.

    In practice I don’t click anywhere to resize anything, as my browsers are already preset with a (for me) suitable ‘minimum font size’ (and even a ‘maximum font size’ in one, in case it’s needed).
    Works wonders on sites where the author has a preference for tiny text, but, of course, some sites are so badly prepared that they break all over the place. That’s when it’s time to hit the back button.

  21. The only problem with using the browser to control text size is that it becomes a global issue. Make the text smaller and every site you visit has smaller text and vice versa. When sites enable the user to resize the text it’s a site-specific preference.

    That’s precisely the reason why per-site controls are a bad idea. The text size a person finds readable doesn’t drastically change just because they happen to go to another website. Users don’t want to fiddle with their settings every time they click on a link, they just want an appropriate font size to be used automatically. Designers using 1em/100% and users knowing how to adjust their font size achieves this. Nothing else does.

  22. I think eventually end-users will become more savvy about the browser options available to them.

    For instance, I see many people adjusting their monitor’s resolution to increase text size. Years ago, you probably wouldn’t have seen them doing that much.

    The tutorials are a nice addition and I they’ll definitely help guide the public to a better understanding of their web browser.

  23. I absolutely deplore the text-size widgets, and have long since argued against their use at work. Simply, the widgets are usually too small to be useful to the people who need them, and because the same generally applies to ever other site, if they DID need them they’d long since stopped squinting and either reduced the display resolution or discovered how to alter the text size the way they can on every other site. Not only that, but as other commenters have pointed out, such widgets are usually implemented only on the client side, and so fail if scripting is unavailable, or the browser isn’t mainstream, or doesn’t use CSS.

    I would, however, happily replace the widgets with a “Change text size” link at the top of pages which took people to a “How to” page of the kind you describe.

  24. Yes I think we’re pretty much on the same page there Roger - build right the first time :)

    I have to admit I’ve not only never made a site with a text resize widget but never used one. I have bad eyesight, a little anyway, and wear glasses. Often I come into the office without glasses though and to be frank if I go to a site I can’t read I just leave it. So be warned those who believe using tiny fonts is fine if you’re providing the widget - how would I find the widget?

    The feeling of not being able to read tiny text is a cross between claustrophobia and car sickness - you just need to get off that page asap.

  25. Thanks for posting this Roger. And for the record, the Ian posting above was not me - I thought perhaps you might have thought it was me … I almost did :-)

    I know that YouTube does some nasty compression on the video but made a concerted effort to ensure that the elements I was showing on screen were zoomed in enough so that they did not suffer as a result.

    I’d be interested in people’s recommendations for other video hosting sites - the main consideration for me is that it is easy for someone to embed on their page, almost without them having to think about it. But really I’m no expert on the relative benefits of the different video sites.

    One thing I was surprised about - on YouTube, when entering the meta data for the video, there was no ‘Transcript’ field, or even a URL of a transcript. That seems like a big oversight for YouTube, but maybe they’re not alone with that?

  26. September 24, 2007 by Roger Johansson (Author comment)

    Ian Lloyd:

    And for the record, the Ian posting above was not me - I thought perhaps you might have thought it was me

    Hehe, don’t worry, I did not think it was you. It wouldn’t have made any sense at all ;-).

    About video quality, could the application Rick Curran mentions in comment 7 be worth looking into? That doesn’t solve the hosting issue of course, but if the video is much smaller perhaps more people will be comfortable with hosting it on their own site.

  27. I have used Captivate in the past, didn’t realise it was radically different from any other screencast tool (I use SnapsProX for Mac and edit in iMovie, exporting to QuickTime and then let YouTube convert to Flash). If anything, I think I’d look at ways to convert the Quicktime to Flash myself. I’ll look into that as an option.

  28. September 24, 2007 by Stevie D

    Ian:

    I know my browser pretty much inside out, but I thank the designer who allows me to alter text size with a single click. How easy and convenient. How…usable.

    I know that with Control+Scroll I can resize the text size in whatever browser I’m using. Dead easy. If I enlarge text, it will stay enlarged as I browse over a number of sites. It will remember what size text I like to read for next time I’m browsing.

    Or I can scan around a page, outside the main content area that I’m reading to see if there are any [A] symbols that look like they might be resizers, and try them, only to find that they don’t enlarge the text enough, certainly forget what size I want when I go to another site and sometimes to another page, don’t remember for next time, etc…

    No. There is no need for text-resize widgets in a web page, just like there is no need for a print widget in a web page. Of course, the problem wouldn’t be half as bad if idiot designers didn’t specify microscopic text in the first place, and if everyone used decent browsers that allowed them to specify an absolute minimum size for text.

  29. Ohhh those evil flash sites. Death to rich media! ;)

    Seriously though, I’ve always had mixed feelings on text resize widgets. I guess it depends on the implementation.

  30. September 24, 2007 by RebekahGolden

    I’m in the middle of a site redesign that’s supposed to emphasize accessibility. I was walking through all the good things I would do during the initial meeting with suits when one of them said “oh! and do that resize text thing!” I tried to explain that browsers can do that and she said “well, I can never find it.” At this point I can put a bit of code in, make some adjustments to the css so the resize is clean and give her what she wants (with back-up pages with links to pages such as Ians to teach browser use to people with javascript disabled) or I can argue with the suit over something that in the end is negligible.

    My site will be accessible. My site will also have stupid widgets to please the suits.

  31. Hi,

    Great post. I agree sites should be accessible and also LIKE resize widgets. Whether designers like it or not browsers do not know the environment as well as us and we should therefore cater to their knowledge … and they look for resize widgets :)

    Peter.

  32. Great post. I think you absolutely nail the major issue when you talk about educating users being more vital a task than spoon feeding.

    Granted, as was noted above, it may be a question as to what is more ‘user friendly’ a quick button that increases text or a long winded (but educational) page about how to do it yourself. Maybe it will just come down to personal choice. Maybe we should offer both.

    Either way, I think that if we are going to put accessibility statements on sites (which few visitors read but many of us build for our sites) we might as well put some useful info into them.

  33. Interesting article. Thanks for the good read.

    This might sound crazy, but perhaps the browser vendors should place a text resize button near reload or back/forward instead of hiding it under View. The resizing controls also lack a standard approach in wording/placement… this probably makes it even more difficult to figure out. All in all, the controls are hidden and therefore ignored… so many of us think that throwing these controls on the page will help.

    I’d bet that even with designers who didn’t customize the font size (and went ahead and used defaults), this would still be an issue with a lot of sites.

    I haven’t gone back and seen what browsers did in the past (has this been done yet?).

  34. September 25, 2007 by Grant Broome

    I’ll join the minority here and say that the widgits are useful.

    I work with people with learning difficulties and mobility impairments who find these widgits useful. This debate seems to be cropping up everywhere at the moment.

    It almost seems to me that unless you have a certain type of disability you don’t really matter. I know that’s not really the case, but I do wonder sometimes.

  35. What’s wrong with one keyboard shortcut >(Cmd/Ctrl - +) that works everywhere?

    Well for one thing, it does different things in different browsers - consider Opera9/IE7’s whole-page-zoom vs IE6’s text-only-resize, plus Opera’s CTRL++ combination zooms everything a massive 100%!

    To be useful/reliable/dependable, simple usability enhancements like this should be standardised across browsers. If someone wants to add a whole-page zoom can they please use a unique key combination?

    Another risk of TR widgets is that should the less web-savvy user manage to find your TR widget, they may well develop an expectation that this is available on all sites, and waste time hunting through site interfaces for said tool.

    The same goes for the print button..

  36. Right then Grant, you and Lauke, in a boxing ring. Time out, ding ding! ;-)

  37. I don’t like duplicating functionality. I don’t need hundreds of ways to resize text.

    http://uxthoughts.blogspot.com/2007/09/scrap-unnecessary-widgets.html

  38. Developers cannot be held responsible for sites, other than their own, or the skill level of their sites visitors. Surely, as developers, our responsibility is to make our sites as accessible and easy to use as possible.

    I think the decision, to widget or not, can be made on a site by site basis, depending on the type of site and audience it attracts. I would imagine that 99% of this sites visitors are involved in web development? Therefore, you would hope that your visitors would know how to resize text, via the browser, and you can safely omit a widget. A site that attracts a more diverse set of visitors may on the other hand benefit from such a widget. If JavaScript is enabled in the browsers of 90%+ of a sites visitors then 90%+ could potentially benefit from one click text resizing. Users with certain motor difficulties would certainly benefit.

    I think clearly written help is a prerequisite that could benefit from the addition of video demonstrations - would they require a transcript?

    Provided we all build our sites using relative font sizing then resizing widgets have a fallback for those who do not have JavaScript enabled but benefit those who do.

    Ultimately these additions, just as with the “skip to content” anchors, are there to help certain visitors access the content on our sites more easily.

  39. October 24, 2007 by Vicki

    I thought this a great way to go until the video.

    On my old modem, which in the areas I’m designing websites, there are still many (broadband is a joke in Rural Australia) a video is just totally unaccessible!

    So a widget is better than a video but a good page with text information that they can use to widget to enlarge if needed is better IMO.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.