A sticky header looks great in a design mock-up. It also breaks accessibility in three ways that most automated scanners do not catch and most QA passes do not test. If your site has a sticky navigation that stays at the top as users scroll, this article is for you. By the end you will know exactly which WCAG 2.2 criteria your sticky header probably fails, how to test for each one in under five minutes, and how to fix the issues without ditching the sticky design that your designer or client is attached to. Why sticky headers cause accessibility problems Sticky headers (sometimes called "fixed" or "pinned" headers) use CSS position: fixed or position: sticky to keep navigation visible as users scroll the page. They are popular for one reason: convenience. Users do not have to scroll back to the top to use the menu. The trouble is that a sticky element occupies real estate at the top of the viewport for the entire session.…