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.
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.
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.
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).
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%.
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 following tables provide summary results for the twenty sites that we have checked. Sites can be roughly grouped in three categories:
| 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 |
| 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 |
| 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 |
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.
© 2019 DIAS GmbH | Imprint | Accessibility | Privacy Policy
