According to the WCAG 2.1 – 1.4.4 Resize text (Level AA) Guideline, a user should be able to resize text to 200% without loss of content or function.
The action of “pinching to zoom” text on a mobile phone or tablet is often used by older individuals or users with low vision.
How can you make sure that users can use the “pinching to zoom” technique when viewing your responsive website content?
Use the correct viewport META tag within the HTML5 header code.
The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a desktop monitor screen.
Here is the standard meta tag code for a viewport:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
width=device-width: width of the screen in CSS pixels at a scale of 100%
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Flag which allows the device to zoom in or out. (value= yes/no).
Here are the attributes NOT to use in the viewport META tag as well as the values to change:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes“>
By eliminating the minimum and maximum scale attributes and setting the user-scalable value to “yes”, the user can then pinch and zoom the text content to a size they can comprehend.
WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:
WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints