UIX Developer's Guide

Contents

Previous

Next

8. Accessibility

This chapter explains how to make UIX applications accessible to disabled users. It explains what UIX does and does not do automatically, and what a developer would have to do to make an application accessible.

This chapter contains the following sections:

• Introduction
• Making UIX Components Accessible
  • Images
  • Tables
  • Frames
• Labels and Access Keys
  • Using Labels
  • Access Keys
  • Example
• Accessibility Modes
• References
• Conclusion

Introduction

In order to make a UIX application accessible two issues need to be addressed. The first is to make the application accessible to the visually impaired. The second is to support the physically impaired; specifically this deals with supporting users with only keyboard access (and no pointing device). Since (at the current time) UIX does not provide direct support for multimedia, applications can be made accessible by addressing just the above two issues.

Visually challenged users frequently make use of text-to-audio screen readers. Therefore, it is important that UIX applications support these readers, by providing text descriptions of visual content and grouping data such that it is easy for the reader to associate data with descriptors. Visual contents frequently use color to express information. For example, the color of a button could indicate whether the button is selected, enabled or disabled. When this button is rendered to a screen reader it must be ensured that the button's state is also captured by the text description. Most of the time UIX will handle this automatically.

Implementing an application that can be completely controlled via the keyboard is usually not a problem, since most browsers allow the user to cycle through all the input elements by hitting the tab key. However, this can be extremely inconvenient and can be made a great deal easier by providing keyboard short cuts to the important controls on a page. This is done by providing access key support which is described in a latter section.

The next section describes the UIX Components elements that require extra information in order to make them accessible.

Making UIX Components Accessible

This section describes the UIX Components elements that need special consideration when dealing with accessibility. The foremost among these elements is the ImageBean.

Images

When images are used it is necessary to write a short description about each image so that a non-visual browser agent can describe an image (which would otherwise not be displayed). In UIX Components, images are rendered using the ImageBean and the image description is provided using the shortDesc attribute (This attribute translates into an HTML alt attribute). The following is an example in UIX:

<image source="oracle.gif" shortDesc="Oracle Logo" />

Sometimes, it is difficult to describe an image with just a single line of text. In this case the image description may be provided on a separate page, and the image may link to this longer description using the longDescURL attribute. For example:

<image source="oracle.gif" shortDesc="Oracle Logo"
        longDescURL="LongDescriptions.html#oracle" />

The following is a fragment of the LongDescriptions.html file:

<!-- somewhere in LongDescriptions.html -->
<a name="oracle">
The current Oracle logo. This image has the word "ORACLE" written in
bright red in large uppercase letters.
</a>

The Java code for the above UIX example follows:

ImageBean image = new ImageBean("oracle.gif");
image.setShortDesc("Oracle Logo");
image.setLongDescURL("LongDescriptions.html#oracle");

In certain cases images are used to make the visual display look pleasing, rather than to convey information; for example, an image may be used to display the curved portion of a button's border. Such an image is known as a layout image and does not provide extra information to a user; therefore, these images don't need short descriptions. However, if no description is provided some screen readers may use a default one like "image." This may mislead a visually impaired user into believing that the the author of the page has forgotten to provide a description for the image, and that the image is important to understanding the respective document.

To avoid this confusion, it is necessary to set shortDesc attributes on all images, and use empty strings as the attribute values for layout images. Examples of layout images include background images and bullets. The following UIX code sets an empty string as the description of an image used as a bullet:

<flowLayout>
<contents>
 <image source="largeBullet.gif" shortDesc="" />
 <link text="Click here for the latest news" destination="news.html" />
</contents>
</flowLayout>

Any images that are automatically generated by UIX Components (for example, the error/warning icons produced by the InlineMessageBean) already have appropriate descriptions set on them. These include colorized images generated from user provided icons (for example, globalButton icons) and images that are produced by certain constructs such as tabBar and train elements. In these cases UIX Components will use descriptions incorporating the user supplied button text or tab/step name. These descriptions will also describe the state (ie: whether enabled, disabled or selected) of the element. For example, consider the following UIX code fragment:

<tabBar>
<contents>
 <link text="Home" destination="Home.html" selected="true" />
</contents>
</tabBar>

In the above example, a tab bar is constructed with a single (selected) tab. UIX Components renders an image map for this tab bar, and automatically binds a description to this tab image; the description incorporates the state of the tab and reads as follows: Home currently selected. The descriptions used by UIX Components conform to the Oracle user interface specifications (icon rollover text).

The next section describes another heavily used UIX Components element, the table.

Tables

When using the UIX Components TableBean it is necessary to describe the contents for non-visual agents. This is done by using the summary attribute on table. For example:

<table summary="This table describes the contents of your shopping bag:
                item name, unit price, quantity and subtotal" >
 ...
</table>

The Java code for the above example follows:

TableBean table = new TableBean();
table.setSummary("This table describes ..... quantity and subtotal");

Special consideration should be taken when rendering empty table cells. Empirical evidence suggests that in order to get the desired behaviour from a screen reader, an HTML <BR> tag must be rendered inside empty cells. UIX tables automatically generate this tag but only for table cells with absolutely no content.

A note about scope attributes and table elements: scope attributes are used to indicate (to a screen reader) which header corresponds to which piece of data in the table. UIX Components automatically renders the appropriate scope attributes for the table headers.

If your table uses a tableSelection child, then it is important to set a shortDesc attribute on this child. The shortDesc is associated as a label with the form controls in the selection column. For example:

<table ...>
 <tableSelection>
  <multipleSelection shortDesc="Select for deletion" ... >
   ...
  </multipleSelection>
 </tableSelection>
 ...
</table>

The next section describes how to implement frames that are accessible in UIX Components.

Frames

When using FrameBorderLayoutBean it is necessary to describe the contents of this layout by using a shortDesc attribute (This places an HTML title attribute with the specified text on the root FRAMESET). In addition, links to some alternative page (without frames) must also be provided in an alternateContent section. For example:

<frameBorderLayout shortDesc="Shopping Cart Application" >
 ...
<alternateContent>
 <link text="Click here for the no-frames version"
        destination="cart-noframes.html" />
</alternateContent>
</frameBorderLayout>

The alternateContent section corresponds to an HTML NOFRAMES tag, and is displayed by browsing agents that cannot handle frames.

Each frame that is used by this layout must also have a short description, describing the contents of the frame. This short description must be specified using a shortDesc attribute. If it is necessary to give a longer description of the frame, that description can be written up in a separate file and the frame can link to it using a longDescURL attribute. The following is an example:

<frame shortDesc="This is the navigational tree of the shopping cart"
        longDescURL="LongDescriptions.html#navFrame"  />

Note that the content of a frame is liable to change (for example, when the user clicks on a link). This should be kept in mind when writing frame descriptions; a particular description may become irrelevant and confuse a user during the course of an application. Therefore, a frame description must be general enough to apply to the complete subset of pages that may be displayed inside the corresponding frame.

The preceding sections have shown how to augment UIX Components elements with textual descriptions in order to help screen readers define their content. The next section explains how to help the readers associate labels with data and provide quicker access to UIX Components elements via the keyboard.

Labels and Access Keys

This section describes how to make UIX Components input (and action) elements accessible to disabled users. The first step is to help screen readers find labels that describe raw data; this is explained next.

Using Labels

A label is usually a fragment of text used to describe some element that requires user input. When a page is scanned visually it is (or it should be) obvious which label describes which input element; the label is placed just to the left of the corresponding input element. But it may not be obvious to a screen reader, because there may be other HTML tags (used for alignment and/or presentation) between the label the the input element. UIX is certainly not the exception. Consider the following example:

<labeledFieldLayout>
<contents>
 <styledText text="Enter Your Name" />
 <textInput name="username" />
 <styledText text="Enter Your Age" />
 <textInput name="age" />
</contents>
</labeledFieldLayout>

The above UIX code fragment renders into sufficiently complicated HTML that may confuse a screen reader. Therefore, it is necessary to explicitly state (in the HTML) which piece of text is a label for which input element. This is done by assigning a page-wide unique ID to each input element, and setting a reference attribute (to this ID) on each label. It is simple to do this in UIX as the following example illustrates:

<labeledFieldLayout>
<contents>
 <styledText text="Enter Your Name" labeledNodeId="username" />
 <textInput id="username" name="username" />
 <styledText text="Enter Your Age" labeledNodeId="age" />
 <textInput id="age" name="age" />
</contents>
</labeledFieldLayout>

First of all, note that the input textInput elements have unique IDs assigned to them, by means of id attributes. Each label references the corresponding input element's unique ID by means of a labeledNodeId attribute (this associates the label with the input element). In the above example, the text Enter Your Name is clearly a label for the textInput with ID username, and a screen reader would have no trouble identifying the input element.

The following is the Java code needed to implement the label-to-input association that was exemplified by the UIX code above.

StyledTextBean style1 = new StyledTextBean();
style1.setText("Enter Your Name");
style1.setLabeledNodeID("username");

TextInputBean text1 = new TextInputBean("username");
text1.setID("username");

StyledTextBean style2 = new StyledTextBean();
style2.setText("Enter Your Age");
style2.setLabeledNodeID("age");

TextInputBean text2 = new TextInputBean("username");
text1.setID("username");

LabeledFieldLayoutBean layout = new LabeledFieldLayoutBean();
layout.addIndexedChild(style1);
layout.addIndexedChild(text1);
layout.addIndexedChild(style2);
layout.addIndexedChild(text2);

Note that the UIX Components message beans (for example, MessageTextInput, MessageChoice, etc ...) automatically associate the label (or prompt) with the input element. This is true for all beans wrapped using an InlineMessageBean.

Now that data can be described via their respective labels, the next step is to provide quick keyboard access to the data. This is described in the next section.

Access Keys

Access keys provide quick keyboard access to input elements and links. Access keys are very useful to users operating applications without the use of pointing devices. The only alternative for a keyboard user would be to keep hitting the Tab key until the appropriate element receives the focus; with an access key, it is possible to bring the focus directly to an element, by holding down the Alt key and hitting the access key.

The first step to supporting access keys is to bind a key with an element. In the following UIX example the access key 'h' is bound to a link element. If the user presses Alt+h the link will immediately receive the focus (and the user may activate the link by hitting the Enter key).

<link text="Go Home" destination="Home.html" accessKey="h" />

The following is the Java code needed to set an access key on a link.

LinkBean link = new LinkBean("Go Home", "Home.html");
link.setAccessKey('h');

The second step to supporting access keys is to give the user a visual indication of what the access key is for a particular element. Most browsers do this by highlighting the appropriate letter in the text of the element; so the text for the link (in the above example) might look like "Go Home." Therefore, a convenient way to set both the text and the access key is to use the textAndAccessKey attribute, and precede the character to be used as the access key with &, as in the following example:

<!-- This doesn't work!!!  -->
<link textAndAccessKey="Go &Home" destination="Home.html" />

However, the above is invalid XML. The & needs to be escaped as in the following correct example:

<link textAndAccessKey="Go &amp;Home" destination="Home.html" />

The following is the equivalent Java code (Note the use of the method oracle.cabo.ui.NodeUtils.setTextAndAccessKey(...)):

LinkBean link = new LinkBean();
link.setDestination("Home.html");
NodeUtils.setTextAndAccessKey(link, "Go &Home");

It is possible to use the textAndAccessKey attribute with a number of other UIX Components elements including button, submitButton, resetButton, globalButton and styledText. If an image element is used with a destination, it is possible to set an access key using the accessKey attribute; however, the user will receive no visual clue that the image has an access key (let alone what the access key is).

Access keys can also be used to move the focus to an input element. Recall the previous section on Using Labels. In the examples in that section the styledText element was used as a label for some input element. The following UIX example shows how to set an access key on the label:

<styledText textAndAccessKey="Enter Your &amp;Name"
         labeledNodeId="username" />
<textInput id="username" name="username" />

In the above example the access key 'n' is bound to the textInput element. Pressing Alt+n will set the focus on the textInput element.

Incidentally, it is legal to bind the same access key to several elements. Each time the access key is pressed the focus will move to the next element (with the same access key) and eventually cycle back to the first one.

Databinding Access Keys

One final note about access keys: the access key to use depends on the text of the element, which in turn depends on the user's language preference. Therefore, to properly implement an internationalized application it is necessary to data bind the textAndAccessKey attribute so that the access key is pulled from a language resource bundle. Databinding textAndAccessKey in UIX is simple; however, this attribute does not exist on the beans in the Java API. To do this binding purely in Java it is necessary to use oracle.cabo.ui.data.bind.AccessKeyBoundValue as in the following example:

BundleBoundValue bundle = new BundleBoundValue("myResourceBundle", 
                                               "goHomeLink");
AccessKeyBoundValue text = new AccessKeyBoundValue(bundle, 
                                                   false); //return text
AccessKeyBoundValue key = new AccessKeyBoundValue(bundle, 
                                                  true); //return accessKey
LinkBean goHomeLink = new LinkBean();
goHomeLink.setAttributeValue(UIConstants.TEXT_ATTR, text);
goHomeLink.setAttributeValue(UIConstants.ACCESS_KEY_ATTR, key);

See Internationalization for more details.

Example

Here is a comprehensive example. A link to a live version of the example follows (note that Netscape 4.x does not support access keys).

<page xmlns="http://xmlns.oracle.com/uix/controller" 
           xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
           xmlns:html="http://www.w3.org/TR/REC-html40">

 <ctrl:content xmlns="http://xmlns.oracle.com/uix/ui"
                xmlns:data="http://xmlns.oracle.com/uix/ui" >
  <form name="form1">
   <contents>
    <pageLayout>

     <globalButtons>
      <globalButtonBar>
       <contents>
        <globalButton textAndAccessKey="&amp;Help"
          destination="http://www.oracle.com"/>
       </contents>
      </globalButtonBar>
     </globalButtons>

     <tabs>
      <tabBar>
       <contents>
        <link textAndAccessKey="Goto &amp;Help" destination="http://www.oracle.com/"/>
       </contents>
      </tabBar>
     </tabs>

     <pageHeader>
      <globalHeader>
       <contents>
        <link textAndAccessKey="&amp;Oracle"
           selected="true"
           destination="http://www.oracle.com/"/>
        <link textAndAccessKey="&amp;Oracle"
           destination="http://www.oracle.com/"/>
       </contents>
      </globalHeader>
     </pageHeader>

     <contents>
      <flowLayout>
       <contents>
         Here is a
        <link textAndAccessKey="&amp;Link." destination="http://www.oracle.com/" />
         Notice that L is the access key.
       </contents>
      </flowLayout>

      <flowLayout>
       <contents>
        <styledText labeledNodeId="txt1" textAndAccessKey="&amp;Name" />
        <textInput name="txt1" id="txt1" text="Oracle" />
       </contents>
      </flowLayout>

      <flowLayout>
       <contents>
         Here are some buttons with the access keys set
        <button textAndAccessKey="&amp;Update" destination="" />
        <submitButton textAndAccessKey="&amp;Submit" />
        <resetButton textAndAccessKey="&amp;Reset" />
       </contents>
      </flowLayout>

      <styledText textAndAccessKey="Styled &amp;Text" destination=""
         styleClass="OraHeader" />

      <flowLayout>
       <contents>
         Here is 
        <link textAndAccessKey="another &amp;Link."
          destination="http://www.oracle.com/" />
         Notice that L has been used again as the access key.
       </contents>
      </flowLayout>

     </contents>
    </pageLayout>
   </contents>
  </form>
 </ctrl:content>
</page>

Accessibility Modes

The previous sections describe how to make a UIX application generally accessible. However, a disabled user's experience can be further improved by adding additional features to an application. But this level of support may have negative impacts on regular users. Therefore, UIX supports an Accessibility Mode API which allows the level of accessibility support to be customized per user.

The various accessibility modes are implemented in the class oracle.cabo.share.config.AccessibilityMode. Currently, three levels are supported:

The current accessibility mode is obtained by getting the Configuration.ACCESSIBILITY_MODE property from the current Configuration (The current Configuration is obtained from the current RenderingContext or BajaContext).

In order to change the current level of accessibility, it is necessary to implement a Configuration (this can be done using either the ConfigurationImpl class or Customization class), and set an accessibility mode using Configuration.ACCESSIBILITY_MODE as the key (see Configuration for details).

References

• W3C Accessibility Page (www.w3.org/WAI/)
• W3C's Checklist for Web Content Accessibility Guidelines (WCAG) (www.w3.org/TR/WCAG10/full-checklist.html)

Conclusion

In this chapter you learned how to make your UIX applications accessible by using extra informational attributes, making it easy for screen readers to assimilate your data, and simplifying keyboard access to your application.

Although not covered in this chapter, another way to make your applications more accessible is to allow the user to select larger font sizes and/or choose high contrast color schemes. You can use UIX Styles to implement these features in your applications.