Printer-friendly page
Screen-friendly pageLink Example: Making sure internal links also move focus
Accessibility Features of Example
- Internet Explorer 5, 6 and 7 does not move keyboard focus to internal links unless the target of the internal link includes the
tabindexattribute with the value equal to "-1". - Other values for
tabindexare possible, but would add the internal link to the tab order of the document.
Example
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>
<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>