Zoom and magnification

On this page:


Overview

Important:

This information is intended for web developers, providing a holistic process for performing an initial pass of evaluating your website for accessibility. This is not a substitute for performing a complete Web Content Accessibility Guidelines (WCAG) 2.0 AA site evaluation, but following this full process will capture most of the WCAG 2.0 AA Guidelines more efficiently.

It is impossible to meet the IU ADA Web accessibility policy using only automated tools.

People with low vision may use any of several methods to enlarge content. They may use a screen magnifier such as Windows Magnifier or Mac Zoom, increase the default font size in their browser, zoom their browser, or change the default text spacing on a website. Different strategies for enlarging content behave differently, and you need to verify that important content is not lost if any of them are being used.

Three methods of enlarging content need to be checked because they can affect the website design: font size, zooming, and text spacing.

Font size

Most browsers have a way to change the default minimum font size. How font size changes will differ depending on the browser. Checking font size in more than one browser is recommended.

  1. Change the font size:
    • Chrome: Open Settings or Preferences and change the font size to Very large or Very small.
    • Firefox: Open Preferences, select Content in the side menu, and then in the "Fonts & Colors" section, select Advanced. In the pop-up box, change the "Minimum font size" to at least 24 point. Select OK.
    • Safari: Open Preferences. In the pop-up box, select Advanced. Check the checkbox for Never use font sizes smaller than and, in the drop-down box, select 24 point.
    • Internet Explorer: In the View menu, select Text size, then change the font size to Largest or Smallest.
  2. Reload the page.
  3. Look for any text that does not change size and any content that is obscured, lost, hidden, or otherwise problematic.
  4. Change back to your preferred settings.

Zooming

Zooming changes the size of all content proportionally, including images. Depending on screen size, zooming may trigger the "mobile" or small screen view of the web page. Changing zoom in more than one browser is recommended.

  1. Zoom the browser to at least 200%:
    • Mac: Command plus + to increase zoom
    • Windows: Ctrl plus + (or mouse wheel up) to increase zoom
  2. Reload the page.
  3. Look for any content that is obscured, lost, hidden, or otherwise problematic.
  4. Reset the browser zoom to 100% or preferred settings:
    • Mac: Command plus 0 to reset to 100%, or Command plus - to reduce the zoom
    • Windows: Ctrl plus 0 to reset to 100%, or Ctrl plus - (or mouse wheel down) to reduce the zoom

Text spacing

Text spacing includes line height, letter spacing, word spacing, and paragraph spacing.

The website should have no loss of content or functionality if changed to any of the following:

  • Line height to at least 1.5 times the font size
  • Spacing following paragraphs to at least 2 times the font size
  • Letter spacing to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size

The easiest and quickest way to check text spacing is by using the text spacing bookmarklet in any browser:

  1. Activate the bookmarklet.
  2. Look for any text that does not adapt to the new settings and any content that is obscured, lost, hidden, or otherwise problematic.
  3. Refresh the page to deactivate the bookmarklet.

Next step: Code inspection
Previous step: Color contrast
Return to index: Perform an accessibility review on your website

Get help

For questions or consultations, contact the User Experience Office's accessibility team.

This is document atfq in the Knowledge Base.
Last modified on 2019-10-30 14:44:34.

Contact us

For help or to comment, email the UITS Support Center.