Important note: This Wiki page is edited by participants of the AGWG. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
Size of all elements
@@ Note: The new title of this page should be "Resize content". Shawn has Action 82 to change "Size of all elements" to "Size of all content" in the Accessibility Requirements for People with Low Vision document.
- 1 SC Shortname
- 2 SC Text
- 3 Suggested Priority Level
- 4 Related Glossary additions or changes
- 5 What Principle and Guideline the SC falls within.
- 6 Description
- 7 Benefits
- 8 Testability
- 9 Techniques
- 10 Related Information
(Was: "Size (all content)", but trying to align and extend 1.4.4 Resize 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.
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
Related Glossary additions or changes
What Principle and Guideline the SC falls within.
Principle 1, Guideline 1.4.4 Resize text
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.
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.
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.
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.
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.
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?
- Display content in a user agent with a window width of 1280px.
- Increase zoom (for all content) to 400%.
- 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.).
- If horizontal scrolling is present, check that the content causing scrolling would not make sense without the scrolling.
- Check #3 is true.
- Check #4 is true.
All existing techniques for Proposed New SC: "Size (all content)"
- 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:
- https://www.w3.org/TR/WCAG20-TECHS/C12 C12: Using percent for font sizes (CSS) OR
- C13: Using named font sizes (CSS) OR
- C14: Using em units for font sizes (CSS) OR
- C24: Using percentage values in CSS for container sizes (CSS) OR
- FLASH33: Using relative values for Flash object dimensions (Flash)
- SCR34: Calculating size and position in a way that scales with text size (Scripting) OR
- 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
- Using fluid grids. Ref: fluid grids
- Using em based media queries. Ref: em based media queries
- Using responsive images. Ref: HTML picture element and srcset attribute
- @@ Consider a failure technique on fixed sized containers and fixed position content??
- @@ 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.
- @@ (HTML) Consider failure for preformatted text or excluding this as an exception to no two dimensional scrolling.
- Using collapsable menus, e.g. https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8#.drw899y4d
- ACTION-73: Write sc - size of all elements - on Laura Carlson, August 25, 2016
- ACTION-82: Update user needs/requirements with change size of all elements->content - on Shawn Henry, September 1, 2016
- Don't Disable Zoom - Adrian Roselli
- Don't disable pinch to zoom - Jamie Knight
- What's the point of 'meta viewport user-scalable=no' in the Google Maps API - Stack Overflow
- Browser zoom great for accessibility - Alastair Campbell
- Zoom for Fixed and Responsive Sites - Alastair Campbell
- Why Browser Zoom Sucks for Low Vision Users (slide deck) Denis Boudreau
- The Two Types of Browser Zoom - Jeff Atwood
Responsive Images Articles
- Built-in Browser Support for Responsive Images - Pearl Chen
- What Does Responsive Web Design Have to Do with Accessibility? - Jonathan Avila
- Responsive Web Design: Preserving Images' Aspect Ratio - Bruce Lawson
- Bruce Lawson picture and friends HTML responsive images (Video) - Bruce Lawson
- Improving Responsive Images with the Picture Element - Annarita Tranfici
- Responsive Images Done Right: A Guide To <picture> And srcset - Eric Portis
- Bringing Responsive Images to Browsers - Mat Marquis
- Resize Content, Size of All Interface and Resize Text. (Thread) - Wayne Dick, 18 October 2016
- Sizing SCs - post informal meeting - Alastair Campbell, 6 October 2016
- Combining the sizing SCs Thread - Alastair Campbell, 3 October 2016
- lvtf-ACTION-73: Write SC - size of all elements - LVTF List
- Thread: Jonathan's concern: Zoom in responsive drops content - WCAG WG List
- Thread: Enabling Zoom on Mobile Devices - WCAG WG List
- Thread: Pinch zoom - WCAG WG List
- Thread: Any official clarification on Text-only zoom and RWD? - WebAIM
- Thread: Browser zooming sufficient for WCAG 1.4.4 (resize text) - WebAIM
- WCAG WG 2.1 GitHub Issue 77 - Opened by Jim Allan, 1 December 2016
- WCAG WG 2.1 GitHub Issue 12 - Opened by Jim Allan, 15 September 2016
- WCAG 1.4.8 item 5 200% Raised by Jim Allan, 16 June 2016
- Reference to 200% zoom implies WCAG requires text zoom only - WAI Tutorial GitHub Issue 293, raised by David MacDonald, 31 March 2015
- Proposal: devs SHOULD NOT use content="user-scalable=no | maximum-scale=1.0 " on meta HTML WG GitHub Issue 602, raised by Steve Faulkner, 28 September 2016
- 1 December 2016 LVTF Minutes
- 13 October 2016 LVTF Minutes
- 06 October 2016 LVTF Minutes (Informal Meeting)
- 29 September 2016 LVTF Minutes
- 15 September 2016 LVTF Minutes
- 01 September 2016 LVTF Minutes
- 14 Jul 2016 LVTF Minutes
- 2 May 2016 LVTF Minutes 1
- 20 Jan 2016 LVTF Minutes
- Ready for WCAG - 1 December 2016
- Always Zoom - Matt Brubeck
- Zoom - Chrome Extension
- zoomWheel - Chrome Web Store
- Change text, image, and video sizes (zoom) - Chrome Help
- Font size and zoom - increase the size of web pages (Firefox) - Mozilla Support
- 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
- seems more like 1.4.4.
- worry about browser capability.
- SC wording does not reflect the description - Zoom functions preserve all spatial relationships on the page and all functionality continues to be available.
- perhaps making content truly responsive - tho this seems a technique.
- zooming images is not in 1.4.8
- AAA to A is too big of a jump.
- may need a new guideline or SC to expand these concepts
- 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.
- youtube videos of lowvision folks explaining issues - useful research.
- 1 px fonts. stroke width to color contrast ratio.
- Use cases - LVTF Wiki
- Possible wording from Jason/David for LVTF re: zoom without horizontal scroll - WCAG WG Wiki
- Semantic Zoom - InfoVis Wiki
- Zoom - InfoVis Wiki
- Tracking Success Criteria Progress