Main content


Warning: count(): Parameter must be an array or an object that implements Countable in /home/dair/public_html/components/com_k2/models/item.php on line 763

Font Sizing

Must

Section 508:

  • §1194.21(b)
  • §1194.31(b)

WCAG 2.0:

  • 1.4.4

Users must be able to control font size

Developers must ensure that users can change the font size of on-screen text without loss of content or functionality. When text cannot be resized, users who have low vision or cognitive impairments may be unable to read content due to text size. This guideline requires that developers:

  1. Allow users to modify the font size of the application.
  2. Support font size settings available in the OS.
  3. Ensure that the application respects the modified font size across all screens.
  4. Ensure that resized text properly re-flows on the screen.
  5. If needed, provide scrolling functionality for any on-screen text that, when re-sized, would be hidden from view.
  6. Ensure that assistive technology that enlarges text is supported and all application functionality is available and screens are displayed correctly

iOS

As an optional guideline, font re-sizing functionality should be provided via a standard on-screen component that is part of the OS's accessibility settings component group. The iOS provided "Large Text" feature is not available to app developers thus requiring developers to provide an in-app method for setting text size.

iOS Example

// Text elements are rendered using the default font size or larger.
// Options are provided to enlarge fonts
// Application support font enlargement or screen magnification assistive
technologies

iOS Failure

// Text that when enlarged using assistive technologies is unreadable or
displayed incorrectly
// Functionality is disrupted due to gesture or input conflicts with the
assistive technology

Android

Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.

Android Example

// Text elements are rendered using the default font size or larger.
// Options are provided to enlarge fonts
// Application support font enlargement or screen magnification assistive
technologies

Android Failure

// Text that when enlarged using assistive technologies is unreadable or
displayed incorrectly
// Functionality is disrupted due to gesture or input conflicts with the
assistive technology

HTML

Absolute sizing dimensions should not be utilized to specify font size. When absolute font sizes are used, users may not be able to increase or decrease the size of the font or the font may become unreadable or overlap other content. Declaring font sizes in relative units will not only allow the user to increase or decrease the font size but will also automatically display in a size relative to their existing browser settings.

HTML Example

h2 { font-size: 2em; }
h2 { font-size: large; }

HTML Failure

h2 { font-size: 12pt; }
h2 { font-size: 12px; }

Remediating

Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally, assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.

  • Allow users to modify the font size of the application.
  • Support font size settings available in the OS.
  • Ensure that the application respects the modified font size across all screens
  • Ensure that resized text properly re-flows on the screen
  • If needed, provide scrolling functionality for any on-screen text that, when re-sized, would be hidden from view.
  • Ensure that assistive technology that enlarges text is supported and all application functionality is available and screens are displayed correctly.

Note: As an optional guideline, font re-sizing functionality should be provided via a standard on-screen component that is part of the OS's accessibility settings component group.

Developers should avoid using font sizes smaller than the recommended defaults provided by the OS. Application should be tested against system font size features to ensure screens appear correctly at larger sizes. Finally assistive technologies that enlarge text or the screen should be tested to ensure proper functionality within the application.

Testing

Recommended tool/method: Manual

Provide for user control of font size (Manual)
  1. Determine whether there is an option to change the font size of the device
  2. Determine if the option to change text size properly changes text size
  3. If the option is provided or if the application provides adjustable font sizes:
    1. Verify that it remains applied across all screens
    2. Verify that resized text properly reflows on the screen
    3. Verify that any elements that now require scrolling provide scrolling options
  4. Verify that screen magnification works correctly with the application and all screens are readable

Warning: count(): Parameter must be an array or an object that implements Countable in /home/dair/public_html/components/com_k2/templates/default/item.php on line 248
More in this category: « Frames