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.
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.