The Only FedRAMP Certified Digital Accessibility Platform - learn more

Overview

Text resizing allows users who are visually impaired to increase the size of content without assistive technology while maintaining access to and functionality of the content. Providing a method to resize text will allow web content to meet WCAG 2.0 AA Guideline 1.4.4. Guideline 1.4.4 requires that text can be resized up to 200% of the original size. This guideline does not indicate a specific method for providing this resizing nor is a “best” approach specified.

In general, there are three methods to provide text resizing capabilities on a website or web application.

The first method is to use relative text sizes, designing the page such that content reflows appropriately when the base text size is changed using a browser’s text resize feature. In this method, text resizing is a feature of the browser and the website or web application does not need to provide any specific functions to allow the user to change font size other than defining fonts in a resizable unit, typically em, percentages (%) or keywords (medium, etc.).

The second method is to provide a mechanism on screen that allows users to adjust text size between specific, explicitly set sizes. This is generally provided in the interface through icons that feature either via (i) different size letters present on a page or (ii) plus or minus arrows. Both of these provisions allow users to increment and decrement the site or application’s current font size settings between a set of predefined font sizes. This approach is often implemented using a set of specific, predefined style sheets that a user moves between and this preference is “remembered” throughout the session by setting a cookie to carry their preference as they move throughout the system.

The third method is to rely on the browser’s zoom feature to provide font resizing capabilities. WCAG 2.0 Guideline 1.4.4, however, stipulates that the success criteria cannot be met with a browser’s zoom feature if one cannot guarantee which browser is going to be used. So while this option is discussed in the Browser Zoom Method below, unless it can be guaranteed that a user is utilizing a particular browser, text resizing must be provided either via the first or second method. The difference between the first method and this one is that essentially this method relies entirely on the capabilities of the browser.

General Text Resizing Considerations

Providing for text enlargement support requires that both text and layout handle font sizes appropriately. In general, developers must allow room for text to enlarge without a container cutting off the text or the text overflowing into another page container. Layouts that mix explicit and relative sizing will often find that – upon resizing – text overflows the container and overlaps other content on the screen. This often occurs because enlarged text wraps onto additional lines which are not originally planned for in the page layout. Thus, to ensure pages properly resize, both text elements and containing elements must support resizing appropriately.

Creating one layout that appears correctly in multiple browsers and at different text sizes often takes significant effort and tweaking. Ideally, a “liquid” approach would be used that ensures layout containers reflow based on screen size and base text size. Liquid based approaches typically use the CSS ‘float’ property to create multiple columns of content that can be reflowed vertically when text sizes increase. This approach, however, typically does not include specific units or positioning and thus it is often challenging to maintain a precise look across different browsers and differently sized browser windows.

Images of text will not resize in browsers that only resize text. Thus, developers should ensure that content that is not essential to be “images of text” be made text. As a general rule across all approaches, images of text should be converted into text as resizing images may become pixelated or fail to communicate information accurately. WCAG 2.0 AA Guideline 1.4.5 addresses this issue and thus is related to the practice of text resizing for users.

Finally, whenever possible, developers should ensure that form controls that contain text conform to the relative size of a page. In general, this will require that form elements also specify font-size CSS properties that conform to the size of other fonts used on the page.

Relative Text Size Method

The Relative Text Size Method focuses on the use of relative units – em units, keywords, or percent (%) – to specify text size. This allows the text on the page to resize and scale as a user changes the base font size of the page using the browser font size controls.

Benefits

  • User does not have to learn where the on-page controls are to adjust his/her settings
  • User font size settings can be set once, globally, in a browser and need not be set on a per site basis
  • Generally, only a single style sheet is required
  • Content may automatically reflow when shown on limited size displays and portable devices
  • Content may provide the ability to resize beyond increments specified using Explicit Text Size Method

Detriments

  • Difficult to implement and maintain a consistent look and feel across browsers
  • Font resizing will often cause page to reflow in difficult to read ways, especially near resizing limit of 200%
  • % units are relative to the parent container and the same element at different points in the document may have significantly different sizes based on their parent container

Explicit Text Size Method

The Explicit Text Size Method provides a control within the web page or application that allows a user to move between a set of pre-defined size settings. In general, this is often provided via on screen controls placed in the top right hand corner of the page that clearly indicate their purpose to increase or decrease text size. When this approach is used, several values should be available to incrementally change the text size up to a set amount, which is recommended to be at least the WCAG 2.0 Guidelines’ 200% sizing requirement.

Benefits

  • Provides a high degree of control over page layout and settings
  • User does not need to be aware of the browser’s zoom and text size settings
  • Provides support for a large number of browsers since it does not rely on base font size of a given browser
  • Works consistently across all browser zoom features
  • Broadcasts commitment to providing multiple font sizes for pages

Detriments

  • Requires users to set font size on a per site basis
  • Requires multiple style sheets or logic for creating style sheets dynamically

Browser Zoom Method

Zooming allows content to be enlarged uniformly at the current aspect within the browser and thus both the containing element and container will enlarge uniformly, often even if fixed font and container sizes are used. Internet Explorer, Opera, and Firefox 3 provide a zoom feature. The zoom feature in Firefox 3 will increase the text and image size of content and attempt to reflow the content when relative or fixed units are used on the page. The zoom feature in Internet Explorer and Opera will only magnify the page content, regardless of whether relative text sizes are used.

Benefits

  • Easier approach as the magnification method is more forgiving of fixed text sizes
  • Resizing is uniform across all elements
  • Containers need not provide for scaling of individual elements
  • Form control size will increase with the level of zoom

Detriments

  • Unable to rely on this approach alone if it cannot guarantee that the user will have access to a user agent that supports zooming
  • Firefox 2 and IE 6 do not support zooming if this text sizing approach is used; support will need to be provided for text enlargement in addition to zooming
  • When content is zoomed in browsers such as IE 7 and Opera, horizontal scrollbars are almost added, often requiring the user to scroll horizontally and vertically to access page content

User Agents That Support Zoom

Browser Text Size Changes Zoom Feature
Internet Explorer 6 Yes No
Internet Explorer 7 Yes Yes, no reflow
Firefox 2 Yes including fixed size fonts No
Firefox 3 Yes Yes, with reflow of text and does not keep uniform magnification
Opera 9 Limited Yes, no reflow

Note – Reflow is the practice of reflowing page elements to accommodate larger text sizes without adding horizontal scrollbars. Reflow typically results in the increased height of elements containing text and allows text content to wrap lines.

Conclusion

The WCAG 2.0 requirements are indifferent on the method of implementing font resizing in pages as long as the implementation provides the ability to resize the base font size of the page up to a maximum of 200%. Given this, the choice to implement a particular method of font resizing can be made based on the approach that is least costly and time consuming for a given site.

In general, SSB Bart Group has found that the cost to implement the Relative Text Size Method is significantly greater than the cost to implement the Explicit Text Size Method. As a result, SSB’s general guidance is to use a set of fixed width fonts with the provision of a user controlled method for moving between these specific font sizes. This approach has the added benefit of explicitly telling the user, as part of the page content, that attention has been paid to providing different font sizes and that the user can easily move between them. Further, this allows for a high degree of control over layout across all pages using a particular set of templates while providing for continuing WCAG conformance.

In cases where a significant effort has already gone into implementing resizable font sizes as part of the core templates of the site, a hybrid approach is likely to be viable in implementing font resizing that supports both browser based size specification and onscreen controls. In this approach, relative font sizes are used to define the basic sizing and spacing on the page using the ems size unit. The ems size unit is defined relative to a base font size on the page which can be set in the CSS definition for the BODY element of the HTML document. In general, this would be provided via a CSS declaration of the form BODY {font-size:62.5%}, which by default would set the base font size for a page to 62.5% of the browser’s current font size. As the user increments or decrements the page control to move between font sizes, this base font definition would be updated. This would provide support both for user defined browser based sizing and an onscreen control for resizing text content.

Moving forward, the trend for browsers seems to be to default to changing the zoom level of the browser when commands are used to increase or decrease the size of the text. The zoom features will work equally effectively with relative and explicit sizing approaches, but consistency of presentation across browsers is easier to ensure utilizing the Explicit Text Size Method.