Building accessible applications in Constellation

Page structure is critical when you are designing an inclusive experience for users. Not everyone navigates the page in the same way. We often use visual cues to orient users to the content of a page, such as bold, italics, font, alignment, boxes, separators, and color. For accessibility reasons, we need to consider alternative methods for making these distinctions.

Regions, headings, bypass blocks, and search functionality are just some of the tools that you can use to create such distinctions in your application. In Constellation, all of these tools are included out-of-the-box with no configuration necessary.

Labels allow users to better understand the interactive content on a page. This is important for visual users as well as users with visual impairment. Although a component may seem obvious to some, a label will always provide a clearer meaning for the component’s intention in the application. For example, a text box with the label “First name” informs the user of the information that is requested in the field.

In Constellation, labels are provided by default by leveraging the field name from the data structure. These labels can be edited for complete customizability. To follow accessibility best practices, it is not recommended to remove the visibility of a label, but there may be a business reason to do so. Even if visibility is removed, the label remains associated with the field so that a person with a visual impairment using a screen reader can still have that content available to them.

Sometimes, having only a label on a field is insufficient for users to understand what action they need to take on that field. Adding additional informational text can be helpful for those with learning disabilities, impaired cognitive abilities, or those users for whom the language of the application is not their native language. This “helper text” serves as a method of providing further contextual information for all users.

Constellation offers several accessible helper text options for fields that you can use when building your application. Some options are provided out-of-the-box and others can be configured. 

Tooltips

Tooltips are generally used for icon buttons with no visual label and functionally replace the title attribute. In Constellation, tooltips are accessible out-of-the-box components and display automatically when applicable. These components are not configurable without customizing the tooltip component itself.

The following image shows a tooltip being used for a specific UI element:

Placeholder text

Placeholder text allows developers to have the ability to provide guidance on form field inputs. For example, the format of a date field can be indicated as placeholder text. Out-of-the-box placeholder text meets contrast guidelines to ensure text is legible. Any customizations in font or background color choices could impact accessibility.

The following image shows placeholder text configured to provide additional information on the Make, Model, Color, and Model year fields:

Helper Text

Helper text in Constellation will provide inline visible text for the selected component. This text provides additional guidance to a user for filling out the form. Helper text is visible beneath the field in a form. Helper text is configurable in App Studio and has no character limit.

The following image shows helper text configured to provide additional information on the Card type and Card number fields:

Help icon

The help icon is generally used to provide more in-depth guidance on a form and can be accessed by the user through tab focus, hover or mouse click. Selecting the icon opens an overlay with configurable information.

Displaying data within a grid is a very common way to organize content within an application. Grids allow users to manipulate, filter and sort data so they can analyze and make decisions. In Constellation, we have implemented a simple, straight-forward table navigation for all users, including those reliant on a keyboard or screen reader. This navigation aligns with the Web Content Accessibility Guidelines from the Web Authoring Initiative, a sub-division of the World Wide Web Consortium that develops standards and support materials to help people understand and implement accessibility.

In Constellation, tables have the following accessibility features:

• Instructions: Allow screen reader users to identify the best way to navigate the table. 

• Captions: Allow for easy identification of table content for screen reader users. Captions can be configured on any table. 

• Single menu action: Simplifies navigation for keyboard-only users by limiting to only one tab stop on column headers. Tab stops indicate where the cursor stops when the Tab key is pressed.

• Links: Navigating to a single link or button in a cell brings focus directly to that element. Keyboard users have immediate access to content, including multiple links, buttons and icons. 

• Bulk actions: Checkbox and radio buttons are fully accessible within the table and can be used for any bulk action flow.   

• Progressive loading of content: Allows users to retrieve content iteratively as they navigate down a set of data within a table. This process is compatible with screen readers and announces as content is loaded dynamically.

• Editing: If editing content within a table is required, the recommendation is to configure a modal triggered by button or icon.

Application forms support client-side and server-side validation by default. If the application detects an error, the application communicates the problem to the user.   

Errors are communicated through visual identification, announcements to screen readers through ARIA live announcement, and focus management for keyboard users. Error banners are used for both client-side and server-side validation options. A user can review the list of items that triggered the error so that they may address them.

Pega recommends accessibility best practices to support the use of assistive devices. The following list describes several configuration options developers can perform to improve application accessibility.

• Use clear labels for optimal comprehension and leverage helper text for further clarity 
• Maintain some whitespace to reduce cognition overload and help with responsivity 
• Take care with fonts, font sizes and color choices 
  • Fonts should be sans serif for legibility 
  • Font size should be a minimum of 14px 
  • Contrast ratio for text and background should be 4.5:1 
• Use table grids for read-only content 
  • Grids should be used for data manipulation and navigation
  • Field groups should be used for data entry
• Limit the number of columns used within a table

Check your knowledge with the following interaction: