At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Supporting the reflow of content is also known as 'Responsive Web Design'. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available. When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). For example, zooming into a vertically scrolling page should not cause content to be hidden to one side. It is also important that content is not hidden off-screen. Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line.Īvoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. Enlargement enables perception of characters. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.įor people with low vision, enlarged text with reflow enables reading. The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. Understanding Success Criterion 1.4.Understanding Reflow Understanding Reflow Intent of this Success Criterion.Reflow your content into a single vertical column when enlarged.ģ20 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.Ģ56 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%. It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.
Where multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view).ensure horizontal content doesn’t require a vertical scroll at a height of 256 CSS pixels.Ensure vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels.When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.
Some users with visual impairments need to resize text to read it comfortably. For ‘Reflow’, you must ensure all content retains meaning and function without scrolling in two dimensions.
0 kommentar(er)
