Hi everyone. Josh with Online ADA here, bringing you another video from the WCAG accessibility guidelines. Today we’re covering article 1.4.10, Reflow. This is a AA standard, and I’ll jump into the description.
Content can be presented without loss of information or functionality and without requiring scrolling into dimensions, for, this gets a little technical, bear with me, vertical scrolling content at a width of equivalent to 320 CSS pixels, and horizontal scrolling content at a height equivalent to 256 CSS pixels, except for parts of the content which required two dimensional layout for usage and meaning.
This one gets a lot of obscurity because, it’s unless you actually go through and really dig through the content of the documentation, it can be unclear what they’re referring to. And in this case I wanna make a point to point out that they’re not referring to things like data tables or images or videos that require scrolling when you have a really small window. They’re not referring to those things because it is required for the functionality and the meaning of the content to be able to scroll side to side and see tables. Tables especially are notorious for being able to make responsive and I’ve seen a lot of really good implementation of it. But at the end of the day if your table does scroll off to the side of the window as you make it small, that is actually okay according to this particular WCAG article.
What they’re referring to and what would be a breach of the level A guideline is text that is really long like a desktop and has a fixed width or fixed size, and as you scroll or make the window smaller than the text stays off the screen it doesn’t reflow.
Reflow is idea of text matching the width of the container it’s in and then bumping down to the next line when the screen becomes too small to place it on one line. So It’s gonna break it at the word there’s lots of CSS ways to do this. The flex boxes are a great way to structure your content. They allow for really elegant reflowing without much work and are actually recommended by this article in the documentation as a methodology.
So again, it’s important to understand some user agents are allow the user to scroll or scale the content, up to like 400%, and in that case this is going to effect. You need to have it reflow when the content gets really big like that. You shouldn’t be losing any content off the screen, unless It’s something like an image or a video or a data table. We’re really just talking about text here in this case.
So make sure that when you scroll your browser all the way to 400%, your content isn’t off the screen when you go down to 320 pixels wide and you should be just fine for this article.
Thanks for joining me and we’ll see you in the next video.