Issue Detection Agent
Learn how the Issue Detection Agent uses AI to automatically find accessibility issues in your website and provide suggestions to fix them.
The Issue Detection Agent combines BrowserStackβs rule engine with AI to identify accessibility issues in your website. By enhancing both the depth of coverage (more checks performed within each criterion) and the breadth of coverage (more WCAG success criteria tested), the agent increases both the scope and precision of accessibility testing, delivering a detailed, accurate assessment of your websiteβs accessibility.
Some accessibility rules require human judgment and contextual understanding. As a result, they cannot be fully automated. The issue detection agent uses AI to automate these rules, reducing the need for manual intervention.
AI-powered rules
BrowserStackβs Issue Detection Agent enhances the capabilities of the following rules:
- color-contrast: Enhances the color contrast detection algorithm by auto-reviewing a majority of contrast issues, which otherwise need a manual review. This way, it reduces manual effort by about 80%.
- decorative-image: Enhances the identification of decorative images that can be ignored by assistive technologies for a better user experience.
- meaningful-alt-text-ai: Detects inappropriate alt text on non-decorative images, and suggests meaningful alt text.
- missing-long-alt: Detects images that require long descriptions.
How the Issue Detection Agent helps
The Issue Detection Agent helps you by:
- Enhancing standard rule-based accessibility checks with AI, improving both accuracy and coverage. The agent enhances:
- Depth of coverage: Performing more checks within each success criterion. For example, for WCAG 1.4.3 (Contrast (Minimum)), the agent confidently marks borderline cases as violations or passes, reducing false positives and negatives.
- Breadth of coverage: Expanding the range of WCAG success criteria tested. For example, the agent not only checks whether an image has alternative text (WCAG 1.1.1) but also evaluates if the alternative text is meaningful and contextually appropriate.
- Detecting issues that rule-based checks may miss, such as decorative images not marked as decorative, or the meaningfulness of alternative text for images.
- Providing actionable and contextual fix suggestions, reducing the manual effort needed to identify and resolve issues. For example, if an image lacks alternative text, the agent suggests adding a meaningful description based on the imageβs context within the website.
How the Issue Detection Agent works
The Issue Detection Agent analyzes your websiteβs UI components and their properties to identify potential accessibility issues. It leverages AI to understand the context and semantics of each element, allowing it to provide more accurate and relevant suggestions for improvement.
Example
Consider the following example of a meaningful-alt-text-ai violation:
In this case, the Issue Detection Agent detects that an imageβs alt text is not meaningful. It also suggests an alternate text that is more descriptive and contextually appropriate. These improvements help you make the content more readable for users with visual impairments.
Limitations and considerations
- AI-generated suggestions might not always match your websiteβs design or context. You should review and validate these suggestions, especially for custom components or unique user interactions, before implementing the changes.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!