Introduction to Links and Hypertext
by WebAIM
Description
Hypertext links are one of the most basic elements of
HTML, as its name
implies (HTML stands
for HyperText Markup Language). As such, making hypertext links
accessible is one of the most basic and most important aspects of web
accessibility. For the most part, this is an easy task. Standard hypertext
links work with all technologies and platforms and users of all abilities
can access them, whether directly or through the use of some sort of
assistive technology. As might be expected though, there is more to
hypertext link accessibility than simply creating a link. Some types of
links are more accessible than others, and some types of links are
completely inaccessible to people with certain types of disabilities.
Because links are so basic to the functionality of web content, inaccessible
links are one of the most severe barriers to overall accessibility.
Elements of a Link
<a></a> --- tags
href ------ where the link takes you, usually a web address or
bookmark
name ------ description of link, appears when you hover over the link
target ---- allows you to control which window your link will appear in
Keyboard Accessibility
Users must be able to navigate to and select each link using the keyboard
alone. In most browsers, the Tab key allows
users to jump from link to link, and the Enter
key allows users to select a link. If the only way to access a link is with
a mouse, the link is unusable by people who cannot use a mouse. How is it
even possible to create a link that is inaccessible by keyboard? The most
common method is by using JavaScript event handlers that do not permit
keyboard access. Other ways to render links inaccessible to
keyboard users include inappropriately using non-HTML
technologies, such as Java or Flash to create links within an
HTML document. Both
Java and Flash can be made accessible, but only if the developer designs
with accessibility in mind. Overall, creating accessible
HTML links is easier
and more straightforward than creating accessible links in other
technologies.
One of the most serious barriers is to create links that go nowhere.
Developers sometimes use JavaScript to create dynamic menus that drop down
when the user hovers over certain links with the mouse. In some cases, the
link itself goes nowhere at all, and its only purpose is to expose the links
in the drop-down menu, which do have real destinations. Links like this
often have a pound sign as the link destination, which means that the link
destination is the same page; clicking on the link accomplishes nothing.
Both keyboard users and mouse users will experience nothing at all when
attempting to activate the link.
Bad Example
The link in this example goes nowhere. Its only purpose is to activate a JavaScript function.
<a href="#" onmouseover="dropdownmenu()">Products</a>
Mouse users will at least be able to click on the links in the drop-down
menu, but keyboard users cannot access the drop-down menu, so the link is
completely useless and all of the link destinations in the drop-down menu
are completely inaccessible to them. One solution is to abandon the
drop-down menu and instead use standard hypertext links. Another solution is
to specify a real link destination (e.g. href="products.htm")
which would list the same links that are available via the drop-down menu.
Good Example
The link in this example has two functions. On mouseover, the link will activate the JavaScript function to pull up the drop-down menu. When clicked, the user will be taken to a new webpage.
<a href="products.html" onmouseover="dropdownmenu()">Products</a>
posted on Jun 6, 2007
Article
Topics
Google