Articles

Tests
The case for text-only resizing: a look at twenty online news sites

04.07.2011

One requirement of WCAG 2.0 is that text can be resized by 200% without the loss of content or functionality. In this article, we look at twenty online news portals and online newspapers to check how well text resizing is currently supported.

A quick glance at WCAG 2.0 suggests that the Success Criterion 1.4.4 (Resize text) can be met without any attention on the part of the designer, simply by relying on browsers' built-in zoom function. In the separate article Text resizing: Why page zoom is not good enough, we explain why supporting text-only resizing is still necessary.

A quick check on major online news sites

Reading online is very often reading the news. So let's have a quick run through a number of popular online news sites. We just look at the start page and only check whether text resizing works well. (In addition, we check whether content columns fit into a 1024px wide window when applying a page zoom of 200%.) This means that we do not check for other WCAG 2.0 success criteria: in other words, this article does not imply that the news sites investigated, including those that scale well, are generally accessible. This would need a more thorough test.

This quick check was carried out on a Mac (OS X 10.5.8) with Firefox 3.6. Testing on a PC may reveal slightly different results.

The choice of online news sites was made more or less at random, focusing on large, well established providers in North America and Europe. This is the type of check that can be done in one afternoon. It does not claim exhaustive coverage, it is just a grab sample to give some idea how well text resizing is supported by the current crop of news sites.

All of the twenty sites investigated keep the basic grid layout in place when text is resized. While in most of the cases, containers expand downwards when text is enlarged, there is not one site that has not at least some minor problems with clipping, truncating or obscuring text.

Checking for text-only scaling (150%) and page zoom (200%)

One option to meet WCAG 2.0 success criterion 1.4.4 (Resize text) is to allow scaling of text-only to 200%. This is quite a massive jump: while the text width doubles, the surface area of text grows fourfold. We decided to be more modest and magnify text by just 150% (selecting “zoom text only”, then pressing STR +, or Command + on the Mac, four times).

As a second test, we applied 200% page zoom magnification (deselecting “zoom text only”, pressing STR +, or Command + on the Mac, six times).

Here are some results summarising the most important issues with resizing text.

Do menus scale gracefully when using text-only zoom (150%)?

A big problem are the navigation menus which in most cases run horizontally across the top of the page. Often, there are several of them. If well done, (and this is a big if), these horizontal menus linking to different sections of the news site stay available when resizing text-only by 150%, even if they wrap onto a new line. In many cases, however, using text zoom caused horizontal menus to be clipped or wrapped so that menu items disappear entirely or sit above other content. Only in a few cases, the horizontal menu has enough space to extend (BBC, New York Times, The Times) or wraps gracefully and remains usable in magnified state (Guardian, Tagesschau, Dagens Nyheter).

Do containers expand when using text-only zoom (150%)?

The good news is that most newspapers allow text to rewrap and expand downwards the boxes that contain it. Only four newspapers had all or many containers that do not grow and clip text. In most cases, however, there are some problems especially with narrower boxes where some clipping or overlapping occurs. Even the BBC clips text in the top news story teaser at the relatively modest magnification level of 150%.

Do columns fit into the viewport width when using page zoom (200%)?

When using page zoom, columns fit into the reference viewport size (1024px width) at 200% magnification with the exception of a quarter of the papers investigated. But in all of the sites investigated, using the navigation menus that run across the top of the page requires horizontal scrolling.

According to WCAG 2.0, it is perfectly acceptable to have to scroll horizontally to read different columns, and presumably scrolling is OK for navigation menus. But the annoying horizontal scrolling which is inevitable when using page zoom means a significant loss of usability. The front page loses its function as an integrated view of all main news at a glance; instead, one has to take its contents column by column or frequently scroll left and right to check for content outside the viewport. Not a good reading experience! This is why text-only resizing remains valuable.

The results

The following tables provide summary results for the twenty sites that we have checked. Sites can be roughly grouped in three categories:

• Sites with good text resizing, but some problems (6)
• Sites where text resizing works in general, but there are more problems (8)
• Sites with no or bad support of text-only resizing (6)

Six sites with good text resizing (but some problems)

	Menus (text resized 150%)	Containers (text resized 150%)	Content column width (page zoom 200%)
The Guardian	Behaves quite well; horizontal menus wrap but stay usable	Containers grow with text. However, at higher zoom levels, the page suddenly breaks, all content appears in a right narrow column and clipped, unusable!	OK, several horizontal menus across the top do not fit into viewport
BBC News	OK	Containers grow with text, but the text next to the top news item gets clipped	OK, flush-right top categories and search not in default viewport
The Independent	Minor clipping of text in main horizontal menu	Containers grow with text	OK, several horizontal menus across the top do not fit into viewport)
The New York Times	Some clipping of left columm categories and longer words in headlines	Containers grow with text but text becomes more difficult to read due to narrow columns, with an average of just three words per line	OK, login and service menu outside viewport
Tagesschau	Some minor overlaps in service menu, some minor clipping of left menu items	Containers grow with text	OK – just; top menu does not fit into viewport
Dagens Nyheter	Main menu wraps but stays more or less usable	Containers grow with text, some minor clipping in top row and in narrow columns (TV Guide)	OK, several horizontal menus across the top do not fit into viewport

Eight sites where text resizing works in general (but more problems)

	Menus (text resized 150%)	Containers (text resized 150%)	Content column width (page zoom 200%)
Neue Züricher Zeitung	Main menu with text overlaps, making some pulldown menu items inaccessible (blogs)	Containers grow with text, some clipping in narrower right column (boxes with tab panels)	Text column slightly clipped, several horizontal menus across the top do not fit into viewport
Frankfurter Allgemeine Zeitung	Content category pull-down menus no longer useable or hard to use; several items disappear	Containers grow with text	Text column slightly clipped, several horizontal menus across the top do not fit into viewport
Fox News	Text scaling leads to overlaps, top menu wraps and obscures search box	Containers grow with text	OK apart from several horizontal menus across the top
Süddeutsche Zeitung	Several menu items get clipped / disappear	Containers grow with text, with some minor clipping in marginal column	Text column slightly clipped, several horizontal menus across the top do not fit into viewport
Huffington Post	Top menu items become unreadable	Containers grow with text	OK apart from top full-width photograph and several horizontal menus across the top
Jyllands Posten	One main horizontal menu disappears entirely	Some clipping and text overlap in narrower columns; containers grow with text	OK apart from several horizontal menus across the top
Corriere Della Sera	“Informazione locale” menu disappears entirely; main menu wraps but stays usable	Containers grow with text, very few problems in narrower boxes	Top article clipped, rest OK apart from several horizontal menus across the top
Le Figaro	Main menu items get clipped / disappears, tap menu wraps with overlaps	Most containers grow with text	OK apart from several horizontal menus across the top; one fifth of screen real estate wasted by fixed-position text at the top

Six sites with no or bad support of text-only resizing

	Menus (text resized 150%)	Containers (text resized 150%)	Content column width (page zoom 200%)
Frankfurter Rundschau	Menu items get severly clipped or wrap, hard to use	Content boxes in top sections clip text. Other containers grow with text	OK apart from several horizontal menus across the top
Le Monde	Main menu pulldowns become partly weird / hard to use with text overlapping or going beyond box boundaries	Text in many containers gets clipped, other containers grow with text	Top article clipped, rest OK apart from horizontal menu at top
L'Humanité	No horizontal menu to speak of	Severe text clipping and overlap with unreadable text in several areas, tab panel sections clip items on the right: only some containers grow with text	Wide column does not fit into viewport
CNN	Main menu items with text overlaps/ clipping	Starting from the very first increment of text-only resizing, clipping occurs: containers do not grow with text	OK apart from horizontal menu at top
La Stampa	Menus wrap but are not clipped	Text in top teaser boxes gets clipped, severe clipping and overlaps in many of the narrow columns	OK apart from horizontal menu at top, but top third of viewport taken up by fixed-position text
The Times	Menus scale OK	Serious clipping of text in most containers	OK, apart from horizontal menu at top

Conclusion

On many news sites using narrow columns, the requirement for a 200% increase of text size will be hard to meet — as we have seen, even the much more modest increase of 150% often causes problems especially for horizontal menus and narrower columns.

WCAG 2.0 appears to offer the option to meet SC 1.4.4 with page zoom only. Looking at "How to meet 1.4.4" alone, one could conclude that the extra effort of making pages work with text-only scaling is unneccessary. As we have seen, Failure F69 comes to the rescue: Clipping, truncating and obscuring content fails Success Criterion 1.4.4.

Fortunately, most online newspapers are in any case aware of the value of keeping the basic grid intact and in the viewport when users resize text only. Of twenty newspapers, however, only six could be said to handle text-only scaling fairly well.