Design For 400% Zoom Reflow
Many parts of Web Content Accessibility Guidelines (WCAG) 2.1 which help the Web become more accessible — are familiar to product designers. Contrast ratio, font sizes, and other concepts are well-known and often considered.
Less known, but equally important is a concept called “reflow,”. It is also known as 400% zoom design, which is the maximum magnification provided by browsers.
Facts about 400% zoom design
WCAG 2.1 defines the success criterion for reflow as:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
1. Vertical scrolling content at a width equivalent to 320 CSS pixels.
2. Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content that require a two-dimensional layout for usage or meaning.
In short, for websites that primarily use vertical scrolling to view content, web content should be designed to be viewable at a width equivalent to 320 CSS pixels. It is also the standard width for mobile design.
How to view 400% zoom
On a web page, hold the Ctrl (Command/⌘) key and press the + (plus) key repeatedly to zoom in until you have reached 400% zoom.
In Chrome, you can also go to the “kebab” icon (three dots) on the top right and use the “Zoom” controller on the dropdown menu.
Why 400% = 320px
Reflow is based on a 1280px standard layout, of which 320 px is ¼ or 400% magnification, the same standard width as mobile layout.
Reflow’s Impact
Reflow has been included in WCAG since 2018 to support people who need to enlarged text.
Risks of not adhering to 400% zoom guidelines
VMware has a strong commitment to accessibility as a part of our Diversity, Equity and Inclusion objectives. In fact, each of our products receives an a11y score for its design.
Before a product launches, it will also get a Voluntary Product Accessibility Template (VPAT) which contains accessibility conformation of the products offered. These are publicly available and used by customers to evaluate a product. Any WCAG criteria rated as “Does Not Support” makes a product less competitive. VPATs are required by public sector (government customers, or customers who do business with the government and customers in healthcare, finance, and education). Each industry has its own standards for what level of accessibility features it requires.
Implementation challenges
VMware Design System — Clarity has a high level of accessibility coded into it. When lots of small (atomic) components are combined into more complex (molecules) some accessibility may be reduced. Designers will need to ensure that atomic components remain 400% zoom-accessible when combined.
A few tips for designing 400% zoom.
There are a few tips that can help designers and dev teams produce 400% zoom assets within a very limited time.
1. Involve your stakeholders and understand their thoughts
When designing for 400% zoom for the first time, it might take longer than expected to produce the proper assets for the deliverables. It’s helpful to set clear expectations on timing with your stakeholders and understand their process and timeline. These conversations can also be a great opportunity to educate your stakeholders on the value of 400% zoom accessibility.
For one product I worked on, I hosted a meeting with the product manager, the engineer lead, the UI developers, my manager, and the internal accessibility strategist. I let the accessibility strategist introduce the WCAG guidelines and 400% zoom and its strategic priority in VMware. The product manager helped us determine the priority level. The UI developers shared their development process and what screen size was needed. The team usually focuses on primary design first and could make tweaks for 400% zoom. I was able to prioritize the 400% zoom goal on my roadmap.
2.Follow the grid system
It might sound obvious, but following the predefined grid system can save you substantial efforts in designing for 400% zoom. Clarity’s grid system does a good job of making content greater than 576px responsive. Unless you have special requirements for the layout, you don’t need to design for every single breakpoint. There’s a good chance you only need to design for desktop and a 320px-wide or mobile screen.
3. Design on the desktop first but with accessibility on small screen in mind
Most enterprise product design is desktop-focused. If you design with only desktop in mind, you may cause yourself a roadblock when you want to adapt your design for 400% zoom. Design for desktop first, yes, but always with accessibility on small screen in mind. Picturing how components and interactions look on 400% zoom can save you the trouble of nudging pixels later.
It’s easier to do this if you understand the reason for 400% zoom and how the browser behaves when users magnify content. When a user triggers magnification, the browser enlarges the content on the page. Since the content width is larger than the screen width, it will turn into two-direction scrolling. If the content isn’t responsive, it will cut the off the content and cause interaction difficulty for keyboard users. Think about how you design a “mobile” version for people with low vision using “Tab” to navigate the screen vertically.
4. Leverage existing reflow design:
It is helpful and timesaving to leverage existing resources. Many products partially support 400% zoom. Check their staging environment to learn how the design changes from desktop to 320px.
When reusing molecule-level design components, they might not be responsive at 320px. For example, the time selector is a common molecule-level design component widely used in products, however, it does not support 320px. Work with your developer to check your design.
5. Think about the interaction between components
It is easy to miss things when you simply consider design for 400% zoom as “re-arranged puzzle pieces.”. Instead, consider components that have interaction as a whole to design for the smaller screen.
A good example would be a design with a “collapse/expand” filter side panel. On the desktop, the panel collapses/expands horizontally, but it will get cropped on a small screen, so we made it collapse/expand vertically in 400% zoom.
6. Understand exemptions
Understanding exemptions for 400% zoom reduces your work. Some components require 2-dimensional scrolling such as data grids/tables, maps, complex diagrams, and games. These do not “shrink” to the width of the size of the display. For example, in the 400% zoom view for a data grid, the data grid should remain about the same size and all users should be able to scroll horizontally to access the data grid.
Reference: W3C Data Grid Examples
7. Connect with an accessibility team member and conduct accessibility reviews earlier in the design process — and ask questions
It’s good to conduct an accessibility review. I would recommend engaging in this process as early as possible. It doesn’t have to be an official accessibility review if you don’t feel comfortable showing your design when it’s not ready. Connecting with accessibility members informally if you have a dedicated accessibility team, show your prototype, and ask them if they foresee any difficulty in the design. Doing this will reduce the amount of back-and-forth between you and the dev teams.
Remember to involve your developer in the accessibility review session. It’s a good transition and developers can point out the limitations since they know what code libraries are and aren’t capable of.
8. Document your handoff doc
Chances are, you or other designers will reuse those 400% zoom designs. Properly document them in Confluence or Figma and share them with your teammates and the accessibility team for future education and accelerate the design process.
Reference:
1. WCAG 2.1
2. VMware Accessibility VPATs
3. Accessibility for vSphere
4. Accessibility Developer Checklist
5. VMware Accessibility Success
Special thanks to my manager Soomee Kang, STEVEN MORGAN, Karen Rogers, and Red Dolan who provided important feedback on the article. Also, thanks to Amy from the accessibility team who provided detailed references regarding this topic.
