Page MenuHomePhabricator

Sticky header hides focused elements for users navigating via keyboard/tab
Closed, DeclinedPublic



Similar to T290518, the sticky header will block the view of focused links (and any interactive element) located below the sticky header. "This was an accessibility barrier for users. The sticky element was preventing a commonly used navigation technique from working properly, leaving users unable to see or read the element they had focused on." from the sticky header accessibility testing.

Video example

To reproduce

Developer notes

  • One possible solution is to provide a JS fix, similar to this suggestion in T290518. This could be a keydown event listener on the "tab" key thats checks if the focused element is covered by the sticky header. This could potentially be done with Intersection Observer.
  • It's also worth considering a design fix that covers both T290518 and this case, as both relate to hidden content. Partially persistent headers or limiting the sticky header to certain scroll behaviors could be a possible solution, at the cost of introducing more animations that could potentially be distracting.

Event Timeline

bwang renamed this task from Sticky header hides focused links for users navigating via keyboard/tab to Sticky header hides focused elements for users navigating via keyboard/tab.Sep 20 2021, 8:32 PM
bwang updated the task description. (Show Details)

Great point @bwang !

Interestingly enough and fwiw using scroll-padding seems to work with keyboard navigation (although still has the safari compatibility issue):

@nray Oh wow I didn't think to check that scroll-padding also handles that, which makes sense I guess! I'm going to just close this task then, glad we don't have to handle it twice