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


Moving Focus to Selected Element

This should be an easy question, but I'm not quite sure how to word it. I think that's keeping me from getting any good results searching elsewhere.

If a keyboard-only user is tabbing through our site, they will get to a "featured items" section, which has a collection of images and links.

From the initial page-load, the tops of the images in that section are visible, so when they tab to them, the browser is reading them as being in focus.

The problem is, when the user is tabbing through those items, all they can see is the top of the images. They can't see the text because the page hasn't scrolled down to show the whole thing.

Is there a way that I can tell the browser to scroll down and center those elements in the window when they receive focus?

If you'd like, you can try this on our homepage - https://www.williamwoods.edu - with the "LEAD Awards...", "Passionate faculty...", etc. links, just after the main carousel. :)

Also, I assume this would require JavaScript to implement, but I think it would be nice if "Accessibility" was an option on the list of Topics to file under. :)


1 Answer