Reflow: Fixed Position Fields

[WayneEDick]

This problem occurs mostly with headers and footers but bands on the left and right can be just as disruptive.

My example is the worst I've ever seen, but secondary information with fixed position often crowds out real information. This occurs because the assumption at low resolution is a cell phone in portrait orientation. A person with low vision is using landscape.

At low resolutions headers and footers should scroll out of the way.

There is also a problem with applications that have non-collapsible vertical panes. If these enlarge with zoom, and no scrolling is provided, the page becomes unusable or difficult.

There are good examples
If you enlarge gitHub the header gets quite big, but when you scroll, it scrolls off the screen. That is much more useful.

The sidebar below enlarges but a scroll is provided for using the rest of the screen.

We need some techniques for this.

Any ideas?

[WayneEDick]

Would these examples simply represent non-functional pages?
I think there are at least three techniques:

1: In a responsive case that includes low resolution change position to static for fixed fields.
2: Provide buttons (hamburger etc.) for headers, footers, panes etc and limit their size to 10%.
3: Make fixed headers, footers and panes collapsible.

All of these work

[mraccess77]

Wayne, that sounds like a good list to me. In addition, there is some content that can merely be closed or dismissed once read. I brought up this issue in my low vision presentation at CSUN.

Other issues blur the line between this and the hover SC -- for example, I've hover content that appears off the side of screen with zoom and there are scrollbars to scroll to the content but scrolling causes it to go away. generally I've seen this horizontally but there isn't a reason that this could happen vertically as well.

Another issue is snap scrolling where the content is below vertically but if you try to arrow or scroll to it the page snap scrolls to the next section preventing you from accessing the content with zoom. The issue isn't so much about that the content isn't there but mechanisms on the page prevent you from getting to it. In addition I've also seen scroll jacking where the page takes away the control+mouse wheels capability to scroll and you have to use other browser features to use zoom.

[StommePoes]

"Would these examples simply represent non-functional pages?"

Absolutely, in my opinion.

I get hit with these stickies all the time, and they are as bad as the screenshots for me because at just 150% I get maybe 3 lines of text on a 12" laptop. Medium.com is a particularly horrid site, as are several news sites.
I ding sites I audit that do this with text-enlarge fails because the solution for developers can be pretty simple: they're usually already doing width-based media queries. A height-based one using em's which removes crazy scrolling, sticky-crap and everything like that can do the trick while still allowing much of that styling to work as expected on a non-zoomed mobile device.
I don't think the fixed things need to be collapsable-- it should also be okay to simply remove their stickiness at a minimum height as well (often the content being sticky doesn't need it: headers showing what you already know, like the site name, or social media junk that's absolutely inessential). Side panes make more sense with the collapse bit-- Jira at my zoom level does mean if I want to access those buttons, I need to "open" it. So I'd adjust #3 to offer both options.

#2 may well hit some coga stuff. Since hamburgers and whatnot tend to appear when the developers expect the user to be on a touchscreen/mobile, would there need to be a note about not assuming no keyboards or user swipes for those mobile/zoom-appearing controls?

I did figure the new SC on hover regarding "Persistence" would cover scrolling losing hover content, since I thought "Persistence" would equally help whether it was browser zoom or something non-reflowing like ZoomText.

Here, I've zoomed out to read the message that popped up, but still not enough to close the popup message to read mail. Composing mail often only gave me 2 lines of text to see (the HTML version of Gmail is a godsend). Since "close" controls are unavailable it of course fails text-resize, but the cause in this case is the sticky-madness.

[WayneEDick]

I agree Mallory. The fixed headings and footings breaks functionality. Also, removing fixed position works well. That was an interesting letter. Perhaps we need need to make them techniques. Wayne

…

On Tue, May 1, 2018 at 1:12 PM Mallory ***@***.***> wrote: "Would these examples simply represent non-functional pages?" Absolutely, in my opinion. I get hit with these stickies all the time, and they are as bad as the screenshots for me because at just 150% I get maybe 3 lines of text on a 12" laptop. Medium.com is a particularly horrid site, as are several news sites. I ding sites I audit that do this with text-enlarge fails because the solution for developers can be pretty simple: they're usually already doing width-based media queries. A height-based one using em's which removes crazy scrolling, sticky-crap and everything like that can do the trick. I don't think the fixed things need to be collapsable-- it should *also* be okay to simply remove their stickiness at a minimum height as well (often the content being sticky doesn't need it: headers showing what you already know, like the site name, or social media junk that's absolutely inessential). Side panes make more sense with the collapse bit-- Jira at my zoom level does mean if I want to access those buttons, I need to "open" it. So I'd adjust #3 <#3> to offer both options. #2 <#2> may well hit some coga stuff. Since hamburgers and whatnot tend to appear when the developers expect the user to be on a touchscreen/mobile, there would need to be a note about not assuming no keyboards or user swipes for those mobile/zoom-appearing controls. I did figure the new SC on hover regarding "Persistence" would cover scrolling losing hover content, since I thought "Persistence" would equally help whether it was browser zoom or something non-reflowing like ZoomText. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#846 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH0OFzInc5D_ojnB1ruZO_0sD0Q9kIibks5tuMGngaJpZM4TCmzy> .

[StommePoes]

They'd certainly be useful techniques, I think. Devs just don't tend to think of them but once you point them out, as I said it's not a difficult or complex fix, plus it's pretty easy for them to check.

[alastc]

We have a technique called "Using vertical media queries to un-fix sticky headers / footers (New, advisory)" in the techniques listed for reflow:
https://www.w3.org/WAI/GL/wiki/Wcag21-techniques#Reflow

If anyone (in the working group) would like to add create a technique please add it there and follow the steps for creating it.

[mraccess77]

Hi Alastair, I happened to see the related technique "Text given viewport units that does not rescale" and was going to take failure technique. However, after starting it I realized that it might not really be a failure of SC 1.4.10 but instead is better a failure of SC 1.4.4. Would you agree?

[alastc]

Yes, it has been triggered by our work around 1.4.10, but it fits under text-size.

Thanks,

[michael-n-cooper]

This issue was moved to w3c/wcag#366