Content resizing must

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.

Use a generous base font size that will be suitable for most users. Ensure content responds to platform native text resizing, and/or 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

Users may zoom/enlarge content using the zoom feature within iOS, but this only permits users to zoom specific areas of a screen to be enlarged at any one time. To allow the user to resize an application’s text size, use Dynamic Type for supported user interface components, such as UILabel and UITextView.

iOS Example (Objective-C)

UIFont *myHeaderText = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];

UIFont *myBodyText = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

---

Android

Page zooming is handled natively through Android’s magnification gestures. However, this only allows for specific areas of the page to be zoomed at any one time. Hence, use relative text units (sp, or scale-independent pixels) to support Android’s built-in text resizing features.

Android Pass Example

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

---

HTML

Use relative units (ems) to specify font and container sizes. Take a responsive design approach, whereby the layout of the page will adapt depending on the size of a device’s screen.

Avoid applying maximum-scale=1.0 to the page’s meta element, as this prevents a user from using the pinch-to-zoom gesture (although note that, from iOS10 onwards, a user will still be able to use pinch-to-zoom even if this attribute is applied). The correct approach is as follows:

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

HTML Pass Example

Do not disable user scaling:

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

Resize content based on the viewport size:

@media only screen and (min-width: 32em) {
  …
  h1 {
    font-size: 1.5em;
  }
  p {
    font-size: 0.8em;

@media only screen and (min-width: 50em) {
  …
  h1 {
    font-size: 2em;
  }
  p {
    font-size: 1em;

---

Testing

Procedures

1. Open the web page or activate the app.
2. Verify that UI scaling (“zoom”) is enabled.
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. Verify that scrolling is not disabled.

Outcome

The following checks are all true:

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

---