Overview

Many users with limited vision resize the text, or zoom into pages to make the content easier to read. This allows them to experience the content on the page without using screen magnification or screen reader software. It's important that page layouts and styles are implemented in a way that allows them to be enlarged without disrupting page layout or functionality.

Guidelines

Text Styling Guidelines

• Choose em or rem font sizing when available, versus px sizing. 
  • px defines font size in pixels. It's an absolute metric of measurement. This means font sizes don't increase proportionally when you zoom into the page.
  • em defines the font size relative to the parent element's font size. Defining font as having an em of 2.0 says it should be twice as big (in pixels) as other text within the same area.
  • rem is similar, it defines the font size relative to the default font size for the entire page, not the immediate parent element in HTML.
• Using em or rem allows the text to stay proportionally sized when under significant zoom. Text defined as px will zoom in somewhat, but typically less so than other elements on the page.
• Use generous line spacing. The line height should be at least 1.5x the font size, and the paragraph spacing should be at least 1.5x the line height.

Layout Guidelines

• Do not restrict the ability to zoom. The viewport meta tag is sometimes used to control the layout on mobile browsers. If you define viewport attributes, do not set user-scalable to '0' or 'no'.
• Avoid horizontal scrolling. Tables in particular require special styling to ensure they stack responsively while retaining the associations in data rows.
• Users must be able to zoom in up to 200% without loss of functionality of truncating content.

How to Test

• Manually zoom into the browser at 200% and verify that all content is available and easily understood without horizontal scrolling.
• View the content on a mobile device and verify that the content can be zoomed in with pinch gestures