Resize content

From Low Vision Accessibility Task Force

@@ Note: This is a new page replacing Size all content.

SC Shortname

Resize content

(Was: "Size (all content)", but trying to align and extend 1.4.4 Resize text.)

SC Text

Content can be resized to 400% without loss of content or functionality, and without requiring two-dimensional scrolling except for parts of the content where fixed spatial layout is necessary to use or meaning.

Current:

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)

The new SC is intended to increase the level of size increase that website should be able to achieve with new(ish) techniques like media queries. The previous SC is still needed as a fall back for 'text-only' increases when the exceptions apply (2d content and mobile browsers).

Suggested Priority Level

Level A

Related Glossary additions or changes

None.

What Principle and Guideline the SC falls within.

Principle 1, Guideline 1.4.4 Resize text

Description

Zoom functions preserve all spatial relationships on the page and all functionality continues to be available.

Simply put: a person can make everything bigger or smaller as needed.

The size 400% was picked as the largest size a standard website can get to using responsive design. If the user needs to increase content more than 400%, then reflow would be necessary which overrides the layout of the website.

Benefits

Some people need to increase the size of all interface content in order to perceive information. Although increasing size is most common, some people with tunnel vision and good visual acuity may prefer to decrease the size so they can see more information at a time.

Source: Accessibility Requirements for People with Low Vision, Section 3.3.5: Size of All Content

User Need: Size

Users can change the size of all elements.

When people increase text size, increase line spacing, or change other text display aspects through text-only zoom or other text settings, content that is poorly designed can become unusable. For example, with text areas in web pages, sometimes columns and sections overlap, the space between lines disappears, lines of text become too long, or text disappears.

Figure 1: Example showing that when text size is increased, the heading overlaps the main text, the main text overlaps the sidebar text, and the sidebar text is cut off at the bottom.

  • web page with larger text
  • web page with larger text

Often it is best for text areas to automatically resize to fit the text, and for users to be able to change the size of text areas. When the areas cannot be resized to accommodate all content, usually a scrollbar should be available. See also the Rewrap for one direction scrolling section.

When people use large fonts or lower screen resolution, it is not uncommon for dialog boxes to include information that is not in the viewport. In such cases, it is usually best practice for scrollbars to be provided for the dialog box.

Scrollbars generally provide the additional benefit of communicating where the user is in an interface.

Some users increase the size of mouse pointers in their operating system or with screen magnification software. These should not overlap tooltip text.

Source: Accessibility Requirements for People with Low Vision, Section 3.7.1

User Need: All Elements

Users can see and interact with all content and user interface controls presented visually, including when users have changed display settings such as text size, magnification, and cursor appearance.

Source: Accessibility Requirements for People with Low Vision, Section 3.7.1

Question from Alastair: Do you ever get issues decreasing the size? I can't think of an example where you would, so do we need to include that as a requirement?

Testability

  1. Display content in a user agent with a window width of 1280px.
  2. Increase zoom (for all content) to 400%.
  3. Check whether all content scales and is perceivable with no loss of content or functionality (e.g. boxes do not overlap, controls are not obscured or separated from their labels, etc.).
  4. If horizontal scrolling is present, check that the content causing scrolling would not make sense without the scrolling.

Expected Results

  • Check #3 is true.
  • Check #4 is true.

Techniques

All existing techniques for Proposed New SC: "Size (all content)"

  1. G146: Using liquid layout and AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
  2. G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

New Techniques

  1. Using fluid grids. Ref: fluid grids
  2. Using em based media queries. Ref: em based media queries
  3. Using responsive images. Ref: HTML picture element and srcset attribute
  4. @@ Consider a failure technique on fixed sized containers and fixed position content??
  5. @@ Consider a failure technique on "Interfering with a user agent's ability to zoom" i.e., author using: maximum-scale or minimum-scale or user-scalable=no or user-scalable=0 in the meta element ?? @@ Note: In Pinch zoom thread on the WCAG list people did not seem to be in favor of this as a failure.
  6. @@ (HTML) Consider failure for preformatted text or excluding this as an exception to no two dimensional scrolling.
  7. Using collapsable menus, e.g. https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.drw899y4d

Related Information

Actions

Articles

Zoom Articles

Responsive Images Articles

Email

GitHub

Minutes

Resolutions

Tools

TPAC 2016

  • TPAC Minutes - September 19, 2016
    • Jim: https://github.com/w3c/wcag21/issues/12
    • Jim: Size of all content.
    • Kathy: This is required up to 200%
    • laura: Look at the test:
      • laura: 1. Display content in a user agent.
      • laura: 2. Increase zoom to the maximum.
      • laura: 3. Decrease zoom to the minimum.
      • laura: 4. Check whether all content scales and is perceivable with no loss of content or functionality (e.g. boxes do not overlap, controls are not obscured or separated from their labels, etc.).
    • Jim: Wanted to elevate the importance, and add a bullet point.
    • <Zakim> MichaelC, you wanted to worry about intersection with layout wrt small viewport issues etc.
    • MichaelC: Wonder if we can realistically that say you can resize everything, whilst not clipping.
    • AC: I'd urge everyone to look at the work David and I did, and expansion of 1.4.4
    • <Zakim> Joshue, you wanted to say this sounds like truly responsive design.
    • Jim: AC to you have a link to the expansion of 1.4.4
    • Josh: Not sure of the difference between that and some of the others. There are a lot of variables, spacial relationships can be temporary.
    • JF: It says that we're adding a new bullet to something that is about blocks of text (only). Also, going from triple-A to A would get serious pushback.
    • AC: I'd say the change to 1.4.4 would change that too.
    • JF: Maybe it needs to be a new guideline or a new SC.
    • Kathy: Researching for the mobile work, something that came out was that there are differences in content. Reading on a smaller screen (paragraphs) wanted to increase text size, but not the menus. Magnify when needed. Be careful that we write or change, there are differences in the content. Users with low vision have done videos on youtube.
    • AC: Just to add, when David and I worked on the Zooming SC, it is a noticable hole how this is handled.
    • AC: You cant in a page do the same things on a web page and a mobile device.
    • KW: Depends on how media queries are set up.
  • Jim's TPAC notes - 27 September 2016
    1. seems more like 1.4.4.
    2. worry about browser capability.
    3. SC wording does not reflect the description - Zoom functions preserve all spatial relationships on the page and all functionality continues to be available.
    4. perhaps making content truly responsive - tho this seems a technique.
    5. zooming images is not in 1.4.8
    6. AAA to A is too big of a jump.
    7. may need a new guideline or SC to expand these concepts
    8. different user preferences depending on what part of content they were interacting with. May only want 1 part of content magnified. have to be careful of very broad SC. User needs - user experience, different size screens. Text size vs zoom ... all are variable depending on situation. SCs apply to all situations.
    9. youtube videos of lowvision folks explaining issues - useful research.
    10. 1 px fonts. stroke width to color contrast ratio.

Wiki Pages

Retrieved from "https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/index.php?title=Resize_content&oldid=3384"