Check zoom and magnification for web accessibility
On this page:
Overview
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 website accessibility standards in IU's Americans with Disabilities Act Policy (UA-02) 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.
- Change the font size:
- Chrome: Open or and change the font size to or .
- Firefox: Open , select in the side menu, and then in the "Fonts & Colors" section, select . In the pop-up box, change the "Minimum font size" to at least . Select .
- Safari: Open . In the pop-up box, select . Check , and in the drop-down box, select .
- Edge: Open , and then select . Under "Fonts", change the font size to .
- Reload the page.
- Look for any text that does not change size and any content that is obscured, lost, hidden, or otherwise problematic.
- 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.
- Zoom the browser to at least 200%:
- Mac:
Command
plus+
to increase zoom - Windows:
Ctrl
plus+
(or mouse wheel up) to increase zoom
- Mac:
- Reload the page.
- Look for any content that is obscured, lost, hidden, or otherwise problematic.
- Set your browser width to 1280 px and zoom to 400%, and then repeat steps 2 and 3.
- Reset the browser zoom to 100% or preferred settings:
- Mac:
Command
plus0
to reset to 100%, orCommand
plus-
to reduce the zoom - Windows:
Ctrl
plus0
to reset to 100%, orCtrl
plus-
(or mouse wheel down) to reduce the zoom
- Mac:
View a one minute video demonstration on content resizing using browser 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:
- Activate the bookmarklet.
- Look for any text that does not adapt to the new settings and any content that is obscured, lost, hidden, or otherwise problematic.
- Refresh the page to deactivate the bookmarklet.
Next step: Inspect website code for accessibility
Previous step: Check color contrast on a website
Return to index: Perform an accessibility review on your website
Get help
For questions or consultations, email the User Experience Office's accessibility team.
This is document atfq in the Knowledge Base.
Last modified on 2023-10-04 10:58:39.