How to implement 'Skip to Content' between two frames

Question

I am working on a website using frames. The top frame holds the menu items and the bottom frame holds the main content.

How can I href to main frame content section?

Answer 1

In 2017, no one uses frame.

But if you really want to, you can use the name attribute specified for your bottom frame

<frame src="mypage.html" name="bottom" />

in the target attribute of your link:

<a href="mypage.html" target="bottom">Skip to content</a>

Thanks, for the nostalgia.

Answer 2

Using frameset and frame elements is really old-fashioned now. (The most prominent examples are probably the Java API documentation, and any other Java documentation generated using Javadoc, and the Eclipse documentation.) However, if you have a frameset containing one frame for navigation and one frame for the main content, here is what you should do.

First, give each frame element both a name and a title. The title is for assistive technologies, especially screen readers. See the example below.

<frameset cols="15%, *">
  <frame src="navigation.html" name="navigation" title="Navigation Bar" />
  <frame src="main.html" name="maincontent" title="Main Content" />
  <noframes>
    <p>Go to the <a href="noframe.html">version without frames</a>.</p>
  </noframes>
</frameset>

Second, make sure the user can navigate between the frames. Firefox and several other browsers allow the user to navigate to the next frame by pressing F6 and to the previous frame by pressing Shift+ F6, but Google Chrome does not appear to have a keyboard shortcut for this (see Chrome keyboard shortcuts in Google Chrome Help). (You would need to add the Vimium extension to have a shortcut for frame nagivation. Frame navigation in Chrome using just a keyboard is a nightmare.) So you would probably need a script that sets the focus to the maincontent frame after clicking a link in the navigation frame. See the question Setting focus to iframe contents for something related.

Alternative solution: stop using frames.