It is allowed to have sections of the page scroll into the other direction, but it must stay inside the viewport. Scrolling of the web page needs to happen in only one direction at a time. Resize the viewport width to 320px by 256px. That said, once you are on a mobile viewport, you still need to be able to resize to 200% without losing any information (but scrolling horizontally is then allowed). And Reflow has no requirement that the resulting text size needs to be at a certain size. A 8px size font in the 320px view would still meet the requirement of Resize Text. If your base font size is 16px, 200% is 32px (and note that these are real on-screen pixels, not CSS pixels dependent on your viewport here). Even if your media query uses a lower font size for mobile devices, it would need to be very small to fall under the 200% threshold. How do these two success criteria work together?įrom a desktop view, if you meet Reflow, you almost certainly also meet Resize Text. Zoom to 200%, your viewport width halves. Using browser zoom on a desktop browser is functionally equivalent with changing the width of the viewport. Secondly, if you use a desktop browser on a 1280px wide monitor and zoom in to 400% the width of the viewport is quartered internally in the browser… to 320px. Firstly, 320px is a very common viewport width for smartphones.
The reason for picking 320px/256px have been of practical nature. There is an exception for content that requires two-dimensionality to be understood, example tables, maps, or some charts. It specifies that the content can be presented in a way that only requires scrolling in one direction at 320px for content that scrolls vertically (up and down) and 256px for content that scrolls horizontally (left and right). Reflow has nothing to do with resizing the size of the text at all. Reflow was introduced to support users with low vision to easier navigate zoomed-in experiences by giving them a viewport size that – guaranteed – would not scroll horizontally. It totally conforms if your website grows to twice the width and height when resizing the text to 200%, even if that means horizontal scrolling. And, more importantly, this success criterion gives no guidance on scrolling. As long as the text does not get completely lost (for example through overflow: hidden or text running into each other or behind other objects), your layout is allowed to break. That said, this SC is relatively permissive. Of course some ways are better than others and adjusting the viewport to resize text is frequently the most consistent way to do it, especially on websites that have been implemented in a responsive way.
This success criterion that was introduced with WCAG 2.0 on level AA covers text resizing without assistive technologies. While these two success criteria seem related, they cover different use cases.
#Wcag reflow how to
There seems to be a confusion about the relationship and how to test for the WCAG 2.1 Success Criteria 1.4.4 Resize Text and 1.4.10 Reflow.
0 kommentar(er)
