Identifying Images and User Interface Elements
This section explains how to design applications according to the following WCAG 2.0 standards:
1.1.1 - Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below: Controls, Input; Time-Based Media; Test; Sensory; CAPTCHA; and Decoration, Formatting, Invisible.
1.3.1 - Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
2.4.6 - Headings and Labels: Headings and labels describe topic or purpose.
3.3.2 - Labels or Instructions: Labels or instructions are provided when content requires user input.
Ensure that all user interface elements have descriptive labels. PeopleTools provides the ability to add labels to user interface elements, but it does not automatically insert labels. You must add them manually.
User interface elements include functional images, page controls (such as push buttons and edit boxes), grids, group boxes, and scroll areas. Functional images include image buttons and links and images that convey meaningful information, such as status. Meaningful labels are vital for people who are blind or visually impaired so that they can understand the meaning of an image through screen readers. Image labels also clarify the meaning of images for sighted users, because the labels appear as mouse-over text in some browsers. Decorative images, such as invisible spacer files or images that do not serve a functional purpose other than to provide visual interest, should have blank (empty) labels.
Note: When you assign labels
to images in PeopleSoft Application Designer, PeopleTools generates
alternate text (<ALT> HTML tags) based on the labels at runtime. These
labels are visible to all users as mouse-over text in some browsers,
regardless of whether the system administrator makes the accessibility
layout features available to users in PeopleTools Security.
Oracle recommends that you use the browser zoom utility, as opposed to the text zoom, to avoid distortion on the page. If the text zoom is used, the text becomes larger, but the corresponding buttons, grids, and so on, do not change, so the page becomes distorted.
This section provides general guidelines for creating label text, but this information is not meant to be a complete discussion about text. You should consult other resources, as well.
Follow these general guidelines when you create label text to assign to user interface elements:
Use descriptive text that explains the specific function or purpose of the user interface element.
For example, do not create a link labeled “Click here.” Use a descriptive label, such as “Return to Previous Page.”
Use unique labels for all images and controls on a page.
Many screen readers generate lists of the various controls (such as buttons and links) on a page to make it easier for users to navigate without having to tab through the entire page. If two buttons on a page have the same name, users may not be able to determine which one they need from the list that is generated by the screen reader.
For example, if you create a page to send an e-mail, do not include a “Find” link for the To field and another “Find” link for the CC field. In a screen reader, the list of links displays two “Find” links but no additional information to differentiate between them.
Note: Within grids, the same fields, buttons, and links appear in every row. However, these are not considered duplicates because screen readers typically read the row number with each label (for example, “row 1 Details link,” “row 2 Details link,” and so on).
Avoid using abbreviations in labels.
Screen readers read abbreviations differently. For example, some read Nbr as a word and others read it as individual letters, either of which could confuse users.
Avoid using punctuation and symbols in labels.
Screen readers interpret symbols differently. For example, some read # as number and some read it as pound.
Do not modify formatting styles to add color, bold, or italicized text to labels because screen readers do not recognize formatting changes.
Do not use device-dependent language such as “Click” in link text.
Not all users use a mouse, so the word click can be misleading.
To assign labels to user interface elements:
Open the properties for the image or page control in PeopleSoft Application Designer.
On the Label tab, select the type of label, and enter or select the label text.
Label types include a message from the Message Catalog, custom label text, or the RFT long or RFT short label if the image or control is associated with a record field. (Not all label types are available for all types of controls.) The Message Catalog is the preferred source of label text because it can be translated. The Message Catalog contains labels for the following types of page elements: folder tabs, scroll left and right buttons, hide and show grid tabs, prompt buttons, expand and collapse grid buttons, group boxes, and scroll areas.
Follow these principles when choosing the type of label:
For buttons and links that perform a function, choose a label that describes the function (for example, Search or Save).
For data entry fields, choose a label that describes what to enter in the field.
If an image displays text, choose a label that is exactly the same as the text in the image.
If an image is not active but conveys information, choose a label that conveys the same information (for example, a description of the status).
If an image is redundant or conveys no information, leave the label blank.
Guidelines for Data Entry Field Labels
To ensure that screen readers read data entry field labels properly, use the following general guidelines when creating field labels:
Avoid repeating group box labels in the field labels within the group box.
When you include fields within a group box, screen readers read the group box label before each field label within the group box.
Avoid adding additional text after the field that explains information about what the user should enter.
Screen readers do not typically read this type of text with the field labels. Instead, a user must specifically command the screen reader to read the entire page or a particular area of the page. As an alternative to including additional text after the field, make the field label more descriptive.
Do not use static text or a second independent field as the label for a data entry field.
Doing so may cause confusion for people who are blind or visually impaired, because not all screen readers interpret these situations correctly. Always assign the label to the field in the properties for that field.
Do not insert a text field above a column of entry fields to simulate a table and column heading.
Instead, assign a unique label to each field or use a grid, if appropriate.
Size edit boxes, long edit boxes, and drop-down list boxes so that the full contents are visible without horizontal scrolling.
Place labels close to the corresponding fields.
For edited boxes, long edited boxes, and drop-down list boxes, place labels to the left (or above) the field. For check boxes and radio buttons, place labels to the right.
Note: Do not place entry fields between radio buttons. This placement may interfere with how screen readers read the radio buttons.
Guidelines for Group Boxes
If group boxes are used only for visual layout purposes, select the Suppress Accessible Label check box in Application Designer on the Group Box Properties – Label tab. This prevents screen readers from reading the label when the Accessibility Layout option is set to Screen Reader On.
Avoid nesting group-boxes unnecessarily as this can lead to confusion for screen reader users. It is recommended to use only one level deep for group boxes. For additional levels, use a header.
If images have no information to convey to users and do not serve as navigation, they should not have labels. Images used as spacers, such as invisible GIFs, also should not have labels.
To remove labels from images:
Open the properties for the image in PeopleSoft Application Designer.
On the Label tab, set the Label Text Type field to Static Text.
Delete any characters from the Text field if it is present.
You do not need to enter a space. Leave the Text field blank.
Charts and graphs present data as images or client-side image maps with links to navigate to details about the data. Because charts and graphs typically display significant amounts of data, providing alternate text labels for the chart or graph images is usually not enough to make the data accessible to people using screen readers. To make charts and graphs more accessible:
Do not use ASCII images to display charts and graphics; use the objects that are provided in PeopleTools.
Do not use color alone to convey information in charts and graphs.
See Providing Alternatives to Color Coding to Convey Meaning.
Provide textual information to describe the content of charts and graphs.
You can insert a static text field to describe the charts and graphs, but also consider displaying the underlying table information of the chart or graph in a grid format when the Accessibility Layout option is set to Screen Reader On. This method ensures that users in Screen Reader On mode get the same information that the chart or graphic image conveys.
Note: The label that you specify on the Label tab of the Chart Properties dialog box is for information-only and does not appear at runtime. This label appears on the control order list on the Order tab of the page definition and any page definition report that you print.
When you create grids, make sure that you include column headings for all visible columns, including columns that contain images and links. In addition, avoid adding grid controls (such as scroll actions). Grid controls that you add are not included automatically within the page area that is skipped by the PeopleTools-generated page anchor.
Column headings and their alignment are derived from the label text that you select on the Label tab in the properties for the page control or page field that you assign to the column. Therefore, you must make sure that the associated page controls or data entry fields have appropriate labels, according to the guidelines in the preceding sections. Also make sure that you select the Show Column Headings (runtime) check box on the Label tab in the Grid Properties dialog box.
If adding column headings will interfere with usability for sighted users, you can hide the grid column titles so that they appear only when the Accessibility Layout option is set to Screen Reader On by adding PeopleCode that renames the column headings at runtime.
Row headings can be assigned in Application Designer, by providing a value for the Row Header option. If Row Header is not specified, then the row header generated by default is the first display-only edit field.
Include titles and descriptive summaries for all grids and scroll areas. To do this:
Open the properties for the grid or scroll area in PeopleSoft Application Designer.
On the Label tab, select the Display Title check box.
Click the Properties button for the display title to open the Title Properties dialog box.
Enter the Label text that you want to appear in the title:
Field or Control
Definition
Type Select the type of label text to appear in the navigation bar.
Message Catalog: Select this option to use a message in the Message Catalog as the title.
Static: Select this option to manually enter text as the title.
Text Enter the text to appear as the title of the scroll area. This field is enabled when you select Static as the Label Text type.
Message Set/Number Enter the message set number and message number of the message in the Message Catalog to appear as the title of the scroll area. This field is enabled when you select Message Catalog as the Label Text type.
Click OK to return to the Label tab in the properties.
Click the Properties button in the Summary group box to open the Summary Properties dialog box.
Note: The default value of the summary matches the title. However, you should add a more detailed description of the contents of the grid or scroll area to make the summary more useful in Screen Reader On mode.
Clear the Default to Title check box to activate the other Summary options.
Enter static text or enter a message set and number to use text from the Message Catalog.
Click OK twice.
In some cases you might want to hide labels so that they do not appear on screen but are still read by screen readers when Accessibility Layout option is set to Screen Reader On mode. For example, a currency field that appears to the right of an amount field may not require a visible label for sighted users. However, people who are blind or visually impaired often navigate to fields from a list of fields that the screen reader generates, so each field requires a label.
To hide labels while still enabling screen readers to access them:
Open the properties for the page control or page field in PeopleSoft Application Designer.
On the Label tab, make sure that a label is selected and change the style to PTTRANSPARENT.
This style is set up to be invisible except for users in Screen Reader On mode.
Note: If you use PTTRANSPARENT for a check box label, make sure that no fields are close to the check box label, even though it is transparent, because it might overlap the field.
If you use a field or an HTML area to display text that contains important information, such as error messages, use PeopleCode to display the message in a pop-up window when Accessibility Layout option is set to Screen Reader On mode. Screen readers do not typically read display-only field values unless a user specifically commands the screen reader to read the entire page or a particular area of the page.
The following example shows how to create this type of PeopleCode:
If All(&CAL_FINAL_TS) Then
If GetUserOption("PPTL", "ACCESS") = "A" Then
MessageBox(%MsgStyle_OK, "", 17000, 407, "");
End-If;
&rs0(1).DERIVED_GP.TEXT254.Value = MsgGetText(17000, 407, "");
&rs0(1),DERIVED_GP.TEXT254.Visible = True;
Else