Viewport

Zooming and scaling must not be disabled – WCAG 1.4.4

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

Most times you will see the line of code in the header.php or functions.php: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
By setting maximum-scale=1.0, you are disabling the functionality to use pinch zoom on certain mobile devices, forcing people to view your page a certain way.

Setting width=device-width will match the screen’s width in device-independent pixels, and settinginitial-scale=1 establishes a 1:1 relationship between CSS pixels and device-independent pixels. Doing this instructs the browser to fit your content to the screen size, so users don’t just see a bunch of scrunched-up text.

If you are using a child theme, you want to use the correct code in your child theme file. If you change the line in the core theme, it may change back when the theme does any updates.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Examples of Success Criterion 1.4.4

A user with vision impairments increases the text size on a Web page in a browser from 1 em to 1.2 ems. While the user could not read the text at the smaller size, she can read the larger text. All the information on the page is still displayed when the larger font is used for the text.

A Web page contains a control for changing the scale of the page. Selecting different settings changes the layout of the page to use the best design for that scale.

A user uses a zoom function in his user agent to change the scale of the content. All the content scales uniformly, and the user agent provides scroll bars, if necessary.

Code for your Child Theme:

/* [START] viewport */
function child_remove_parent_function() { /* disable parent viewport */
remove_action( ‘wp_head’, ‘et_add_viewport_meta’);
}
add_action( ‘wp_loaded’, ‘child_remove_parent_function’ );

function my_add_viewport_meta(){ /* add your own viewport */
echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1″>’;
}
add_action( ‘wp_head’, ‘my_add_viewport_meta’ );
/* [END] viewport */