18 Availability of links

Source: Internet
Author: User
Tags define
Link

This article makes your Web links more available.

tabbing

Those that cannot use the specified appliance can be linked "tab", for example, the link should have a logical tabbing order. tabindexproperties allow you to define this order, although HTML is linear, even if it is possible that a logical tabbing order should automatically arrive at the place.

Accesskeys Access Health

AccessKey allows for easier navigation by assigning keyboard keys to links (when the user obtains the link focus using the "ALT" or "CTRL" +accesskeys). Convenient for those who cannot use the specified device, this method is very quick and easy.

There is no need to establish accesskeys for each link, but it is a good way to use the primary link.

accesskey="s">Some page</a>

The problem with access keys is that users don't have the means to find them (unless you look at the source code), and mainstream screen readers will show access keys, but in this way you might want to make them more forthright.

You can implement a similar idea about "skip navigation" Jump navigation link technology (see below), or select a separate page to describe the usability features of your site, including access keys. One popular approach is to show underlined letters in links, and the same method is used in most Windows programs.

Can learn more in a list Aprat

Link titles

Adding title attributes is a good way to add user links to the description and improve navigation.

If the link uses JavaScript, it is also useful for users who do not have JavaScript functionality.

<a href="#"  title="Open a nasty Javascript pop-up window">Monster</a>

Popups Eject

Talk about JavaScript pop-up, if you insist on using them, or if someone advises you to use them, you can use onclick the same availability as onkeypress access and more. If your link href attribute contains a normal page and returns through the pop-up feature, false if the user does not have JavaScript, it will load the normal page. Example:

<script type="text/javascript">function opennastypopup() {window.open("monster.html", "", "toolbar=no,height=100,width=200");return false;href="monster.html"  onkeypress="return opennastypopup()">Monster</a>

Adjacent link adjacent links

Adjacent links should be separated by multiple spaces to make screen readers easier to identify.

You can add characters between links, such as "link | Link, or surround the links with characters, such as [link] [link]. It's also a good idea to put the navigation in the list. This can be defined by the CSS you choose to display, even the way (use display:in-line; )

Skip Links

You should give screen reader users a direct chance to skip the link to the content. This is because if your navigation is consistent, the user does not need to pass the same information on each page, especially if the navigation is very much. You can skip the navigation through the link to get to the content directly.

<div id="header"><a href="#content" accesskey="n">Skip navigation</a>id="content"><!--lovely content --></div>

Obviously, you don't want to display the link in the browser, you can define it in CSS.

This is a CSS method that is very effective for ' skipping navigation '. It includes methods that make links invisible.

The main method is to use " display;none; ", but some screen readers will not read the link, intentional, "Skip naigation" link must be displayed.

It still doesn't have to be seen, although there is no point of view that it fits the user's vision. So the alternative display:none; approach is to set the width of the element to 0 (width:0;height:0;overflow:hidden;),这样屏幕阅读器用户就有同样效果。







Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.