Content resizing

Must

Users must be able to control font sizing and user interface (UI) scaling.

Description

All users benefit when they can adapt the size of content to see and read it. This may be a constant or temporary adaption due, for example, to screen size, screen glare, or vision impairment.

Ensure that content responds to platform native text resizing, and that scaling (or "zoom") is supported.

Users who magnify or zoom in on content only see part of the screen. Try to keep on-screen changes close to the point of interaction. For example, if a user completes an input field incorrectly add a visual cue above, below or inside the field, rather than out to the side.

IOS

iOS settings provide a means for users to enlarge text and increase system level zoom. As an additional feature, apps may provide font switchers, gradients, and other settings to facilitate easier reading. This is useful in apps that contain a lot of text.

ANDROID

Android settings provide a means for users to enlarge text and increase system level zoom. As an additional feature, apps may provide font switchers, gradients and other settings to facilitate easier reading. This is useful in apps that contain a lot of text.

Android example

When specifying text size ideally use scale-independent pixels:

<TextView android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textSize="20sp" />                        

HTML

Using relative size units helps to ensure content is responsive to screen size and scaling ("zoom") without becoming unavailable or cut-off.

Key recommendations include:

  1. Ensure the viewport meta tag is set to permit scaling;
  2. Do not disable horizontal or vertical scrolling;
  3. Support font resizing by using relative size units.

HTML example

Do not disable user scaling:

<meta name="viewport" content="width=device-width, initial-scale=1.0">                        

Disable scaling and/or scrollbars:

<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;">

<style>
body {
	overflow: hidden;
}
</style>

<iframe scrolling="no"></iframe>                        

TESTING

Most devices support pinch-zoom, or the browser has a Zoom in/out setting. Most devices and some browsers also have a way to adjust the default text size within the settings.

Procedures
  1. Open the web page or activate the app.
  2. Verify that UI scaling ("zoom") is not disabled.
  3. Verify that content can still be accessed when scaled up ("zoom in").
  4. Change the device default text size.
  5. Verify text resizes and properly reflows on the page/screen.
  6. Verify that scrolling is not disabled.
Results

The following checks are all true:

  1. It is possible to change the UI scale without losing access to content.
  2. The default text size is respected.
  3. Content properly reflows and scrolls as required when resized.