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.


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