Fixed footer/header examples

Hi everyone,

During the call we were discussing the github issue about sticky headers/footers and focus indicators:
https://github.com/w3c/wcag/issues/952

There were two aspects:

  1.  Does the SC text apply when the focus moves behind another element on the page? (In a way the user can get around.)
  2.  Is there a viable solution?

For the second aspect I was struggling finding examples, so I created a couple (from previous examples) as demonstrations:


  1.  The typical way it works, the focus goes behind the footer/header as you go down/up:
https://alastairc.uk/tests/wcag22-examples/sticky-footer.html


  1.  Making the 'main' area scroll on its own:
https://alastairc.uk/tests/wcag22-examples/sticky-footer2.html

NB: I took out the media queries that un-stick the headers when zoomed in, that would undermine the demo!

So the second version looks like it works, but in my (limited) experience it seems very flaky because you have to set the height of the header/footer to match the top/bottom of the main area. That means that if the sticky element changes height (e.g. due to word-wraps) the layout breaks for everyone.

Does anyone have any good (in the wild) examples for either type? Or more experience with trying to solve this issue?

Kind regards,

-Alastair

--

www.nomensa.com<http://www.nomensa.com/> / @alastc