Creating Accessible UIX User Interfaces

ADF UIX user interface components are accessible to both visually impaired and physically impaired users. UIX supports text-to-audio screen readers by providing text descriptions as well as state of visual content (e.g., enabled or disabled button). Labels and access key support provide alternative methods for disabled users to access input elements and links via the keyboard.

Screen Reader Support

Images that are automatically generated by UIX user interface components have built-in descriptions that can be read by screen readers or non-visual browsers, e.g., the error or warning icons produced by messageLayout.

For images generated from user provided icons (e.g., globalButton icons) and images produced by certain components such as tabBar and train, UIX uses the button, tab, or step text attribute value supplied by the user to generate text that describes the component name as well as its state. For example, in the following UIX XML code fragment, the generated text for the single tab bar would read: "Home: Currently selected tab."

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

Although UIX provides text descriptions for most of its components, some components require additional information to make them accessible.

Images

When displaying images, use the shortDesc or longDescURL attribute to provide either a short description about the image or a link to a file with a longer description. For example:

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

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

The shortDesc attribute transforms into an HTML alt attribute.

Layout images such as background images, bullets, or curved borders around objects do not convey useful information other than provide visual appeal to sighted users. If you use such images, you should still set shortDesc attributes on the images, but use empty strings as the attribute values. For example:

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

Frames

If you must use frames, be sure to provide links to alternative pages without frames in the alternateContent section. For example:

<frameBorderLayout shortDesc="Shopping Cart Application" longDescURL="LongDescriptions.html#navFrame" > ... <alternateContent> <link text="Click here for a no-frames version" destination="noframes.html" /> </alternateContent> ... </frameBorderLayout>

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

With each frame, you should also provide a generic description about the contents by using either the shortDesc or longDescURL attribute of the <frame> element.

Tables

When using tables, use the summary attribute to provide a description about the table contents. For example:

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

Labels and Access Key Support

While it is possible to use the Tab key to move from one input element to the next in a web application, keyboard shortcuts are more convenient and efficient. Providing keyboard shortcuts to input elements involves defining labels for the input elements and binding keys to the elements.

Labels for input elements

When providing labels next to input fields, use the labeledNodeId attribute to associate the label with the ID of the input element. This enables the screen reader to identify the input element when reading the label. The following UIX XML code fragment illustrates the use of the labeledNodeId attribute.

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

Note: All UIX XML Message components (e.g., messageTextInput, messageChoice) automatically associate the label with the input element.

Access keys

Use the accessKey or textAndAccessKey attribute in an input element to bind a specified key on the keyboard with the element.

In the following example, when a user presses the keys Alt+h, the "Go Home" link will be brought into focus.

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

To highlight the letter "H" in the link text "Go Home," specify the text with the textAndAccessKey attribute and use the ampersand character (represented by &) immediately before the letter, as shown in the next example:

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

Input elements that can also be bound using the textAndAccessKey attribute include button, submitButton, resetButton, globalButton, and styleText .

The next example uses a label and an access key. When the user presses Alt+n, the textInput element will be brought into focus.

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

Note: The same access key can be bound to several elements. Each time the access key is pressed, focus will move from element to element. When the last element is reached, focus will return to the first element.