Accessibility

Accessibility means everyone can use your apps easily, whether they have a permanent disability, a temporary challenge, or use assistive tools to help them.

This flexibility lets people use your app anywhere, on any device, with any browser, and at any time. Accessibility helps all users succeed, no matter the challenges they face.

How we support accessibility

Pega’s UX design system follows the international WCAG 2.2 AA guidelines to make software accessible. This means it uses patterns and components designed to be easy for everyone. But it goes beyond just meeting the rules — it aims to make apps better for all users, even when dealing with areas WCAG doesn’t cover.

Here are some of the accessible features that it provides out-of-the-box:

Page navigation

A screen reader user relies on page structure to scan content and quickly navigate to information of interest.

To assist, the UX design system includes several features:

  • Visible Focus: It’s clear which part of the page the user is interacting with at any moment.
  • Automatic Focus: Automatically moves focus to the new heading when navigating to a new context.
  • Quick Keys (F9): Users can quickly jump between large sections of the page to find key information and finish work faster.
  • Landmark Regions: Important areas of the page (like navigation, search, and content) are included so users can find them easily.
  • Headings: Every page and view has headings to help users understand the structure of the content.
  • Skip Links: An automatically included menu where users can quickly jump to important sections of the page.

Semantic structure

  • ARIA roles are used as needed for components when HTML does not include support by default.  These follow the standard WCAG guidelines.
  • Content grouping is supported with the appropriate ARIA for fields, radio buttons, and checkboxes .
  • Unique IDs are used for all interactive elements.
  • Live announcements (polite and assertive) inform users of important information and are managed in one place.

Labels and content

Labels and alternative text help users understand the UI and work they must do.

The UX design system offers the following to support proper labeling:

  • Required labels for all form fields and controls. They are programmatically associated with the field.
  • Optional helper text for fields to help users successfully complete a field’s requirements.
  • Placeholder text, while available, is not recommended as a best practice.
  • It also prevents content from extending over 80 characters, in order to make content more readable for all users.

Non-text content

All images, icons, buttons, and controls include alternative text and helper text where appropriate. For example:

  • Alternative text is used for meaningful images
  • Rich text editor images have alternative text support
  • Presentation role is used when an image provides no additional meaning and is skipped by screen readers

Color

When configuring an application theme, warning flags are raised for any color combination selected that does not meet WCAG requirements.  This applies to both text and background, as well as interactive elements and their respective backgrounds.

Any color-based indicator (for example, using red to indicate an error), also provides text or an icon, to provide clarity for individuals with color blindness.

Error management

Forms support client-side and server-side validation. If the application detects an error, it communicates the problem to the user in text both on the field and within a banner, in a manner that is accessible to screen readers.

How you can support accessibility

You also can take additional steps to ensure anything designed within the design system is accessible.

Use clear labels

  • Use simple, clear language—ensure language is descriptive text, not technical terms. Avoid using abbreviations unless they’ve been defined.
  • Review our (writing guidelines)[/design/ux-writing-guidelines] for additional help.

Configure themes in an accessible way

Ensure colors and fonts meet accessibility standards.

  • The color contrast ratio of content should be a minimum of 4.5:1. UX design system will automatically flag any issues when configuring your theme.
  • Font sizes for body text should range between 14-16px.
  • Sans-Serif fonts improve the legibility of text.

Present content clearly

  • Structure content with a clear information hierarchy, so content makes sense for screen reader users or users of other assistive technology.
  • Include only the most essential information needed to complete the work.

Additional accessibility resources

Learn more about accessibility on the Pega Community Blog:

Additionally, you can tune into our Accessibility@Pega podcast on Spotify!