Specifying a system font in web content to support platform text resize without browser or platform assistive technology zoom.

From Mobile Accessibility Task Force

Mobile Technique – Specifying a system font in web content to support platform text resize without browser or platform assistive technology zoom.

Technique Category

Mobile Techniques

Technique Status Category

Proposed

Status

TBD

Applicability

This technique is to be used to support resize of web text content on iOS.

WCAG references

  • visual-audio-contrast: 1.4.4 Resize text: (sufficient)

User Agent and Assistive Technology Support Notes

This technique is supported on iOS.

Description

The objective of this technique is to use the platform system font which takes into account the user’s text size settings of the platform in iOS via the dynamic text options. The following vendor specific CSS font properties are available on iOS:

  • -apple-system-headline
  • -apple-system-subheadline
  • -apple-system-short-headline
  • -apple-system-short-subheadline
  • -apple-system-body
  • -apple-system-short-body
  • -apple-system-tall-body
  • -apple-system-caption1
  • -apple-system-caption2
  • -apple-system-short-caption1
  • -apple-system-footnote
  • -apple-system-short-footnote

Using the apple-system fonts does not preclude allowing the following CSS properties to be set for all content including the content affected by the system font.

  • font-family
  • font-weight
  • font-style
  • font-variant

Use of the system fonts is designed to affect the font size and thus setting the CSS font-size on an element will override the font size applied by the platform. If units including em or rem are applied to descendant elements that inherit the system font then the text will scale by the units based on the default font text specified by the system font.

Examples

Examples of this technique include but are not limited to:

  • Using the system font size to resize web page content to 200% to meet SC 1.4.4 Resize Text

Example 1: Use of the vendor specific CSS prefix to assign the apple system body font to a paragraph element while setting the font-family for non-iOS platforms. p { 

 font: -apple-system-body;
 font-family: Arial, sans-serif;
 font-weight: normal;

}

Example 2: Use of a child element with em to scale text based on the system font and size. In this example the system font is set on a paragraph. A child span within the paragraph has it’s font-size set to an em unit. The text within the child span will increase by the em unit based on the default of the system font specified in the parent paragraph. p { 

 font: -apple-system-body;
 font-family: Arial, sans-serif;
 font-weight: normal;

} .body-text-size { 

 font-size: 1.1em;

}

This is some text in my page.

Resources

  • Using the System Font in Web Content

Related Techniques

None

Tests

Testing is done by ensuring text resizes based on the settings of the platform text size.

Procedure

For all text that uses the platform system fonts 1. Adjust the text size in the platform to 200% of the default 2. Check that the text increases by 200%

Expected Results

  • #2 is true

Test Files

  • Resizable vs. Non-Resizable Fonts in iOS UIWebView
Retrieved from "https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/index.php?title=Specifying_a_system_font_in_web_content_to_support_platform_text_resize_without_browser_or_platform_assistive_technology_zoom.&oldid=3869"