Navigation

Customise presentation

Service menu

Language versions

Search



Content

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 GuardianBehaves quite well; horizontal menus wrap but stay usableContainers 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 NewsOKContainers grow with text, but the text next to the top news item gets clippedOK, flush-right top categories and search not in default viewport
The IndependentMinor clipping of text in main horizontal menuContainers grow with textOK, several horizontal menus across the top do not fit into viewport)
The New York TimesSome clipping of left columm categories and longer words in headlinesContainers grow with text but text becomes more difficult to read due to narrow columns, with an average of just three words per lineOK, login and service menu outside viewport
TagesschauSome minor overlaps in service menu, some minor clipping of left menu itemsContainers grow with textOK – just; top menu does not fit into viewport
Dagens NyheterMain menu wraps but stays more or less usableContainers 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 ZeitungMain 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 ZeitungContent category pull-down menus no longer useable or hard to use; several items disappearContainers grow with textText column slightly clipped, several horizontal menus across the top do not fit into viewport
Fox NewsText scaling leads to overlaps, top menu wraps and obscures search boxContainers grow with textOK apart from several horizontal menus across the top
Süddeutsche ZeitungSeveral menu items get clipped / disappearContainers grow with text, with some minor clipping in marginal columnText column slightly clipped, several horizontal menus across the top do not fit into viewport
Huffington PostTop menu items become unreadableContainers grow with textOK apart from top full-width photograph and several horizontal menus across the top
Jyllands PostenOne main horizontal menu disappears entirelySome clipping and text overlap in narrower columns; containers grow with textOK apart from several horizontal menus across the top
Corriere Della Sera“Informazione locale” menu disappears entirely; main menu wraps but stays usableContainers grow with text, very few problems in narrower boxesTop article clipped, rest OK apart from several horizontal menus across the top
Le FigaroMain menu items get clipped / disappears, tap menu wraps with overlapsMost containers grow with textOK 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 RundschauMenu items get severly clipped or wrap, hard to useContent boxes in top sections clip text. Other containers grow with textOK apart from several horizontal menus across the top
Le MondeMain menu pulldowns become partly weird / hard to use with text overlapping or going beyond box boundariesText in many containers gets clipped, other containers grow with textTop article clipped, rest OK apart from horizontal menu at top
L'HumanitéNo horizontal menu to speak ofSevere text clipping and overlap with unreadable text in several areas, tab panel sections clip items on the right: only some containers grow with textWide column does not fit into viewport
CNNMain menu items with text overlaps/ clippingStarting from the very first increment of text-only resizing, clipping occurs: containers do not grow with textOK apart from horizontal menu at top
La StampaMenus wrap but are not clippedText in top teaser boxes gets clipped, severe clipping and overlaps in many of the narrow columnsOK apart from horizontal menu at top, but top third of viewport taken up by fixed-position text
The TimesMenus scale OKSerious clipping of text in most containersOK, 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.

Comments

Detlev Fischer

www.testkreis.de

Wed. 09.05.2012
11:43

Well, many others are missing, too :-) This was just a grab sample of online papers to get a rough idea how well text resizing is supported - it's also by no means a detailed accessibility review of these sites.

Philipp

Tue. 05.07.2011
15:40

ORF.at, the most important site in Austria, is missing ;-)