Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Accessibility - Supported features

Updated on September 14, 2020

Note: This article is not compatible with Pega Platform™ 8.1 and later.

The following features provide default behaviors that are immediately available to users of Process Commander applications deploying the Accessibility Framework:

Work User Portal and Harness Features

  • Text equivalents for images
  • Data table support
  • Table column support
  • Frame navigation
  • Descriptive titles for frame identification and page navigation
  • Accessible list views and summary views
  • Auto expansion of collapsed headers in the harness and gadgets on the portal

Work User Portal Only Features

  • Accessible work list
  • OnChange selection lists replaced with buttons
  • Title attribute for left navigation panel
  • Visual focus indicator for bars in the left navigation panel

Harness Only Features

  • Visual focus indicator
  • Form controls explicitly associated with labels
  • Accessible action frame
  • Accessible take action drop down box
  • Tabbed displays
  • Accessible history/attachment window
  • Custom plug-ins
  • Accessible URLs
  • Accessible parties section
  • Accessible style sheet
  • Date and DateTime formatting controls
  • Locale-specific date formatting
  • TextArea control
  • Accessible required field indicator
  • Shortcut keys
  • Shortcut key to the first control in the tabbing sequence
  • Error handling
  • Warnings when changing the current window

 

Work User Portal and Harness Features

Text equivalents for images

Images on the default work manager and work user portals and harness will include text equivalents using ALT tags. Images used as spacers will have ALT tags containing empty quotes.

Example:

class='iconClose' alt='Close this item' title='Close this item' isIcon='true'

When adding custom images you must specify the tooltip for the ALT tag text.

back to top

Data table support

The HTML tags TR, TD, and TH allow data in a table to be associated with the correct table header. Table functionality is supported in list views and repeating layouts. Styling tables used only for layout management do not include the accessible HTML tags or attributes

Example:

<html>
<head>
</head>
<body>
<div id="lvdata1">
<table cellspacing="0" cellpadding="0" class="ViewTableStyle" id="ViewTable" tabindex="0" summary="get worklist for selected operator ID">
<tbody>
<tr class="lvFixedHeaderRow">
<th class="ViewHeaderStyle" id="th_Urgency">Urgency</th>
<th class="ViewHeaderStyle" id="th_ID">ID</th>
<th class="ViewHeaderStyle" id="th_Subject">Subject</th>
<th class="ViewHeaderStyle" id="th_Status">Status</th>
<th class="ViewHeaderStyle" id="th_Instructions">Instructions</th>
</tr>
<tr title="click for a detailed view" tabindex="0" rowindex="1" class="listTableRowStyle">
<td class="tdLeftStyle" headers="th_Urgency">
<img height="12" src="https://docs-previous.pega.com/images/zprredclock_access.gif" alt="Within one hour of Deadline or it has passed"/>10
</td>
<td class="tdLeftStyle" headers="th_ID">W-34594 </td>
<td class="tdLeftStyle" headers="th_Subject">Simple Task </td>
<td class="tdLeftStyle" headers="th_Status"><span class="">Open </span></td>
<td class="tdLeftStyle" headers="th_Instructions">Research</td>
</tr>
<tr title="click for a detailed view" rowindex="2" class="listTableRowShadedStyle">
<td class="tdLeftStyle" headers="th_Urgency">
<img height="12" src="https://docs-previous.pega.com/images/zprredclock_access.gif" alt="Within one hour of Deadline or it has passed"/>10
</td>
<td class="tdLeftStyle" headers="th_ID">W-48112 </td>
<td class="tdLeftStyle" headers="th_Subject">Simple Task </td>
<td class="tdLeftStyle" headers="th_Status"><span class="">Open </span></td>
<td class="tdLeftStyle" headers="th_Instructions">Research</td>
</tr>
<tr title="click for a detailed view" rowindex="3" class="listTableRowStyle">
<td class="tdLeftStyle" headers="th_Urgency">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

zzz

back to top

Table column support

The scope = "col" attribute is added in tables implemented as list views and as repeating layouts. The scope attribute specifies the set of data cells to be associated with the current header cell.

Example:

<HTML>
<HEAD>
<TITLE> Timeliness by operator </TITLE>
</HEAD>
<BODY>
<table id='tblMain' summary='Timeliness by operator' cellPadding=0 cellSpacing=1 width='99%' align='center'>
<tr tr_vheader='true'>
<Th rowspan='1' class='listTableHeaderStyle'> </Th>
<th scope='col' rowspan= '1' nowrap colspan='1' align='center'>Within Goal</th>
<th scope='col' rowspan= '1' nowrap colspan='1' align='center'>Past Goal</th>
<th scope='col' rowspan= '1' nowrap colspan='1' align='center'>Past Deadline</th>
<th scope='col' rowspan= '1' nowrap colspan='1' align='center'>Total</th>
</tr>
<TR class='SViewTableRowStyle'>
<TD scope='row' td_groupby='true' >Operator : Brad</TD>
<TD style='text-align:right;'>&nbsp; 12</TD>
<TD style='text-align:right;'>&nbsp; 1</TD>
<TD style='text-align:right;'>&nbsp; 7</TD>
<TD style='text-align:right;'>&nbsp; 19</TD>
</TR>
<TR class='SViewTableRowShadedStyle'>
<TD scope='row' td_groupby='true' >Operator : Mike</TD>
<TD style='text-align:right;'>&nbsp; 1</TD>
<TD style='text-align:right;'>&nbsp; 13</TD>
<TD style='text-align:right;'>&nbsp; 0</TD>
<TD style='text-align:right;'>&nbsp; 1</TD>
</TR>
<TR class='SViewTableRowStyle'>
<TD scope='row' td_groupby='true' >Operator : Bill</TD>
<TD style='text-align:right;'>&nbsp; 1</TD>
<TD style='text-align:right;'>&nbsp; 2</TD>
<TD style='text-align:right;'>&nbsp; 0</TD>
<TD style='text-align:right;'>&nbsp; 1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

zzz

back to top

Frame navigation

Users can tab to all frames in the portal and on the harness.

back to top

Descriptive titles for frame identification and page navigation

Descriptive frame titles are included on the portal and on the harness.

back to top

Accessible list views and summary views

List views and summary views become accessible. The following are supported:

  • accessible style sheets
  • TR, TD, and TH data table tags
  • the summary attribute
  • alt tags for all images
  • label field associations with prompt input fields
  • tab order navigation
  • visual focus is on the current row
  • summary view charts are replaced with reports
  • header includes anchors to provide sorting functionality
  • title attribute is added to radio buttons to support row selection

zzz

back to top

Auto-expansion of collapsed headers in the harness and portal gadgets

Collapsed gadgets on the portal and collapsed headers on the harness automatically expand when accessibility is enabled. In 5.5, the expand/collapse icons for portal gadgets have been removed to prevent gadgets from being collapsed.

back to top

WorkUser Portal Only Features

Accessible work list

An accessible work list supports the following:

  • data table tags
  • includes the scope = "col" and summary attributes
  • does not use color to convey meaning
  • provides sufficient color contrast
  • includes alt tags for all images
  • header includes anchors to provide sorting functionality
  • the visual focus indicator places focus on the current row
  • the "Where Am I?" feature is disabled
  • urgency indicator clocks display urgency through shape.

zzz

back to top

OnChange selection lists replaced with buttons

An action button is added below drop down selection lists such as New, Find, Search, and Filter. This allows the user to tab to the selection list, navigate the list using the arrow keys, tab to the action button, and then use the enter key to make the selection.

zzz

back to top

Title attribute for left navigation panel

Title attributes are added to the bars in the left navigation panel (Dashboard, Process Work, and Monitor Activity).(V5.5)

back to top

Visual focus indicator for bars in the left navigation panel

Bars in the left navigation panel (Dashboard, Process Work, and Monitor Activity) are highlighted using the visual focus indicator. This allows the user to see more easily which bar on the left navigation panel the cursor icon is indicating. (V5.5)

back to top

Harness Only Features

Visual focus indicator

The visual focus indicator allows the user to see more easily which input field the cursor is on in the form.

zzz

back to top

Form controls explicitly associated with labels

Form controls explicitly associated with labels via the Label tag and the For attribute are supported for text boxes, radio buttons, checkboxes, and drop down lists.

By default, label-input association is supported for input fields to the right of a label.

For all other label-input associations (such as input fields to the left of a label or below a label) you can use the label cell properties field Label For to specify the label-input association. In this field, you enter the name of the property you want to associate with the label.

Example:

<LABEL for="firstname">First name:
<INPUT type="text" id="firstname" tabindex="1">
</LABEL>

zzz

back to top

Accessible action frame

The take action frame displays actions without iframes and provides accessible alternatives for the Take Action drop down box.

zzz

This feature is enabled by default. To disable the accessible action frame, see Configuration Options.

back to top

Accessible take action drop down box

A Go button is added to the right of the take action drop down box allowing the user to tab to the selection box, navigate the available actions using the arrow keys, tab to the Go button, and then use the enter key to select the action.

zzz

To enable this feature:

  1. Copy the UseActionNoFrame WHEN rule and and save it to your RuleSet.
  2. Update the UseActionNoFrame WHEN rule to false.

zzz

back to top

Tabbed displays

Anchor tags support the navigation of tabbed displays in the perform harness. Operators use the tab key to focus on a tab and press enter to bring the tab into focus.

zzz

back to top

Accessible history/attachment window

An accessible history window and an attachment window are supported.

zzz

zzz

back to top

Custom plug-ins

Custom plug-ins are supported in the accessible history/attachment window. For more information about adding custom plug-ins, see Adding browser plug-ins to accessible applications.

zzz

back to top

Accessible URLs

URLs are now accessible and display underlined instead of displaying with blue text.

zzz

back to top

Accessible parties section

A Go button is added to the right of the Parties drop down box allowing the user to tab to the selection box, navigate the available actions using the arrow keys, tab to the Go button, and then use the enter key to select the action.

zzz

This feature can be disabled. See Configuration Options.

back to top

Accessible style sheet

A sample accessible style sheet is available for your use. This is the default style sheet that is generated by the code when accessibility is enabled.  Use this sample or you can design your own accessible style sheet.

zzz

This feature can be disabled. See Configuration Options.

back to top

Date and DateTime formatting controls

Date and date/time fields display using accessible date formatting. Existing HTML date and date/time formats are converted to the HTML formats SelectDate and SelectDateTime. The formatting controls do not support the calendar icon and can be disabled. See Configuration Options.

zzz

back to top

Locale-specific date formatting

The date displays based on the user's locale.

back to top

TextArea control

TextArea fields are automatically expanded to support accessibility.

back to top

Accessible required field indicator

The star associated with required fields is replaced with an ASCII star.

back to top

Shortcut keys

Shortcut keys can be added to:

back to top

Shortcut key to the first control in the tabbing sequence

The shortcut ALT + F is a default behavior that places focus on the first input field on-screen. For more information, see Customizing the first control in the tabbing sequence shortcut key.

back to top

Error handling

Accessible error handling is supported for both server and client-side validation. The following are supported for server validation:

  • the text "Error occurred" is added to the window title
  • all error messages are displayed at the top and bottom of the form
  • the focus is placed at the top of the window
  • the red 'x' error indicator is replaced with the error message text displayed next to the field

The following are supported for client-side validation:

  • an error message pop-up window displays when tabbing away from the field in error
  • focus is placed on the error causing field

This feature can be disabled. See Configuration Options.

back to top

Warnings when changing the current window

A warning message displays when the user performs an action that changes the current window.

zzz

You can disable this warning message by editing the WarnBeforeChangingWindow when rule to return false.

back to top

Additional information

About the Accessibility Framework

Tags

Pega Platform 7.1.1 - 7.4 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us