Web 2.0

Use of electronic information has been around since inception of computer technology but proliferation of personal and affordable computers coupled with birth of WWW spurred a huge demand for sharing and interlinking this information. HTML, the language of the web has made interlinking possible by providing anchor tag, popularly known as hyperlink. On any webpage, you will always find at least one hyperlink. There are three types of hyperlinks, link which when clicked opens another web page or document, bookmark link that points to a place on the same web page and command link that initiates some function or action when clicked.

The HTML code for a hyperlink looks like

<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.

1. 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.
   
   
2. 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.
   
   
3. 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".
   

From the discussions above it should be obvious that it is easy to incorporate accessibility in hyperlinks if we pay attention to the specific requirement for each type of hyperlink.

Shrirang Prakash Sahasrabudhe
Accessibility Specialist- SETLabs
Shrirang_s@infosys.com

Posted by Guest at 8:50 AM | Permalink | Comments (0) | TrackBacks (0)

Further to the post Machine interactions sans labels, where I talked about importance and necessity of labels for user interface controls, today we will understand different labeling techniques and respective pros and cons. to begin with, let us define the meaning of the term "label" in context of this post. Label is a text, color, image or an audio that indicates the purpose of any control on a webpage. Controls comprise text and password fields; selection boxes and radio buttons; checkboxes and push buttons, and links and clickable items. As text is the most accessible form of information, I am restricting myself to text labels only.

Consider the following code

User Name: <input type="text" id="UID">

This code fragment renders a textbox. The text "User Name:" appears on the left hand side of the textbox. Users who can perceive visual input can visually associate "User Name:" with the text box. For them, this text acts as a label for the text field. But as this association is not programmatically determinable, assistive technologies like screen readers fail to associate appropriate text with the form field. Online forms prior to HTML4.0 had this limitation.  HTML 4.0 overcame this limitation by adding label element. Labels are of two types, implicit and explicit.

Implicit label wraps the corresponding input control within itself. <label> user name: <input type="text" name="uname"> </label>

Explicit label uses "for" and "id" attributes to realize the association. <label for="UID">User Name:</label> <input type="text" id="UID">, The value of "for" attribute of the label matches with The value of "id" attribute of the input. This is the link that connects the label with the form field.

We recommend use of explicit labels because

• Screen readers can associate appropriate label with form fields
• If you click on the label the focus moves to the associated field
• In case of checkboxes it also toggles the checked status of the checkbox

Explicit labels are used with

• input type="text"
• input type="password"
• input type="file"
• input type="radio"
• input type="checkbox"
• textarea
• select

one more way to label the elements is to use "title" attribute, for example <input type="text" title="enter your first name">. The value of "title" appears as a tool tip on hover of a mouse. This technique should be used in conjunction with label element and not as an alternative to it.

Buttons do not need explicit labels as "value" attributes acts as an implicit label for them. Use "value" attribute of input type="button","reset" and "submit" for labeling the controls. In case of input type="image" use "alt" attribute for labeling the button.

In next post we will understand How to create accessible hyperlinks.

Shrirang Prakash Sahasrabudhe
Accessibility Specialist- SETLabs
Shrirang_s@infosys.com

Posted by Guest at 6:06 AM | Permalink | Comments (0) | TrackBacks (0)