accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Resize text

On this page:

Summary
Requirements
Guidance for Design
Guidance for iOS
Guidance for Android
Guidance for Flutter
Guidance for Web
More info

Summary

Make sure it is possible to complete all tasks when text is resized up to 200%.

It must be possible to increase the size of text to 200%, without losing access to any content or functionality.

Requirements

When the whole page, or its text content only, is enlarged, all information and functionality should remain available.
Ensure that the content and layout of the page responds to users changing the Operating System’s or Web Browser’s default font size.
Ensure that pinch to “zoom” is supported on web pages.

Why?

This ensures that partially sighted people can comfortably read content and see the interface well.

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. About a third of iOS users change the default text size.
People with reduced vision rely on font and layout resizing to use websites and apps.
Some Operating Systems allow users to zoom on a portion of the screen. But using that alone offers a very poor user experience, and modern website and apps are expected to support text resizing and dynamic layout.

Official wording in the Web Content Accessibility Guidelines

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Design

This section needs more content. Contribute via Github or email.

More guidance for design

See section 3 ‘Structure and semantics’ of Deque’s Web Accessibility Quick Checklist for Designers

Guidance for Design

This section more content. Contribute via Github or email.

Guidance for iOS

Since iOS 11, the system provides an easy way to obtain a scaled font:

// Obtaining a font for the current scale from the system
let bodyFont = UIFont(name: "YourFontName", size: 17) // The default font you'd use for your UI's body content
let scaledBodyFont = UIFontMetrics.default.scaledFont(for: bodyFont)

// Setting the font on a label that will automatically scale and reflow the layout
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.font = scaledBodyFont

Note: UIFontMetrics will scale custom and system fonts for you.

Note: UIFontMetrics can also be created with a text style for more nuanced font scaling:

// Scaling a header font from a `.headline` UIFontMetrics instance indicates to the system it doesn't need to scale it as much as it would for `.body` fonts.
UIFontMetrics(forTextStyle: .headline).scaledFont(for: headerFont)

If necessary, you can also observe changes to the user’s system setting and reflow your layout:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if traitCollection.preferredContentSizeCategory >= .accessibilityLarge {
        stackView.axis = .vertical
    } else {
        stackView.axis = .horiztonal
    }
}

More guidance for iOS

Guidance for Android

To ensure that the system will scale your font when the user changes configuration make sure that your font size is defined in sp (scale-independent pixel).

Alternatively you can respond to configuration changes by overriding onConfigurationChanged to get the new font scale

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    newConfig.fontScale // Update text size based on fontScale
}

If you require some texts to have a fixed size, you can use dp instead.
Use with caution and under very special circumstances, as this will prevent the user from scaling the text with their font configuration.

Guidance for Flutter

Text scaling is supported with every version of Flutter and text will scale based on the devices settings.

Additional things to consider when designing your app is to account for any height or width changes that might happen due to increase of size.

Make sure that your screen/widget is scrollable.

You can use widgets like SingleChildScrollView() to wrap your ui to make it scrollable. Widgets like ListView.builder are scrollable by default.

SingleChildScrollView(
      child: // the rest of your ui here
)

Scrolling direction is also locked to a default direction but can have this toggled.

scrollDirection: Axis.enum, // defaults to Axis.vertical

Make sure text containers can increase in size when text gets bigger

Do not set a fixed height and width for a widget containing text.

// DO
SingleChildScrollView(
    child: // wrap your screen ui with this
    );

// DON'T
Container(
    height: 40,
    width: 40,
    child: Text('Some long text here')
)

More guidance for Flutter

Flutter dev accessibility documentation

Guidance for Web

Using relative size units to support font resizing

Support font resizing by using relative size units (such as rem and em, rather than px).
Use relatize size units to size elements on the page to ensure that the page content and layout gracefully adjust to users’ changing the Operating System or Web Browser’s default font size. Content and functionality shoudn’t become unavailable or cut-off.

Ensuring the viewport meta tag is set to permit “pinch-to-zoom” scaling on touch screens

Example

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

Failure examples

<!-- Don't do this -->
<meta name="viewport" content="user-scalable=no" />

<!-- Don't do this -->
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"
/>

Common mistakes

Setting an element’s size in px, rather than using relative size units.

More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email

This site is open source. Improve this page.