Printed from www.bltt.org
You are viewing the old version of this website. Visit the new site with updated content at www.charliedanger.com

Magnification of Web Pages

Reading the small fonts and seeing images on web pages has always been a bit of an issue for people with low vision. This has becoming an increasingly significant issue as computer screen resolutions have been rising, making the fonts smaller than the web authors intended.

Text Size

The ability to change the text size is available on all the major web browsers. This can be accomplished through a menu or using a shortcut key (Internet Explorer 7's text view option can only be accessed through the menu)

  Increase Text Size Decrease Text Size Reset Text Size
Internet Explorer 7 n/a n/a n/a
Firefox 2 Ctrl and + Ctrl and - Ctrl and 0

 

Extract from Wikipedia using Normal (Medium) Text Size
An extract from the popular Wikipedia online encyclopeadia shown using the 'normal' Medium Text Size.
Extract from Wikipedia using Large Text Size
A screenshot of the same article shown with Large Text Size selected. Notice that the layout has changed slightly to allow the increased font sizes.
Extract from Wikipedia using Largest Text Size
This screenshot shows the same article with Internet Explorer's Largest font setting. Notice that the images are not being magnified in any way.

Limitations

Not all webpages automatically alter the layout to adjust to the larger fonts, making large areas of the page unreadable. The following example is taken from a popular website that sells computers and other high-tech items:

A snippet of a webpage using Medium Font size

Normal (medium) Text Size

A snippet of a webpage using Large Font size

Large Text Size

Many websites are written in such a way to make them completely ignore any text size preference indicated by the end-user. The following BBC webpage is completely unaffected by my changes in text size:

BBC Click website shown with Normal (Medium) Text Size

Normal (medium) Text Size

BBC Click website shown with Largest Text Size

Largest Text Size

Page Zoom

The new Page Zoom feature was introduced with Microsoft's latest browser, Internet Explorer 7. A similar feature is also available as a free add-on to the popular FireFox 2 browser.

  Increase Zoom Decrease Zoom Reset Zoom
Internet Explorer 7 Ctrl and + Ctrl and - Ctrl and 0
Firefox with free Zoom ALT and + ALT and - ALT and 0

 

Internet Explorer 7

An extract from wikipedia shown at 100% Page Zoom
This screenshot shows the above wikipedia article in Internet Explorer at the standard Page Zoom (100%).
An extract from wikipedia shown at 125% Page Zoom
This screenshot shows the same page at a Page Zoom of 125%. Notice that some of article is disappearing behind the right side of the browser. In order to see this we would need to use the horizontal scroll bar: not the easiest way of navigating a web page.
An extract from wikipedia shown at 150% Page Zoom
In this screenshot (Page Zoom 150%) we can see that we have lost a large portion of the article behind the right edge of Internet Explorer. Notice that the images and the layout are magnifying at the same time as the text.

Firefox 2 with PageZoom v0.3.3

Although Firefox is my preferred browser of the two it does unfortunately lose out when it comes to web page magnification. A Page Zoom feature is not included with the program so the free PageZoom add-on External Link needs to be downloaded first.

An extract from wikipedia shown at 100% Page Zoom
Another screenshot of the same wikipedia article this time shown on Firefox at 100%.
An extract from wikipedia shown at 120% Page Zoom
Firefox zooms in 20% at a time. Here is the article shown at 120% zoom. Notice that Firefox is keeping the page within the right border of the browser. Consequently no horizontal scrolling is required to read the article.
An extract from wikipedia shown at 140% Page Zoom
This is the article shown at 140% magnification. The text and the graphics have both enlarged but without disappearing behind the edge of the window. Notice that the Wikipedia logo has not increased in size at all. This is because it is a background image and these unfortunately do not magnify.

Firefox's feature of keeping everything within the window certainly seems to give it the edge, even if it is unable to magnify some images on the page. However on some sites Firefox's attempts to keep everything in view can have a disastrous effect on the layout.

Here's the BBC Click website again. You can see that the Firefox version starts losing its layout, making the menus overlap the other content. The close-up also shows that IE7 smooths the images as it resizes while the ones in firefox can become quite pixellated.

IE7 at normal viewing

IE7 @ 100%

IE7 at 125%

IE7 @ 125%

IE7 at 150%

IE7 @ 150%

IE7 at 150% Close-up

IE7 @ 150% Close-up

 

FF2 @ 100%

Firefox at 120%

FF2 @ 120%

Firefox at 140%

FF2 @ 140%

Firefox at 140% close-up showing pixellation and overlapping components

FF2 @ 140% Close-up showing pixellation and overlapping components

Where's Opera?

The Opera browser has long had a page zoom feature built into it. I haven't reviewed it here yet due to time constraints but hopefully one day I will. Keep an eye on my blog for any updates.

Conclusion

Many users will find the Page Zoom features of both the major browsers an improvement over the limitations involved with adjusting the Text Size only. But it seems to me that we have still got a way to go before all visually impaired users have a practical way to access small text and images on the Internet.

Horizontal scrolling in IE7, for example, makes reading pages very difficult and I'm sure that many users will continue to use the traditional Text Size feature because of this. IE7 could improve access by implementing a grab-and-drag pointer as found in Adobe Reader and some other software. At least IE7 smooths bitmaps (although sometimes to such an extent that text becomes unreadable).

Firefox fails by providing blocky images. The use of bitmap-based graphics that pixellate when resized, rather than vector-based images that always resize smoothly, is a major hurdle. Hopefully in the future this may be less of an issue as the display provided by any screen will lose its relationship with the pixels used to display it, creating fully scalable images. This has already been partially implemented into the Microsoft Vista operating system.

At the end of the day the visual accessibility of a page is determined by the author more than the browser. The more content that he or she tries to squeeze onto a single page the harder it is going to be for many people with low vision to access. Spreading content out over more pages makes sites more difficult to navigate and slower to use. Innovation is needed and fortunately web designers are coming up with new exciting ways of presenting their content all the time.

Downloads

All the software mentioned above is free!