Hyperlinks and accessibility
The HTML code for a hyperlink looks like
The browser will render it as Infosys. Browsers visually denote the hyperlink by underlining the content included within opening and closing anchor tags. Links do not always contain text within opening and closing anchor tags. They often contain a graphic to convey the purpose of the link. Hyperlinks pose an accessibility problem when purpose of the link can not be conveyed completely and appropriately to a user, especially a disabled user. To appreciate these accessibility challenges, let us first understand the classification of hyperlinks on the basis of the HTML markup being used to include hyperlinks.
In context of this post we will divide links in 3 classes. We will examine all the 3 classes for potential accessibility problems.
Shrirang Prakash Sahasrabudhe
Accessibility Specialist- SETLabs
Shrirang_s@infosys.com
<a href=http://www.infosys.com/pages/index.aspx>Infosys</a>
The browser will render it as Infosys. Browsers visually denote the hyperlink by underlining the content included within opening and closing anchor tags. Links do not always contain text within opening and closing anchor tags. They often contain a graphic to convey the purpose of the link. Hyperlinks pose an accessibility problem when purpose of the link can not be conveyed completely and appropriately to a user, especially a disabled user. To appreciate these accessibility challenges, let us first understand the classification of hyperlinks on the basis of the HTML markup being used to include hyperlinks.
In context of this post we will divide links in 3 classes. We will examine all the 3 classes for potential accessibility problems.
- Simple text links
In case of simple text links the most predominant accessibility problem is that the link text does not convey the purpose when read without context of surrounding text. "Click here" links are the best example. Consider this sentence:
To read about Infosys iProwe click here.
The link text "click here" alone gives no clue about the destination of the link. Even for sighted users it is not useful. Unless they read the complete sentence, they will not be able to figure out where the link will take them. Visually challenged users who can not readily see the surrounding text would need more effort to understand the context and purpose of the link. The same link can be made accessible by making the "Infosys iProwe" as a hyperlink as follows"
To read about Infosys iProwe click here.
Avoid use of "click here", "details", and "read more" words as link text.
Another potential issue with text links is when punctuation symbols are used as an on screen text for a link. Use of "?" for help links is popular.<a href="help.htm">?</a> which is rendered as ?
Most often visually challanged users configure their screen readers not to explicitly read the inline punctuations. In such a scenario screen readers will just modulate the voice and not explicitly announce it as "question". The best way to preempt this is use of "title" attribute of the anchor tag to provide the text description of the symbol like this,<a href="help.htm" title="need help?">?</a>
It renders as ?. Value of the "title" attribute will appear as a tooltip on hover of a mouse. - Graphical or image links
In case of image links the most frequent accessibility gap is absence of text alternative for the graphical content. The following code renders inaccessible link.<a href="a.html"> <img src="JAWS_product.jpg"></a>
In this case a screen reader will announce the value of the "src" attribute of "IMG" tag. This information is rarely useful to the user for understanding purpose of the link. There are multiple techniques to provide the text alternative. The simplest amongst them is to set appropriate value of the "alt" attribute of the image.<a href="a.html"> <img src="JAWS_product.jpg" alt="JAWS for Windows screen reader"></a>
Screen reader will announce the value of the "alt" attribute as a link text.
Another technique is to include text along with the image between opening and closing anchor tags.
The image can be made to overlay the text so that it is not visible on the screen but same is available to screen readers and other assistive technologies. If you choose to implement this technique ensure that the "alt" for the image is set to null that is "". In case of text and non-empty alt both present. Screen reader will announce both the text as well as the value of "alt", users gets annoyed by listening to this redundant information. - Java script links
The main problem with these links is that many such links do not go anywhere but only activate some javascript function. This behavior is confusing for all users. For example, the link<a href="#" onmouseover="showdropdown()">Books</a>
activates the function 'showdropdown' and shows the dropdown menu.
Links should be used as links only. Also for users who have disabled javascript, these links are an absolute "no".
Shrirang Prakash Sahasrabudhe
Accessibility Specialist- SETLabs
Shrirang_s@infosys.com
