WCAG – 1.4.4 Resize Text (Level AA)

1.4.4 Resize Text (AA): 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)

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 is it important?

This ensures that partially sighted people can comfortably read content and see the interface well. 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.

Benefitted Disability Types

  • 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.

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.

Common Mistakes

  • When resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
  • When text-based form controls do not resize when visually rendered text is resized up to 200%
  • Setting an element’s size in px, rather than using relative size units.

Design Guide

Resize Text Example for IOS

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


let bodyFont = UIFont(name: "YourFontName", size: 17) 
let scaledBodyFont = UIFontMetrics.default.scaledFont(for: bodyFont)


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:


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
    }
}

Resize Text Example 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 
}

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.

Resize Text Example 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: 
)

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

scrollDirection: Axis.enum, 

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.


SingleChildScrollView(
    child: 
    );


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

Resize Text Example 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 example

<!-- 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;"
/>

References

  1. Section 3 ‘Structure and semantics’ of Deque’s Web Accessibility Quick Checklist for Designers
  2. UIFontMetrics developer reference
  3. UILabel developer reference
  4. UIStackView developer reference
  5. UITraitEnvironment developer reference
  6. Snapshot testing Dynamic Type
  7. Flutter dev accessibility documentation
  8. W3C Web Content Accessibility Guidelines 2.1
  9. Government Digital Service WCAG 2.1 Primer
  10. Barclays’ Accessibility Design Standards
  11. The BBC’s Mobile Accessibility Guidelines
  12. Accessibility Guidelines- Github.io

Leave a Comment

Your email address will not be published. Required fields are marked *