Home/ Questions/Q 6813123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:32:00+00:00

Please take a look at this site –> http://vanityclaire.com/ (in case it changes in

  • 0

Please take a look at this site –> http://vanityclaire.com/ (in case it changes in the future, it’s a side-scrolling site) and try browsing with TAB (don’t hit enter, just tab). After you tabbed everything on the first section, you’ll notice when the focus changes to another section, it messes up: you see half of two sections.

How do I make the user being able to just tab through a section?

I know I can set the blur property for the last item (whether an anchor or an input) to fire focus on the first item on the menu… That way, the user won’t tab to another section… BUT that would mean the user would “get trapped” on the page and wouldn’t be able to tab through the address bar, for instance.

Is there a way to send focus to the address bar? There’s no window.locationbar.focus(); or anything like that, and $(windows).focus(); didn’t help either…

Can anybody think of a good solution to this?

Please note I don’t want to prevent the user from navigating using keys… I just want the site to not fall apart because of that (which I can think of how to resolve) and the user to not get trapped…

Thanks in advance, guys,

  Óscar
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For what it’s worth, there’s a bunch of other related issues with this type of side-scroller: if the user’s window is large enough, or if they zoom out, or click the background and drag to the right, the other pages can become visible. Also, because they are ‘visible’ (just scrolled off), a screenreader will likely read out the entire page in one go, rather than just the current page.

    Here’s an approach though that might solve all of these issues: set the other page areas as either display:none or visibility:hidden until they are needed. (visibility:hidden likely works best for this case since it doesn’t affect layout.) This prevents them from being accidentally scrolled into view, prevents a screenreader from reading them, and prevents them from being tabbed to. Tabbing will just skip right over, which is exactly what you want here.

    So to transition from area A to area B, make the areas from A to B visible, scroll and move the focus to area B, then make all areas other than B invisible.

    • 0