Joe Clark: @media 2005: Day 2

Zoom the Web:
The problem of giant fonts

Notes from a presentation given 2005.06.10 at the @media conference, London

See also: Day 1 & index

Today I’ll be talking about low-vision users. I’ll be introducing some concepts related to the use of giant fonts on the Web. I’m going to propose a few solutions that are rather untested as yet. That will give you some food for thought, and maybe a bit of a homework assignment. I’m hoping you can all come away from this conference with a new accessibililty technique you can try out on your own sites, because this is something that desperately needs a wider range of actual practice.

Topics

• Understanding low vision and the Web
• Fonts
• Screen magnifiers
• The (little-used) power of CSS

Not just for blind people anymore

• We aren’t making sites accessible just to blind people
• In fact, vision sometimes isn’t even a concern at all. Other disabilities are also important
• However, today we’ll talk about low vision or visual impairment rather than total blindness
• This group doesn’t use a screen reader or Braille display because they can still see enough of a computer screen to use a computer screen
• But they have their own needs when it comes to the visual presentation of a Web site

What’s the problem?

• The problem is pretty simple: The fonts on an ordinary Web page are too small for a low-vision person
• Now, you the low-vision person can compensate by making the fonts bigger in your browser...
• and you can also make your operating system’s fonts bigger, at least in Microsoft Windows and some versions of Linux
• You may also use software that magnifies the screen for you. That software isn’t just a glorified magnifying glass or loupe; it can show you just a little rectangle with continuously crawling text, for example
• Getting back to big fonts:
  In most cases, there are limits to how big you can zoom a Web page before it becomes unreadable:
  • The space between lines, called leading or linespacing or line-height, might not scale along with the fonts, so that lines of text will overlap
  • Your nice carefully-crafted layout may have boxes or table cells or divs that are too narrow to hold the text. Sometimes they’ll be too narrow to hold a single word – maybe not in English, but certainly in German or Finnish
  • Or all those structures might also be too short
  • The right-hand side of the Web page might zoom off the edge of the screen. Maybe you could scroll horizontally to find it, but one study shows that people do not do that. Here’s some research from Ginny Redish and Mary Theofanos, who tested low-vision users:

    Only three participants found the right column by mousing around the screen.... The others did not notice that there was a right column.... Users can miss items – even ones that are next to each other – when the screen is magnified.

What are we not talking about?

• This presentation is not about using pixel-sized fonts, but let’s cover that topic anyway
• You can use px as a unit of measurement in CSS. It means pixels and it is a relative unit of measurement by spec. It isn’t an absolute unit. The exact wording of the spec is as follows:

  Relative units are:

  • em: the ‘font-size’ of the relevant font
  • ex: the ‘x-height’ of the relevant font
  • px: pixels, relative to the viewing device

• px used to make sense as a unit of measurement until people started using monitors with different pixel densities. Suddenly a font that you specified as 12 px high looked very different indeed on different screens
• But the biggest problem with px-based fonts is Internet Explorer for Windows, or IE/Win, as the kool kidz call it
• Unless you turn off a preference setting that’s really hard to find, IE/Win cannot resize pixel-based fonts. And if you turn off that preference setting, there will be undesirable consequences at other sites
• In Web accessibility, people tend to jump on a few details and overgeneralize from them. One example is: “I ran my Web site through Bobby and it passed, so it must be accessible.” No, sorry, that isn’t usually true. Another is: “You can’t use px-based fonts because they’re inaccessible.” No, sorry, that isn’t usually true, either
• Today, I want everyone in the room to take a vow never to say anything like that ever again. Do not tell people, or tell yourself, or even think that there’s something inherently wrong with pixel-based fonts. What there’s something inherently wrong with is Internet Explorer for Windows
• In fact, you the developer don’t have to use px fonts at all, and you the user don’t have to use Internet Explorer for Windows, either. Every other graphical browser in use today – including Internet Explorer for Macintosh – can resize fonts in any unit of measurement
• If you really need your fonts to have a height of a certain number of pixels in IE/Win, you can use some other techniques that have been well tested. But if you do that, you’re not being a very good developer, because you’re ignoring the fact that different screens have different pixel densities and we can override your settings anyway
• You might also include a little widget on your page that resizes the fonts irrespective of the browser. But sometimes even there the largest size isn’t big enough

Who gets the last word?

• This is a good time to recap some basic facts about CSS design
• We who work in Web standards want you to learn to use nice clean structural markup. That means really good HTML. Then we want you to take that HTML and make it look whatever way you want using CSS
• CSS stands for Cascading Stylesheets. And the “cascading” part is very important
• Here is what happens:
  • You the developer link a stylesheet to your document. You suggest how the document should look
  • The browser interprets that stylesheet, sometimes incorrectly. But the browser also has its own built-in stylesheet. There is no such thing as viewing a Web page in a graphical browser “with CSS turned off” or “without styles.” You’re just looking at the browser’s internal CSS in that case
  • But then you the user may override even what the browser gives you. You can do this through preference settings in your browser. Or, if you want to go all the way, you can set up your own “user CSS,” but that’s impossibly complicated and error-prone, so nobody does it
• Nonetheless, the world of CSS design is a world of suggestions. I’m the author and I suggest this CSS; then the browser uses that CSS, in its entirety or only in part; and then the user opts into or out of the browser’s CSS display
• So the user has final say, but it’s too difficult for real people to exercise that right. That’s where you come in

• We hire you to build accessible Web sites because you have talent, or at least because you’re learning and picking up that talent as you go
• It’s easier for you to foresee and accommodate the needs of people with disabilities than it is for people with disabilities to hack and reverse-engineer your site
• You already know that your audience includes disabled people, and, if you’re at a conference like this, you’re already improving your development practices to accommodate them
• So let’s go one step further: Let’s take your existing beautiful site design and completely destroy it

Introducing the zoom layout

• The whole trend of the last five years in standards-compliant Web design is to work within constraints
• We want you to use valid and semantic markup, or something very close to it
• But we also want you to create nice-looking, functional, and indeed accessible sites
• Some people have better taste than others, and some have more skill than others
  • Here’s a slide of Doug Bowman’s site on the top, and my site on the bottm
• Nonetheless, what we’re looking for is the whole shebang – good markup, good design, good usability and accessibility
• Something else we’ve learned along the way is not to get upset when our beautiful designs are experienced in a different way. That’s why we use good markup – so our sites can be reused and reinterpreted
• As far as a visual designer is concerned, this is all fine and dandy when you’re dealing with screen-reader users, because the visual design of your page makes no difference to that group
• But when you’re dealing with low-vision people, your site still needs a graphic design. It’s just that the design is probably going to be completely different from what you intend for the user with normal vision
• What I’m talking about here is a new trend in Web design – not just doing things like making a nice visual design for nondisabled people, and using good markup that a totally-blind person could reuse, and also not just providing a print stylesheet so the page looks OK when you print it out. I’m also talking about including an entirely new design that works fine with really big fonts and huge screen magnification
• I call this the zoom layout and pretty much nobody is doing it now. it’s a bit avant-garde
• It all started with an article I wrote for Zeldman on the topic: “Big, Stark & Chunky.” Look it up online at AListApart.com
• So now I’ll talk about what we do and don’t know about zoom layouts, and look at a few examples

Steps for a zoom layout

• Multicolumn to single column
• Small fonts to big fonts
• Simplify and prioritize

• In a CSS layout, you use divs to specify and position the components of your page – things like main navigation, a search box, main content, sidebars, and footers
• To make a zoom layout, all we have to do is use a different CSS to reorder those components
• Here are two examples from the Zeldman article, and in fact I think they’re still the only two in existence:
  • Cameron Adams of Melbourne
  • Sergio Villareal of Guadalajara
• Now, as part of my suggested technique, you the designer simply estimate how big the font should be – maybe 24 px or 125% or some other figure
• And if you’re using a decent browser, you the site visitor can resize even these fonts if they’re too big or too small
• You the designer also pick the font. I recommend against using Arial and Comic Sans at all times, since those aren’t really fonts, but any other reasonable font will probably look OK, since the type is so big you’ve got lots of pixels to use to form each character
• Then you dispassionately look at the content of your page and decide what’s important. You want as little navigation as possible at the top of the page, which may require pruning your navigation a bit. CSS and HTML are not really set up to do that. You also want search at the top of the page. But above all, you want your entire page to be a single column.
• What you end up doing is deconstructing your page so that only really important things are at the very top, though people can nonetheless scroll past them
• Because you’re just using CSS for this task and either not touching the markup at all or touching it very lightly, you don’t run the risk of having a nice graphical page that is constantly updated and a single-column page that is several revisions out of date
  • The zoom layout is not like a ghettoized text-only page. It remains as fresh and updated as the regular page
• And actually, the zoom-layout concept is identical in every respect – except for font size and colour – to the task of making Web sites work on small-screen devices like shoephones and PalmPilots

Problems?

Problems? Yeah, we got problems.

• First, on your normal default homepage, which is going to be too small and cluttered for a low-vision person, how and where do you indicate that a zoom layout is available?
  • Most sites read from left to right. Whatever you put on the right-hand side can be important (like a search box), but it’s also usually not the main content
  • That’s where you’d probably put a control to turn on a zoom layout.
  • But because it’s on the right-hand side of the screen, it might have zoomed all the way off the edge of the monitor. The people you most want to find it may never see it
  • Even after thinking about this for several months I don’t have a good solution to the problem. We’re going to need a few sites that try it out different ways in order to come up with real-world experience
  • I did, however, suggest a hack you could use so that a device could automatically select a zoom layout: Add rev="zoom" to your stylesheet declaration, like so:
  • There isn’t a device on the planet that recognizes that hack yet. It’s a bit theoretical
• Next, how do you the designer select page colours? We have a conflict here between low-vision people, who generally prefer light type on a dark background, and people with certain learning disabilities, who prefer dark type on a pale background
• Possibly the way to handle this is to have several different options, though that makes things more complex, and for the learning-disabled population you’re trying to make things simpler
• Another option is to provide an entire screen where people may set up their own preferences. A preferences screen like this sounds good in theory, but maybe it’s too much work for the visitor who’s only going to look at your site once or twice

Er... is that it?

• So: You came all this way and all you got was a hypothetical technique that almost nobody uses
• But from such beginnings are empires born, or at least standard practices
• Instead of presuming to know everything and stand up here and teach it to you, I’m suggesting you look at the concept of zoom layouts as an opportunity for audience participation here at @media
• Since we need real-world experience with this technique, I’m suggesting you take the technique away and modify it to meet the needs of your own sites
• Then make sure to write it up online
• We can use your contributions as the beginning of a series of user tests of this new technique. Will it work? Or will it work only for some low-vision people but crash and burn for dyslexics or other people with learning disabilities?
• Your homework assignment from @media, then, is to put theory into practice. Let us know how it works out

Follow-up

I now have a zoom layouts page that I really need to update more.