Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gonzalo Blasco
11,927 PointsTab 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
Kalib Watson
13,542 PointsWhat 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.