{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/accessibility/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"What is accessibility?","navTitle":"Accessibility","slug":"design/accessibility/","hidePage":false,"collapsibleGroup":null,"group":"guidelines","seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"In the world of digital technology, accessibility ensures that all users— from people with permanent disabilities to those with temporary and situational challenges— can perform work as efficiently as possible, with or without assistive technologies.\n\nSo, why is accessibility important? Designing flexible applications allows users to work in any environment, on any device, with any browser at any time. Accessibility ensures that each user, no matter their ability level, is set up for success with your application."},"body":[{"id":"ca597bd2-473b-5216-874a-e320638966df","strapi_component":"layout.section","subSections":[{"id":"afbb54ac-546f-5aea-85e6-74df60e1d0a6","title":"Page navigation","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"A screen reader user relies on page structure to scan content and quickly navigate to information of interest. \n\nThe Constellation design system offers the following features to support accessible page navigation:  \n- Landmark regions, or important page regions, on all pages and templates, including main, navigation, search, banner and content information regions \n- Headings and heading levels included by default for all configured Views \n- Skip links to main regions for quick navigation to critical content  \n- Unique page titles and URLs"}},{"id":"b54f2a35-e360-5a95-b426-fd0110baeca7","title":"Semantic structure  ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles are used for all standard components when HTML does not support functionality.  These follow the standard WCAG guidelines and techniques, representing name, role, and state, as appropriate.  \n- Content grouping is supported with the appropriate ARIA for fields, radio buttons, and checkboxes.   \n- Unique IDs are used for all interactive elements "}},{"id":"f4441f48-4dab-5e81-a678-fd104919f635","title":"Labels","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Labels, placeholders, and alternative text help users understand the UI and visualize the tasks they must complete.  \n\nThe Constellation design system offers the following to support proper labeling: \n\n- Labels for all form fields and controls (required).   Labels are programmatically associated with the field. They are set to the data label name by default, but can be edited as needed \n- Helper text for form fields (optional), to provide further information on how to use a field \n- Placeholder text for additional context (optional). Placeholder text is persistent and meets contrast requirements "}},{"id":"8db7311d-a159-5803-b4ce-8d2a7a75e32e","title":"Non-text content  ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"All images, icons, buttons, and controls include alternative text and helper text where appropriate. For example: \n\n- Alternative text is used for meaningful images  \n- Presentation role is used when an image provides no additional meaning and is skipped by screen readers   \n- Helper text is available to provide clearer context for input fields"}},{"id":"fe7d66f2-dbdf-5085-8ae8-2c0171eee105","title":"Color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.   "}},{"id":"c9ad9262-c807-504f-a406-4207b7e3d23b","title":"Error management","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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 in text, in a manner that is accessible to screen readers.  "}}],"title":"How we support accessibility","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system targets the international [WCAG 2.1 AA standard](https://www.w3.org/TR/WCAG21) for accessible software, striving to provide patterns and components built with accessibility in mind. But Constellation also pushes for accessibility beyond compliance—accessibility improves user experience and satisfaction for all users, while making applications more human-centered, natural, and contextual. \n\nConstellation is developing the following accessible features to be used out-of-the-box:"}},{"id":"0db59904-13c3-5354-af9d-a3e2b2d4f9b7","strapi_component":"layout.section","subSections":[{"id":"ee2f97d5-a798-5a16-8854-ac6d76589ef6","title":"Use clear labels","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Ensure labels are associated with fields by positioning labels above associated input fields\n- Use simple, clear language—ensure language is descriptive text, not technical terms. Avoid using abbreviations unless they've been defined"}},{"id":"8e2c34a2-1daa-5920-a197-9a5e8c91ddad","title":"Configure themes in an accessible way","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Ensure colors and fonts meet accessibility standards\n  - The color contrast ratio of content should be a minimum of 4.5:1\n  - Font sizes for body text should range between 14-16px\n  - Sans Serif fonts can be used to improve the legibility of text"}},{"id":"2aa90fcc-8da2-5955-a9d7-bdcc920b43d2","title":"Present content clearly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Structure content with a clear information hierarchy, so content makes sense for screen reader users or users of other assistive technology\n- Include only the most essential information needed to complete a task"}}],"title":"How you can support accessibility","childStrapiComponentLayoutSectionBodyTextnode":{"body":"You can take additional steps to ensure anything you design within Constellation follows accessibility standards."}},{"id":"0aa54fa2-1ee1-5fe1-a7c8-5b34462d179e","strapi_component":"layout.section","subSections":[],"title":"Additional accessibility resources","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Learn more about accessibility on the Pega Community Blog:\n \n- [UX for All: Designing for Accessibility in 8 Steps](https://community.pega.com/blog/ux-all-designing-accessibility-8-steps)\n- [What is the Difference Between Building Apps for Accessibility vs. Compliance?](https://community.pega.com/blog/what-difference-between-building-apps-accessibility-vs-compliance)\n- [Is Accessibility Only for the Legally Disabled?](https://community.pega.com/blog/accessibility-only-legally-disabled)\n\nFinally, reduce unintentional bias with AI using [Pega's Ethical Bias Check](https://www.pega.com/products/decision-hub/ethical-bias-check)."}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"What is accessibility?","navTitle":"Accessibility","slug":"design/accessibility/","hidePage":false,"collapsibleGroup":null,"group":"guidelines","seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"In the world of digital technology, accessibility ensures that all users— from people with permanent disabilities to those with temporary and situational challenges— can perform work as efficiently as possible, with or without assistive technologies.\n\nSo, why is accessibility important? Designing flexible applications allows users to work in any environment, on any device, with any browser at any time. Accessibility ensures that each user, no matter their ability level, is set up for success with your application."},"body":[{"id":"ca597bd2-473b-5216-874a-e320638966df","strapi_component":"layout.section","subSections":[{"id":"afbb54ac-546f-5aea-85e6-74df60e1d0a6","title":"Page navigation","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"A screen reader user relies on page structure to scan content and quickly navigate to information of interest. \n\nThe Constellation design system offers the following features to support accessible page navigation:  \n- Landmark regions, or important page regions, on all pages and templates, including main, navigation, search, banner and content information regions \n- Headings and heading levels included by default for all configured Views \n- Skip links to main regions for quick navigation to critical content  \n- Unique page titles and URLs"}},{"id":"b54f2a35-e360-5a95-b426-fd0110baeca7","title":"Semantic structure  ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) roles are used for all standard components when HTML does not support functionality.  These follow the standard WCAG guidelines and techniques, representing name, role, and state, as appropriate.  \n- Content grouping is supported with the appropriate ARIA for fields, radio buttons, and checkboxes.   \n- Unique IDs are used for all interactive elements "}},{"id":"f4441f48-4dab-5e81-a678-fd104919f635","title":"Labels","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Labels, placeholders, and alternative text help users understand the UI and visualize the tasks they must complete.  \n\nThe Constellation design system offers the following to support proper labeling: \n\n- Labels for all form fields and controls (required).   Labels are programmatically associated with the field. They are set to the data label name by default, but can be edited as needed \n- Helper text for form fields (optional), to provide further information on how to use a field \n- Placeholder text for additional context (optional). Placeholder text is persistent and meets contrast requirements "}},{"id":"8db7311d-a159-5803-b4ce-8d2a7a75e32e","title":"Non-text content  ","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"All images, icons, buttons, and controls include alternative text and helper text where appropriate. For example: \n\n- Alternative text is used for meaningful images  \n- Presentation role is used when an image provides no additional meaning and is skipped by screen readers   \n- Helper text is available to provide clearer context for input fields"}},{"id":"fe7d66f2-dbdf-5085-8ae8-2c0171eee105","title":"Color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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.   "}},{"id":"c9ad9262-c807-504f-a406-4207b7e3d23b","title":"Error management","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"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 in text, in a manner that is accessible to screen readers.  "}}],"title":"How we support accessibility","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system targets the international [WCAG 2.1 AA standard](https://www.w3.org/TR/WCAG21) for accessible software, striving to provide patterns and components built with accessibility in mind. But Constellation also pushes for accessibility beyond compliance—accessibility improves user experience and satisfaction for all users, while making applications more human-centered, natural, and contextual. \n\nConstellation is developing the following accessible features to be used out-of-the-box:"}},{"id":"0db59904-13c3-5354-af9d-a3e2b2d4f9b7","strapi_component":"layout.section","subSections":[{"id":"ee2f97d5-a798-5a16-8854-ac6d76589ef6","title":"Use clear labels","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Ensure labels are associated with fields by positioning labels above associated input fields\n- Use simple, clear language—ensure language is descriptive text, not technical terms. Avoid using abbreviations unless they've been defined"}},{"id":"8e2c34a2-1daa-5920-a197-9a5e8c91ddad","title":"Configure themes in an accessible way","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Ensure colors and fonts meet accessibility standards\n  - The color contrast ratio of content should be a minimum of 4.5:1\n  - Font sizes for body text should range between 14-16px\n  - Sans Serif fonts can be used to improve the legibility of text"}},{"id":"2aa90fcc-8da2-5955-a9d7-bdcc920b43d2","title":"Present content clearly","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"- Structure content with a clear information hierarchy, so content makes sense for screen reader users or users of other assistive technology\n- Include only the most essential information needed to complete a task"}}],"title":"How you can support accessibility","childStrapiComponentLayoutSectionBodyTextnode":{"body":"You can take additional steps to ensure anything you design within Constellation follows accessibility standards."}},{"id":"0aa54fa2-1ee1-5fe1-a7c8-5b34462d179e","strapi_component":"layout.section","subSections":[],"title":"Additional accessibility resources","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Learn more about accessibility on the Pega Community Blog:\n \n- [UX for All: Designing for Accessibility in 8 Steps](https://community.pega.com/blog/ux-all-designing-accessibility-8-steps)\n- [What is the Difference Between Building Apps for Accessibility vs. Compliance?](https://community.pega.com/blog/what-difference-between-building-apps-accessibility-vs-compliance)\n- [Is Accessibility Only for the Legally Disabled?](https://community.pega.com/blog/accessibility-only-legally-disabled)\n\nFinally, reduce unintentional bias with AI using [Pega's Ethical Bias Check](https://www.pega.com/products/decision-hub/ethical-bias-check)."}}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}