No, screen reader support is not guaranteed for custom UI components added via the Amazon Connect CCP SDK. While the default CCP provides ARIA attributes for its core controls, these accessibility features do not extend automatically to developer-implemented widgets.
Accessibility Responsibility Breakdown
When extending the CCP with a custom UI, the responsibility for accessibility shifts from AWS to the developer. The following distinctions apply to the implementation:
ARIA Roles and Labeling
The Amazon Connect SDK does not inject ARIA roles, labels, or descriptions into custom HTML elements. If you add a custom button or status indicator, it will be invisible or unlabeled to a screen reader unless you explicitly define the appropriate attributes (e.g., role="button", aria-label="End Call"). This is true across all current SDK versions.
Visual Accessibility Propagation
High-contrast mode and text-size adjustments do not automatically "force" a custom widget to be accessible. The behavior depends on your CSS strategy:
- Inherited Styles: Custom elements using relative units (
em, rem) or inheriting from the parent container will generally respect text-size changes.
- Fixed Styles: Elements with hard-coded pixel values or third-party library styles that override the parent may ignore high-contrast or zoom settings.
Browser and Screen Reader Variance
While modern browsers (Chrome, Firefox, Edge) generally handle ARIA consistently, behavior can diverge regarding ARIA live regions (used for real-time call status updates). Some screen readers may prioritize default CCP announcements over custom live regions depending on the browser's accessibility tree implementation.
Verification Steps
To ensure your custom components meet accessibility standards, perform these targeted checks:
- DOM Inspection: Use browser developer tools to verify that every interactive element has a defined
role and a descriptive aria-label.
- Contrast Testing: Enable the OS-level high-contrast mode and verify that custom widget borders and text colors update to maintain readability.
- Screen Reader Walkthrough: Use NVDA (Windows), JAWS (Windows), or VoiceOver (macOS) to navigate the CCP using only the keyboard. Confirm that custom widgets are focusable and their purpose is announced.
Diagnostic Detail Needed: Are you using a third-party UI framework (e.g., Material UI, Tailwind, Bootstrap) for your custom components? Some frameworks provide built-in accessibility primitives that simplify this process, while others require manual overrides to prevent CSS collisions with the CCP.
aws