Tutorials | Web page
tabbing Browse
Users who do not or cannot use the pointing device can use the Shortcut tab key to open the connection, and also have a logical tab order of their own. Although HTML is linear, the TabIndex property allows you to define the order of its shortcuts, and these logical tabs should automatically fall into place.
shortcut Keys
Shortcut keys make it easier to navigate through specific keystrokes on the keyboard (focus when holding down the ALT key or CTRL key). For those who do not have a pointing device, it is quicker and more convenient than using the TAB key to operate the connection.
It is not necessary to set a shortcut key for each connection, but it is a good idea to set the primary navigation connection.
<a href= "somepage.html" accesskey= "s" >some page</a>
Attention
The trouble with shortcut keys is that users often have no way of knowing where they are and what keys they are (unless you view the source code). Although jaws── a screen reader that can read out shortcuts aloud, you still have to make shortcuts more straightforward to dig out.
You can use the "Skip navigation" Connection technology (detailed), or select a separate page to illustrate the usability features of your site, including shortcut keys. An increasingly popular approach is to underline a letter that matches the shortcut key, similar to the method in the Windows Programs menu.
the title of the connection
Adding caption properties to a connection title is a good idea, which gives the user a description of the connection, so it can improve navigation.
If the connection is JavaScript-capable, it also helps explain what will (or will not) happen to users who do not use JavaScript.
<a href= "#" onkeypress= "Opennastypopup ()"
Title= "Open a nasty Javascript pop-up window" >Monster</a>
pop-up window
When it comes to JavaScript pop-ups, if you insist on using them, or if a lot of people (your users) tell you to use them, you can use onkeypress and onclick to make the page more usable. Also, the function defines a pop-up window that returns False, contains a connection with the HREF attribute to the normal page, and can load the page in a normal way for a user who does not use JavaScript functionality.
Like what:
<script type= "Text/javascript" >
function Opennastypopup ()
{
window.open ("monster.html", "" "," toolbar=no,height=100,width=200 ");
return false;
}
</script>
...
<a href= "monster.html" onkeypress= "return Opennastypopup ()" >Monster</a>
Adjacent Connections
The adjacent connection should be separated at least by a space to make it clear for screen readers.
This can also be done with characters, between connections (such as vertical |── connections | Connection, or surround the connection (such as bracket []──[connection] [connect]). It's also a good idea to put the connection in the list. You can then use CSS to style the display, or even a parallel list (with Display:in-line).
Skip Navigation
You should give users who use screen readers a chance to skip navigating directly to content. This is because, assuming that your connection is fixed (should be), the user does not have to undergo the same information on every page, especially in a large number. You can set up a connection and skip navigation directly to the content of the connection.
It looks like this:
<div id= "Header" >
<a href= "#content" accesskey= "n" >skip navigation</a>
</div>
<div id= "Navigation" >
<!--loads of navigation stuff-->
</div>
<div id= "Content" >
<!--lovely content-->
</div>
Obviously, you don't need to display it in a visual browser, and you can hide it with CSS.
Attention
This is just a little trick of CSS, but "skip navigation" for the specific. This involves the method of hiding the connection.
The most common approach may be to use Display:none, but some browsers see but do not understand the connection, and the "skip navigation" connection must be displayed.
But there is no need to show--there is no reason to show it to the eye-catching user. So stick with the Display:none style, and set the element width and height to 0 (width:0; height:0; Overflow:hidden), which has the same visual effect, but can make the screen reader understand.
