In our last accessibility article we looked at the requirement to be able to resize text up to 200% and how to deal with any resulting issues. One of the challenges presented when resizing text is how to reflow the content to adjust to a larger text size. In this latest article we will look specifically at the requirement to reflow content.
Reflow
One of the requirements of the Web Content Accessibility “Distinguishable” guideline is that content (not just text) should be capable of being shown at small browser viewport sizes without any loss of functionality or content. It should also display without both horizontal and vertical scrollbars (one is fine, but not both). Let’s delve into this a bit further.
Why is it important?
The aim is to support users with low vision so that they can enlarge the content and only need to scroll in one direction in order to follow the text, while being confident that they are not missing out on any content or functionality.
This has the additional benefit of ensuring your website will display at least adequately on devices and viewports of any size.
What do we mean by small browser viewport sizes?
Small browser viewport sizes would be 320px wide and 256px high. This is the same as a 1280 x 1024px viewport zoomed to 400%.
Are any types of content excluded?
Anything that relies on a two-dimensional layout is excluded. For example, videos, data tables, games, and any images that contain information for understanding, like maps, presentations or diagrams.
A more niche exclusion covers web applications that need to show a toolbar on-screen at the same time as the content, if there is insufficient space to display all the necessary elements of the toolbar as well as the content then it is permissible for the page to scroll horizontally for the toolbar as well as vertically for the content.
Reflow techniques
On the web, the basic reflow technique involves the natural wrapping of content onto new lines. Where basic HTML elements are used with no styling, the page would be virtually guaranteed to meet this criterion because everything would naturally reflow as the viewport size changed.
However, CSS is used to apply more complex layouts and styling and so CSS must also be assessed to ensure those layouts adapt to the viewport size available and allow the content to be accessible. The primary approach to doing this is known as “responsive web design”. The key to it is the CSS Media Query, which allows a user to specify a viewport state at which alternate styling should be applied.
With responsive design it is possible to shift from a multi-column layout to a single column layout to ensure there is space for the content to remain legible without an additional scrollbar appearing. There are many predefined “grid systems” available which allow a user to quickly bring in a columnar, media query-based responsive design structure to a page. All popular CSS frameworks will include one. For an example see Lightning’s grid or Bootstrap’s grid.
While media queries are central to responsive design, more recent additions to CSS also play an important part in the developer’s toolset for creating responsive, reflowing web pages:
- Flexbox allows a user to define how horizontal or vertical space should be divided between elements of the UI. This provides the functionality to adapt appropriately to changing viewport width/height
- CSS Grid allows users to compose UI elements in a two-dimensional grid. It incorporates media queries and also allows users to change the layout of the grid structure accordingly
- Container queries are equivalent to media queries but measure the available height/width of a container within the page (e.g. a div) rather than the viewport as a whole, allowing a user to create components within a page that adapt independently to the space they have available
Find out more
If you’d like to find out more about reflow issues in website design, the following article offers further guidance: Understanding Success Criterion 1.4.10: Reflow. Here at OCC, we are planning a redesign of our website and will be incorporating accessibility guidelines within this.