# Accessibility & WCAG Compliance 🌐

CardScan.ai's React component is designed to meet WCAG 2.1 Level AA standards, ensuring our insurance card scanning solution is accessible to all users.

## Compliance Status

✅ **WCAG 2.1 Level AA Compliant**

### Comprehensive Testing & Remediation

Our React web component has undergone extensive accessibility testing across all major categories. All identified issues have been resolved to ensure full compliance.

| Test Category           | Status   | Testing Environments                                                                                  |
| ----------------------- | -------- | ----------------------------------------------------------------------------------------------------- |
| **Automated Tools**     | ✅ Passed | Industry-standard accessibility scanners                                                              |
| **Screen Readers**      | ✅ Passed | <p>• Windows 11 / Chrome / NVDA<br>• Android / Chrome / TalkBack<br>• iPhone / Safari / VoiceOver</p> |
| **Color Contrast**      | ✅ Passed | Windows 11 / Chrome                                                                                   |
| **Keyboard Navigation** | ✅ Passed | Windows 11 / Chrome                                                                                   |
| **Browser Zoom**        | ✅ Passed | Windows 11 / Chrome (100% - 200%)                                                                     |
| **Text Spacing**        | ✅ Passed | All supported browsers                                                                                |

### Testing Methodology

Our accessibility testing involved:

1. **Initial Assessment**: Comprehensive testing across all platforms
2. **Issue Identification**: Documentation of all accessibility barriers
3. **Remediation**: Fixed all identified issues
4. **Validation**: Re-tested to confirm compliance

## Key Accessibility Features

### Screen Reader Compatibility

* **Tested and verified** on:
  * NVDA (Windows 11 / Chrome)
  * TalkBack (Android / Chrome)
  * VoiceOver (iPhone / Safari)
* Descriptive ARIA labels on all interactive elements
* Dynamic content changes announced appropriately
* Clear navigation structure and landmarks

### Keyboard Navigation

* All features accessible via keyboard
* Tested on Windows 11 / Chrome
* Logical tab order throughout the interface
* Standard keyboard shortcuts (Enter/Space for activation)
* Visible focus indicators on all interactive elements

### Visual Accessibility

* WCAG AA compliant color contrast ratios verified
* Responsive to browser zoom (100% - 200%)
* Maintains functionality with modified text spacing
* Customizable colors and text sizes via CSS variables

### Mobile Accessibility

* Full support for mobile screen readers
* Touch-friendly interface that works with assistive technologies
* Tested on both Android (TalkBack) and iOS (VoiceOver)

## Customization for Accessibility

The React component provides CSS variables to further enhance accessibility for your specific user needs:

```css
.cardscan-widget {
  /* Adjust for higher contrast if needed */
  --message-text-color: #000000;
  --message-background-color: #ffffff;
  
  /* Increase text size for better readability */
  --message-font-size: 20px;
  --message-font-weight: 600;
  
  /* Ensure interactive elements are easily visible */
  --auto-switch-active-color: #0056b3;
  --progress-bar-color: #28a745;
}
```

## Platform Support

Accessibility features have been tested and verified on:

* **Windows**: Chrome with NVDA screen reader
* **Android**: Chrome with TalkBack
* **iOS**: Safari with VoiceOver
* **macOS**: Safari with VoiceOver (supported)

## Continuous Accessibility Commitment

We are committed to maintaining accessibility standards and regularly test our components to ensure continued compliance as we add new features.

## Accessibility Support

For accessibility-related questions or to report issues, please contact <support@cardscan.ai>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cardscan.ai/advanced-features/accessibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.