Printer-friendly page
Screen-friendly pageAccess Key Example
Accessibility Features of Example
- Access keys are used to provide easy access to the links and form element.
accesskeyattribute values are unique.accesskeyattribute values are numeric and do not interfere with Microsoft Internet Explorer menu shortcuts.
Example
HTML Code
<!-- Links with accesskeys defined -->
<a href="#main" accesskey="1"></a><a href="#nav" accesskey="3"></a>
<!-- Targets of accesskey links -->
<div id="divnav">
<a name="nav"></a>
<ul id="nav" title="Main Navigation Bar">
</ul>
</div>
<div id="content">
<a name="main"></a>
<h1>Navigation and Orientation</h1>
</div>
<!-- Accesskey assigned to form control -->
<form name="search" title="Search Website" action="search.php" method="post">
<label>Search Text <input accesskey="2" type="text" name="stext" size="15"></label>
<input type="submit" value="Start Search">
</form>
<!-- Documentation of the Accesskeys for users -->
<ul class="accesskey">
<li>Accesskey 1: Main Content</li>
<li>Accesskey 2: Search Form</li>
<li>Accesskey 3: Navigation Bar</li>
</ul>
<a href="#main" accesskey="1"></a><a href="#nav" accesskey="3"></a>
<!-- Targets of accesskey links -->
<div id="divnav">
<a name="nav"></a>
<ul id="nav" title="Main Navigation Bar">
</ul>
</div>
<div id="content">
<a name="main"></a>
<h1>Navigation and Orientation</h1>
</div>
<!-- Accesskey assigned to form control -->
<form name="search" title="Search Website" action="search.php" method="post">
<label>Search Text <input accesskey="2" type="text" name="stext" size="15"></label>
<input type="submit" value="Start Search">
</form>
<!-- Documentation of the Accesskeys for users -->
<ul class="accesskey">
<li>Accesskey 1: Main Content</li>
<li>Accesskey 2: Search Form</li>
<li>Accesskey 3: Navigation Bar</li>
</ul>