Wcag reflow windows#

While you resize the developer tool window, you should see the dimensions of the web page window update, on the top right corner of the web page window.Ĭheck that you can see all of the web page's content without needing to scroll left and right.Ģ. (If your mouse cursor is in the right place, it will show left and right arrows). Place your mouse on the separation between the web page and the developer tool window. Make the developer tool window bigger, so that the web page window is just 320px wide.Īssuming that the developer tool window is on the right hand side of the web page content: Open the developer tools by right clicking anywhere on the page and selecting 'Inspect element'

Wcag reflow windows#

You can use Ctrl +/- on Windows and Cmd +/- on macOS to change the zoom level. Checking at 100% zoom in a 320px wide window On a 1280px screen when the browser’s zoom is set to 400%.On a 640px screen when the browser’s zoom is set to 200%.This same layout is what users will see ….Make sure that your layout works on a 320px screen (like an iPhone 5, or the original iPhone SE), not just on a wider mobile device.This forces you to decide how all of the page’s elements fit in one column.Design ‘Mobile first’: design the layout for narrow screens first.See the W3C’s detailed explanation of this guideline with techniques and examples. Using the CSS declarations such as word-wrap: break-word on in small viewports will help to avoid horizontal scrolling at all. The use of formatted content (such as code) can cause horizontal scrolling. Giving containers a width that’s relative to the width of the viewport (using % or vh for example).containers and letting content reflow when it can’t fit horizontally within the viewport.Flexbox / CSS grid to let elements change their width or reflow onto several lines based on the width of the viewport.This is about using Responsive Web Design techniques, such as:

It's not possible to read what it says, and the button is completely off screen:

So the modal takes up more horizontal space:Īs soon as we reach 200% zoom, the modal doesn't fit horizontally on screen any more:Īt 400% zoom, the modal is completely unusable. On a 1280px-wide window at the default (100%) zoom level, the whole banner fits on screen:Īs we increase the browser zoom level, the modal is still 700 CSS pixels wide, but 1 CSS pixel becomes wider. The 'cookies policy' modal at the bottom of the screen has a fixed width of 700 CSS px.

it won’t fit within a 1280px-wide window at 400% zoom.įailure example: Reddit ‘cookies policy’ dialog The example shown in a video:.

If you give an element a fixed width that’s larger than 320px: Common mistake #3: Giving an element a fixed width that’s larger than 320px Common mistake #2: Scrolling bars appears both horizontally and vertically when using browser zoom. Increasing the browser’s zoom level changes the size of 1 CSS pixel.įor example, at 400% zoom, 1 CSS pixel is 1/23th of an inch, rather than 1/92th.Ĭommon mistakes Common mistake #1: Content does not reflow to a single column when zoomed.

It’s not related to the size of a physical pixel). (Note: A CSS pixel is an absolute, fixed length unit. If content is hidden off screen in both the vertical and horizontal directly, it’s more likely people will miss it.ġ CSS pixel is defined as 1/92th of an inch at 100% zoom.Needing to scroll in the direction of reading in order to reveal lines that are cut off makes reading difficult.