Understanding
An essential aspect of accessibility is ensuring reflow support, allowing users with low vision to magnify content in their browser up to 400% (or to a 320px width viewport) without losing access to information or functionality. By aligning your implementations with the Horizon Design System's reflow guidelines and techniques, you can create products that are usable and accessible to a wider audience.
Reflow in Horizon
The components in the Horizon design system have incorporated reflow behaviors and techniques. By leveraging our pre-built components and aligning your implementations with the design system’s best practices for reflow, you can create designs and implementations that respond to different magnification levels.
Designing
When implementing designs that support reflow, consider the following best practices to align with the Horizon design system:
- Design down to a minimum viewport width of 320 pixels, ensuring that all content and functionality is available in a single column layout
- Use relative sizing and percentages to allow content to stretch and adapt to different column widths
- Implement appropriate breakpoints based on common device sizes and the specific needs of your users and workflows
- Ensure that all content and functionality are available at higher magnification levels without the need for horizontal scrolling
- Test your implementation at various magnification levels, using different browsers and assistive technologies to ensure a consistent and accessible experience
Responsive Design: Adapt the layout and positioning of components to fit smaller viewport sizes as the user magnifies the page.
Preserve Functionality: Don’t remove content or functionality at higher magnification levels without offering equivalent functionality elsewhere. For example, you may place tabs within an overflow tab or dropdown as the viewport shrinks.
Long scrolling pages: Utilize long scrolling pages to present content in a single column, reducing the need for complex navigation and maintaining a more linear context for the user.
Two-dimensional scrolling: Don’t require users to scroll in two dimensions to access content (limited exceptions for certain types of content such as maps).
Screen Takeovers: Some components may be configured to fill the screen at higher magnification levels.
Excessive Sticky Content: Avoid misusing sticky headers, footers, or persistent sidebars in a way that take up too much screen real estate at higher magnification levels.
Collapsible Containers: This may include using accordions, toggles, and drawers to organize information.
Overlapping Content: Do not allow content to overlap when magnified is inaccessible.
Annotating
The accessibility specification template includes a section to show the behavior of components and screens at viewport widths down to 320px width. When annotating for reflow, consider the following:
- Provide clear illustrations or screenshots of how the component or screen should appear at various viewport widths, including 320px.
- Describe any transformations or layout changes that occur as the viewport width decreases, such as stacking elements or content that collapses into menus.
- Specify any content or functionality that may be hidden or revealed using toggles, accordions, or other techniques at smaller viewport widths.
- Indicate how the component or screen should behave when magnified up to 400%, including any necessary adjustments to font sizes, padding, or margins to maintain readability and usability.