Testing application for reflow and resize
According to the Centers for Disease Control and Prevention, approximately 12 million people who are aged 40 years and over in the United States have vision impairment, including 1 million who are blind, three million who have vision impairment after correction, and eight million who have vision impairment due to uncorrected refractive error.
There is an extensive range or spectrum for visual impairment. As only one-twelfth of this population is fully blind, the remaining have some level of vision. In these cases, many need to adjust the screen on their device to understand the content better. They may want to enlarge or resize the text so they can better read it, or they may want to enlarge the entire screen and all its elements. In either case, however they alter the screen, the content and interactive elements on the page must remain fully accessible.
You can test for resizing and flow to gain a better understanding of how to create an accessible experience for users who have a visual impairment but with some level of vision or “low vision.”
WCAG criteria related to reflow and resize
The first principle of the Web Content Accessibility Guidelines (WCAG) is that the information and user interface components are presentable to users in ways they can perceive; the content cannot be invisible to all of their senses. The 1.4 guideline indicates that the content is distinguishable so that it is easier for users to see and hear content, including foreground and background. In this guideline lies the success criterion for both resize and reflow.
Success Criterion 1.4.4 Resize Text (Level AA)
The 1.4.4 criterion states that text users can resize without assistive technology up to 200 percent without the loss of content or functionality. The only exceptions are captions and images of text.
The scaling of content is primarily the responsibility of a user agent. A user agent is any software that retrieves web content for end users, such as a web browser. However, the author of the content is responsible for creating web content that does not prevent the user agent from scaling the content effectively.
Design fails to meet these criteria if:
- Resizing visually rendered text up to 200 percent clips, truncates, or obscures the text, image, or controls.
- Resizing visually rendered text up to 200 percent does not resize text-based form controls.
- Viewport units to resize text are incorrect.
Success Criterion 1.4.10 Reflow (Level AA)
The criterion states that the users can access content without loss of information or functionality and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels.
- Horizontal scrolling content at a height equivalent to 256 CSS pixels.
The criterion excludes parts of the content that require a two-dimensional layout for usage or meaning.
Failure to meet these criteria commonly results in content that disappears or is unavailable after reflow.
Testing resize
The success criterion requires users to resize the text in their application up to 200 percent. The best method to test that your application meets this criterion is to test the same way in which users experience the application.
- Display content in a user agent with a window width of 1280 pixels.
- Increase the zoom for all content to 200 percent.
- Check whether all content scales and is perceivable with no loss of content or functionality (for example, boxes do not overlap, and controls are not obscured or separated from their labels).
- If horizontal scrolling is present, check that the content that causes scrolling requires the scrolling to make sense.
The following figure shows a failure to meet the success criterion. The text overlaps other text on the screen when enlarged.
Testing reflow
The success criterion for reflow requires users to magnify any page in their application up to 400 percent without losing functionality. The best method to test that your application meets this criterion is to test the same way in which users experience the application.
Testing reflow with the browser Zoom feature
- Display content in a user agent by using a window width of 1280 pixels.
- Increase zoom for all content to 400 percent.
- Check whether all features scale on the screen without loss of functionality.
- If horizontal scrolling is present, check that the content that causes scrolling requires the scrolling to make sense.
Testing reflow with the Inspect Element feature
- In your browser, right-click (or use F12 on Windows or use command+option+i on Mac) and then select Inspect.
- Click the Toggle device toolbar icon.
- In the Dimensions: Responsive text boxes, enter 320 and 256 pixels.
- Check whether all features scale on the screen without loss of functionality
- If horizontal scrolling is present, check that the content that causes scrolling requires the scrolling to make sense.
The following figure shows an example of testing responsive design with the Inspect Element feature:
Testing with ZoomText
- Open the ZoomText application.
- Select the Magnifier tab.
- Select Zoom Level, and then enter four.
- Select Window dropdown. Choose option "One Monitor" . Select Full display. Review page in this mode.
- Now select Window dropdown. Choose opiton "One Monitor" Select Lens. Review page in this mode.
- When reviewing page, check whether all features scale without the loss of functionality.
The following figure shows an example of magnifier settings in ZoomText:
Check your knowledge with the following interaction:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?