Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Gonzalo Blasco
Gonzalo Blasco
11,927 Points

Tab index order change when position change from absolute to fixed....

Hi there...

At my workplace we developed a site which global-header have a position absolute at top of the page, but when you scroll down the position change to fixed to stay always on top of everything.... That's really cool, and it works really smoothly...

Here's the problem... Now, a couple of months later, we were performing a QA test on accessibility and they noted that when you press 'tab' a couple of times on the product listing page there is a really strange behavior...

Expected Result: Focus should move: --> header section --> top navigation --> side navigation --> main content.

Actual Result: When the user tabs down sufficiently, the normal header is changed to a sticky header. When this happens, focus is reset to the beginning of header or side navigation, so that the keyboard user has to go through the whole navigation again to reach the main section.

On IE focus moves: --> header section --> top navigation --> side navigation --> header section --> top navigation --> side navigation --> main content.

On Chrome focus moves: --> header section --> top navigation --> side navigation --> side navigation --> main content.

On Safari focus moves: header section ---> top navigation --> side navigation (by VO+right arrow) ---> side navigation (by VO+right arrow). The user can go to main by TAB key only.

Not reproducible on FF.

After reviewing this issue with my boss we found this was happening at the bottom of the viewport (whenever the header changes it position) and now it looks it selects again the header...

I would love to show you a couple of screenshots but my boss will kill me if I do so...

If anybody got down here and still reading, please help me... I'm in need of urgent help...

CU later, everyone... Bye...

2 Answers

What is happening is because your navigation is positioned absolutely, as you tab down the page the browser detects your navigation as a new interactive item and moves to the "next" interactive item, in this case your navigation. Absolutely positioned elements have been known to cause this problem in multiple scenarios, which is why it's common accessibility practice to avoid positioning anything absolutely. It can also depend on how you've positioned the element absolutely. If it is absolutely positioned within the browser, the browser will probably "re-detect" it whenever you scroll while tabbing. If you absolutely position it within another div or within your HTML body, this might help. Sorry I don't have any solutions to offer, but I thought I might shed some light.