An Accessibility Bookmarklet for Testing 200% Text Size

By admin
TL;DR

This bookmarklet can help you visually check how well a webpage handles text being resized to

200%
PERCENT

of the base/default size. It can also help you test for loss of content when checking compliance for

WCAG 2.2 Success Criterion
ORG

1.4.10 Reflow.

To add the bookmarklet to your preferred browser:

Create a new bookmark Give it a good name (maybe "Toggle text zoom") Copy-and-paste the following code for

the URL

Copy Code
LAW

1 javascript : ( function ( ) {

2
CARDINAL

const htmlElement = document . querySelector ( ‘html’ ) ;

3
CARDINAL

const currentFontSize = htmlElement . style . getPropertyValue ( ‘font-size’ ) ;

4
CARDINAL

const isZoomed = currentFontSize === ‘

200%
PERCENT

‘ ;

5
CARDINAL

const newFontSize = isZoomed ? null : ‘

200%
PERCENT

‘ ;

6
CARDINAL

htmlElement . style .

setProperty
PERSON

( ‘font-size’ , newFontSize ) ;

7
CARDINAL

} ) ( ) ;

8
CARDINAL

Disclaimer: This is experimental and should be used at your own risk! If a webpage is already coded to set the

CSS
ORG

font-size property on the <html> element, this bookmarklet probably won’t work as intended.

Does WCAG have text size requirements?


The Web Content Accessibility Guidelines
ORG

has

one
CARDINAL


Success Criterion
PRODUCT

criterion in particular that talks about text size. WCAG

2.2
CARDINAL

Success Criterion

1.4.4
CARDINAL

Resize Text says:

Except for captions and images of text, text can be resized without assistive technology

up to 200 percent
PERCENT

without loss of content or functionality.

Text resizing is not the same as browser zoom

You might be thinking, "But when I zoom in my browser to

200%
PERCENT

the button text looks fine!" This is probably a common misconception with

this Success Criterion
ORG

. I definitely didn’t know for a while that browser zoom is only part of the story!

Digging deeper using

the Understanding SC 1.4.4
ORG

: Resize Text docs, it says we (the "authors") have to handle the case when a user only increases the size of their text since their browser (or some other "user agent") might not have zoom capability.

The

docs
PERSON

say:

If the user agent doesn’t provide zoom functionality but does let the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized.


This Success Criterion
ORG

is

one
CARDINAL

reason why it’s good practice to use rem units for the

CSS
ORG

font-size property and no units for the line-height property. Text must be resizeable

up to 200%
PERCENT

without a mechanism like browser zoom.

How do I test

200%
PERCENT

text size?

The easiest way I’ve found to test text-only zoom is by setting font-size:

200%
PERCENT

on the <html> element for a web page. This can be done a few ways:

Manually adding the

CSS
ORG

property in browser dev tools

Running
WORK_OF_ART

some JavaScript in the browser console Putting the JavaScript in a bookmarklet and running it with

one
CARDINAL

click

I prefer option

3
CARDINAL

the most because it’s just

one
CARDINAL

click and it’s a more accurate user experience test since I can keep the browser dev tools panel closed.

My bookmarklet is set up to toggle the font-size:

200%
PERCENT

setting on the <html> element when the bookmark is clicked. It checks if the current font-size value is already set to

200%
PERCENT

, and adds or removes it based on that check.

To add the bookmarklet to your preferred browser:

Create a new bookmark Give it a good name (maybe "Toggle text zoom") Copy-and-paste the following code for the URL