CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent | Techniques for WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/WCAG20-TECHS/G178.html" /><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE.css" /><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="slicenav.css"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body class="slices toc-inline"><div id="masthead"><p class="logo"><a href="https://www.w3.org/"><img width="72" height="48" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"/></a></p><p class="collectiontitle"><a href="./">Techniques for WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><a name="top"> </a><ul id="navigation"><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="G177: Providing suggested correction text" href="G177.html"><strong>Previous: </strong> Technique G177</a></li><li><a title="G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width" href="G179.html"><strong>Next: </strong> Technique G179</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#G178-disclaimer">Important Information about Techniques</a></li><li><a href="#G178-applicability">Applicability</a></li><li><a href="#G178-description">Description</a></li><li><a href="#G178-examples">Examples</a></li><li><a href="#G178-tests">Tests</a></li></ul></div><div class="skiptarget"><a id="maincontent">-</a></div> <h1><a name="G178" id="G178"> </a>G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</h1><div id="G178-disclaimer"><h2>Important Information about Techniques</h2><p>See <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.</p></div><div class="applicability"><h2 id="G178-applicability">Applicability</h2><div class="textbody"><p>All technologies.</p></div></div><p class="referenced">This technique relates to:</p><ul><li><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale"> Success Criterion 1.4.4 (Resize text)</a><ul><li><a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/#visual-audio-contrast-scale"> How to Meet 1.4.4 (Resize text) </a></li><li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/visual-audio-contrast-scale.html"> Understanding Success Criterion 1.4.4 (Resize text) </a></li></ul></li></ul><h2 id="G178-description">Description</h2><div class="textbody"><p>The purpose of this technique is to provide a mechanism on the Web page to incrementally increase the size of text. Many people with low vision do not use magnifying software, and they may not be familiar with their browser's text size adjustments. This may be particularly true of older people who are learning about computers later in life and who may be experiencing age related vision loss. It may also be true of some people with cognitive disabilities who require increased font size.</p><p>This technique provides a mechanism that some users will find easier to use. The mechanism may include links or buttons that will switch the visual presentation to a different style sheet or use scripts to change the text size dynamically.</p><p>To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size that is at least 200% of the default text size.</p><p>This can be achieved by providing links, buttons or linked images and the controls themselves should be as easy to find (e.g. prominently positioned within the page, presented in a larger text size, high contrast, etc.) as possible.</p><p>This technique can also be used in circumstances where scalable fonts cannot be used, such as legacy code situations.</p><div class="note"><p class="prefix"><em>Note: </em>This technique can be used in combination with a style switching technique to present a page that is a <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#conforming-alternate-versiondef" class="gl-ref">conforming alternate version</a> for non-conforming content. Refer to <a href="https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C29" class="tech-ref">C29: Using a style switcher to provide a conforming alternate version</a> (CSS) and <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-conforming-alt-versions-head" class="understanding-ref">Understanding Conforming Alternate Versions</a> for more information.</p></div></div><h2 class="small-head" id="G178-examples">Examples</h2><ul><li><p>A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is <code>alt</code> text on each button.</p></li><li><p>A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.</p></li><li><p>A site includes the text "Change text size:" followed by text links "Up" and "Down" on every Web page. The links trigger a Javascript that alters the value of the text-size property accordingly.</p></li><li><p>A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.</p></li></ul><h2 id="G178-tests">Tests</h2><div class="textbody"><h3 class="small-head" id="G178-procedure">Procedure</h3><ol class="enumar"><li><p>Set the viewport size to 1024px by 768px or larger.</p></li><li><p>Increase the text size and check to see if the text size increased.</p></li><li><p>Check that the text size can be increased to 200% of the original size.</p></li><li><p>Check that after increasing the text size to 200% of the original size, there is no loss of content or functionality (e.g. no parts of the text are clipped, boxes do not overlap, controls are not obscured or separated from their labels, etc.).</p></li><li><p>Decrease the text size to its default value and check to see if it in fact returned to the default size.</p></li></ol><h3 class="small-head" id="G178-results">Expected Results</h3><ul><li><p>Checks #2, #3, #4 and #5 are true.</p></li></ul><p>If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.</p></div><ul id="navigationbottom"><li><strong><a href="#top">Top</a></strong></li><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="G177: Providing suggested correction text" href="G177.html"><strong>Previous: </strong> Technique G177</a></li><li><a title="G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width" href="G179.html"><strong>Next: </strong> Technique G179</a></li></ul><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Techniques and Failures for Web Content Accessibility Guidelines 2.0</a> (see the <a href="https://www.w3.org/TR/WCAG20-TECHS/G178.html">latest version of this document</a>). The entire document is also available as a <a href="complete.html">single HTML file</a>. See the <a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the <a href="https://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</a>. </p><p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> 漏 2016 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>庐</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p></div></body></html>