Issue Remediation Agent

Use the Issue Remediation Agent to get context-aware solutions for accessibility violations in your website.

The Issue Remediation Agent uses AI to provide actionable, context-specific guidance to fix accessibility violations in your website. This reduces the time developers and testers spend researching solutions and improves accuracy.

AI-powered rules

BrowserStack’s Issue Remediation Agent enhances the capabilities of the following rules:

• accessible-name: Provides remediation guidance (code & text) to fix non-accessible names for UI elements, ensuring they are descriptive and meaningful.
• aria-expandable-region: Provides remediation guidance (code & text) for making expandable regions accessible using ARIA attributes.
• aria-roles: Provides remediation guidance (code & text) to ensure correct usage of ARIA roles for UI elements.
• distinguishable-link: Provides remediation guidance (code & text) to ensure links are visually distinguishable.
• keyboard-interactive: Provides remediation guidance (code & text) to make interactive elements keyboard accessible.
• keyboard-menu: Provides remediation guidance (code & text) for making menus accessible via keyboard.
• link-purpose: Provides remediation guidance (code & text) to ensure links have clear and descriptive text that explains their purpose.
• menu-expand: Provides remediation guidance (code & text) for making expandable menus accessible.
• meta-viewport: Provides remediation guidance (code & text) to ensure that users can scale and zoom the website properly.
• role-required: Provides remediation guidance (code & text) for ensuring ARIA roles are present for interactive elements.
• role-required-carousel: Provides remediation guidance (code & text) for ensuring ARIA roles are present for interactive carousel components.
• select-name: Provides remediation guidance (code & text) for ensuring <select> elements have accessible names.
• video-caption: Provides remediation guidance (code & text) for ensuring video elements have captions.
• text-in-images: Provides textual remediation guidance for ensuring images don’t have text embedded.
• form-field-multiple-labels: Provides textual remediation guidance for ensuring form fields do not have multiple labels.

How the Issue Remediation Agent helps

The Issue Remediation Agent helps you in the following ways:

• Provides solutions tailored to your website’s UI elements.
• Offers step-by-step remediation guidance.
• Generates concise code snippets matching the relevant language or framework.
• Reduces the learning curve for developers and testers.

How the Issue Remediation Agent works

The Issue Remediation Agent analyzes your website’s UI components and their properties to understand the context of the elements. Using this context and AI, it suggests corrective actions based on what the Spectra™ Rule Engine detects.

Example

Consider the following example of a keyboard-interactive violation:

In this case, the Issue Remediation Agent suggests the correct way to code the interactive element so that it is accessible with a keyboard. The agent also provides a code snippet to implement the fix. These improvements help you make the content more accessible for users with disabilities.

Limitations and considerations

• Review AI-generated suggestions and code examples before you implement them to ensure they fit your website’s design, context, and project setup. Manually check edge cases, such as custom components or complex dynamic content, as AI may not cover every scenario.

References

• For WCAG standards covered by BrowserStack’s Spectra™ Rule Engine, see Rules supported by BrowserStack Accessibility.
• To understand how BrowserStack uses AI to enhance issue detection, see Issue detection agent.