This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

WCAG: 1.4.4

Make sure the text is scalable, and
Make sure the container
1. Good: Provides a scrollbar as needed, or
2. Better: Is large enough to display all text at 200%, or
3. Best: Scales to display the enlarged text without scrolling

Exceptions

Captions: synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content
Image of text: text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect
[ ] Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
- Specifying the size of text containers using em units The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.
- Techniques for relative measurements
  - Using percent for font sizes Specify text font size proportionally so that user agents can scale content effectively
  - Using named font sizes Specify a named font size that expresses the relative font size desired.
  - Using em units for font sizes Specify text font size in em units so that user agents can scale content effectively.
- Techniques for text container resizing
  - Calculating size and position in a way that scales with text size Calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.
  - Using liquid layout

Test Procedure

Set the resolution to 1920x1080, and Set scaling to 100%.
Use the browser's settings to set the target page's zoom to 200%.
Examine the target page to verify that:
1. All text resizes fully, including text in form fields.
2. Text isn't clipped, truncated, or obscured.
3. All content remains available.
4. All functionality remains available. Expected Results: Check 3 is true.

Examples

Example 1: Em units for sizes for layout container containing text

In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with id value of "nav_list." The text size for the navigation links and the width of the container are specified in em units.

#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

Example 2: Em units for text-based form controls

In this example, input elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).

input.form1 { font-size: 100%; width: 15em; }

Example 3: Em units in dropdown boxes

In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.

input.pick { font-size: 100%; width: 10em; }

Example 4: Em units for non-text-based form controls

In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.

input.choose { width: 1.2em; height: 1.2em; }

Example 5: Percent font sizes in CSS

This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

strong {font-size: 120%}

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.

Example 6: Named font sizes in CSS

This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

strong {font-size: larger}

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.

Example 7: Em font sizes in CSS

This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.

strong {font-size: 1.6em}

<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him, 
it is <strong>very</strong> important to let him configure the text size.  </p>

Example 8: determine the size and position of elements

The Javascript function:

function calculatePosition(objElement, strOffset)
{
    var iOffset = 0;

    if (objElement.offsetParent)
    {
        do 
        {
            iOffset += objElement[strOffset];
            objElement = objElement.offsetParent;
        } while (objElement);
    }

    return iOffset;
}

The following example illustrates using the function above by aligning an object beneath a reference object, the same distance from the left:

// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');

objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px';

Example 9: Simple liquid layout in HTML and CSS

The following fairly simple example uses HTML and CSS to create a liquid layout. The three columns adjust their size as text size is adjusted. When the total horizontal width exceeds the available width of the columns, the last column wraps to be positioned below, rather than beside, the previous column. The font size can be increased without either clipping or introducing horizontal scrolling until the longest word no longer fits in a column. This particular example uses percent sizes for the columns and defines them as floating regions using the "float" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Example of Basic Liquid Layout</title>
    <style type="text/css">
    .column {
        border-left: 1px solid green;
        padding-left: 1%;
        float: left;
        width: 32%;
    }

    #footer {
        border-top: 1px solid green;
        clear: both;
    }
    </style>
</head>

<body>
    <h1>WCAG Example</h1>
    <h2>Text in Three Columns</h2>
    <div title="column one" class="column">
        <h3>Block 1</h3>
        <p> The objective of this technique is to be able to present content
            without introducing horizontal scroll bars by using layout
            techniques that adapt to the available horizontal space.
        </p>
    </div>
    <div title="column two" class="column">
        <h3>Block 2</h3>
        <p> This is a very simple example of a page layout that adapts as the
            text size changes.
        </p>
    </div>
    <div title="column three" class="column">
        <h3>Block 3</h3>
        <p> For techniques that support more complex page layouts, see the
            Resources listed below.
        </p>
    </div>
    <p id="footer">Footer text</p>
</body>

</html>

Scenario: Control

[ ] Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent

NOTE This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and [Understanding Conforming Alternate Versions for more information]'https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions).

Test Procedure

Set the resolution to 1920x1080, and Set scaling to 100%.
Use the available control set the target page's zoom to 200%.
Examine the target page to verify that:
1. All text resizes fully, including text in form fields.
2. Text isn't clipped, truncated, or obscured.
3. All content remains available.
4. All functionality remains available.
Decrease the text size to its default value and check to see if it in fact returned to the default size. Expected Results: Check 2, 3 and 4 is true.

Examples

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 alt text on each button.
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.
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.
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.

Scenario: Fixed container

[ ] Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width

Some user agents support changing the size of text without changing other dimensions of the text container. Loss of content or functionality can occur when the text overflows the space that was allocated for it. However, the layout properties may provide a way to continue to display the content effectively. The block sizes may be defined wide enough that the text does not overflow when resized by 200%. Text may wrap when it no longer fits within the block, and the block may be tall enough that all the text continues to fit in the block. The block may provide scrollbars when the resized text no longer fits.

Test Procedure

Set the resolution to 1920x1080, and Set scaling to 100%.
Use the browser's settings to set the target page's zoom to 200%.
Examine the target page to verify that:
1. All text resizes fully, including text in form fields.
2. Text isn't clipped, truncated, or obscured.
3. All content remains available.
4. All functionality remains available. Expected Results: Check 3 is true.

Examples

Example 1: A multi-column page layout

HTML and CSS are used to create a two-column layout for a page of text. Using the default value of the white-space property, normal, causes text to wrap. So as the size of the text is increased to 200%, the text reflows and the column of text grows longer. If the column is too long for the viewport, the user agent provides scrollbars so the user can scroll text into view because the author has specified the CSS rule overflow:scroll or overflow:auto.

Example 2

A newspaper layout with blocks of text in columns. The blocks have a fixed width, but no height set. When the text is resized in the browser, the text wraps and makes the blocks taller.

solex2006 / SELIProject

Text can be resized without assistive technology up to 200 percent without loss of content or functionality. #93

Test Procedure

Examples

Example 1: Em units for sizes for layout container containing text

Example 2: Em units for text-based form controls

Example 3: Em units in dropdown boxes

Example 4: Em units for non-text-based form controls

Example 5: Percent font sizes in CSS

Example 6: Named font sizes in CSS

Example 7: Em font sizes in CSS

Example 8: determine the size and position of elements

Example 9: Simple liquid layout in HTML and CSS

Scenario: Control

Test Procedure

Examples

Scenario: Fixed container

Test Procedure

Examples

Example 1: A multi-column page layout

Example 2

FAILURES