Link Example: Making sure internal links also move focus

Accessibility Features of Example

Example

Go to the main topic

Navigation Links

The Main Topic

The text of the main topic of the web page would be here. This is an example link to show the keyboard focus is moved past the navigation bar links when the "Go to the main topic" link was selected. For Internet Explorer the tabindex value is needed to make sure following the link actually moves keyboard focus.

HTML Code

<p><a href="#maintopic">Go to the main topic</a></p>

<h3>Navigation Links</h3>
<ul>
    <li><a href=".">Navigation link #1</a></li>
    <li><a href=".">Navigation link #2</a></li>
    <li><a href=".">Navigation link #3</a></li>
    <li><a href=".">Navigation link #4</a></li>
    <li><a href=".">Navigation link #5</a></li>
</ul>

<h3><a id="maintopic" name="maintopic" tabindex="-1"></a>The Main Topic</h3>
<p>The text of the main topic of the web page would be here.  
    This is an <a href=",">example link</a> to show the keyboard focus is moved past the navigation bar links when the "Go to the main topic" link was selected.  
    For Internet Explorer the <code>tabindex</code> value is needed to make sure following the link actually moves keyboard focus.
</p>