This is just a quick reflection about CSS positioning techniques sticky and fixed and their negative impacts on accessibility. I must confess that I liked the “floating” elements before I was trying to make web solutions that work for multiple people and conform to WCAG. They can add to usability, I will not argue that. They can be familiar patterns found in other software and can also be extremely helpful for users – like for example making the heading row of a table “stick” to the top when scrolling down with hundreds or even more rows. No objections there.
But on the other hand such user interface patterns can also introduce barriers to some groups of users and therefore we must really plan their usage well. Some groups of users need to zoom in a bit and others need to zoom in a lot. If website or web application wasn’t build to support this zooming and also uses a sticky or fixed element then it will quickly be obvious that this element could cover too much of screen, especially on high zoom or small screens. User experience and user interface designers should plan for such scenarios and together with developers find good solutions. Maybe some scenarios like this should not use sticky elements at all and they may be disabled with CSS or JavaScript. I will not provide an example but this should be planned for in advance.
Another problem can be device orientation – some users prefer landscape for example – and again – when sticky elements are not designed to work in both orientations it can quickly become a huge problem. Combine this with zooming and it only gets worse.
Third scenario that crossed my mind are keyboard only users. If this sticky element has an interactive control (for example main navigation that can commonly be in a sticky website header) – we can cause problems for keyboard only users – especially when this sticky content is covering other interactive elements that receive focus but are hidden behind sticky elements. This is also a very common situation when producers do not plan for different user groups. Update 14th of July 2023 – this will soon be covered by newest WCAG, please check “WCAG 2.2 brings more bad news for sticky elements and more good news for users“.
Another scenario that has to be evaluated before implementing sticky and fixed elements is a combination of interactive elements in sticky bottom parts of pages that also have an infinitive scroll. This pattern can work well for sighted mouse users but can really break the experience for keyboard only users, and together with zooming and orientation variations we can quickly think of multiple other problems.
“WCAG 2.2 brings more bad news for sticky elements and more good news for users” adds additional considerations that you should think about when implementing sticky and fixed elements. Not for the sake of WCAG but for the sake of all keyboard only users (and with that also users of assistive technologies based on keyboard interfaces to be fair).
To conclude – as always – be cautious when trying to make things more usable for a group of users and do not neglect other groups as well. Sticky and fixed elements may seem appropriate for visitors, but they should be well planned at design level and well implemented at code level as well.
