RE: { Sticky Bar } 400% & Keyboard Navigation

This sort of thing is very common. WCAG SC 1.4.10 says “Content can be presented without loss of information or functionality…”, so strictly speaking the sticky bar does not cause this SC to fail until it fills so much of the viewport that some other content is no longer visible. In practice, the page would probably be unusable long before that.

The “Using media queries to un-fixing sticky headers / footers” technique provides a solution to this, by unsticking the sticky bar when it becomes too large. See https://www.w3.org/WAI/WCAG21/Techniques/css/C34.


Screen reader users are less affected by this design than almost anyone else. They can still use the page even when the sticky bar is so large that it exceeds the viewport size and the rest of the page cannot be seen at all. They would benefit from instructions saying that items are being added to the list at the bottom of the page (as long as that’s where it is in the DOM). If the list has a heading, they can navigate to it easily, which is more than a sighted keyboard user can do.

When faced with intransigent designers who are wedded to a bad design, few things are better than user testing to demonstrate your point. Data beats opinion every time.

Steve Green
Managing Director
Test Partners Ltd


From: caroline <woodward.caroline@gmail.com>
Sent: 02 March 2021 14:24
To: w3c-wai-ig@w3.org
Subject: { Sticky Bar } 400% & Keyboard Navigation

Has anyone worked with a sticky bar that grows when a user makes a selection from the page/screen? We have a page where a user selects items to purchase and there is a sticky bar at the bottom that collects the selection like a cart. A person can also adjust the quantity of the items in that bar.

I have concerns around how it overtakes the page when increasing the % as well as line and character spacing. With respect to screen readers, I think some instructions on how this page works would be needed. (the product expands to display descriptions).

In the meeting with the designers the requirement was that the sticky bar must be on the same page as the product list. I wondered if giving the user to option to expand and collapse the bar would help. Although having to navigate between the product and the sticky bar itself seems like a chore as well. i suggested perhaps giving the user the option to have the cart as a sticky bar or on a separate page but that was shot down.

Any thoughts? Hope this doesn't sound too abstract