Blyxo Accessibility Scanner

About this plugin

Scan Figma designs for accessibility issues. WCAG 2.1 compliance checking with exportable reports.

## ✨ Key Features

### 10 Automated Accessibility Checkers

- Color Contrast (WCAG AA/AAA)

- Text Size & Spacing

- Touch Target Size (44×44px minimum)

- Alt Text for Images

- Accessible Naming

- Focus Order

- Semantic Landmarks

- Heading Hierarchy

- Form Accessibility

- Keyboard Navigation

### Smart Scanning Options

- **Heuristic Mode** (default): Intelligently detects interactive elements based on visual characteristics

- **Strict Mode**: Only detects elements with specific naming conventions

- **Selection Scanning**: Scan specific frames or entire pages

### Keyboard Navigation Simulation

- Visual tab order with numbered indicators

- Flow lines showing navigation paths

- Keyboard trap detection

- Skip link validation

### Design Handoff Annotations

- Auto-generate accessibility annotations

- HTML/CSS code snippets for developers

- WCAG criteria references

- Semantic structure guidance

### Export & Reporting

- **CSV Export**: Compatible with Excel, Google Sheets, and axe-core format

- **JSON Export**: Developer-friendly format with full metadata

- Comprehensive statistics and summaries

## 🎯 Use Cases

- **Designers**: Validate accessibility early in the design process

- **Design Systems**: Ensure component libraries meet WCAG standards

- **Design Handoff**: Provide clear accessibility intent to developers

- **Audits**: Generate compliance reports for stakeholders

## 📊 WCAG Compliance

Checks compliance with WCAG 2.1 Level A, AA, and AAA across 17 success criteria including:

- 1.1.1 Non-text Content

- 1.4.3 Contrast (Minimum)

- 2.4.3 Focus Order

- 4.1.2 Name, Role, Value

- And many more...

## 🚀 Getting Started

1. Install the plugin

2. Open your Figma design

3. Run "Blyxo Accessibility Scanner"

4. Click "Scan Current Page" (or select specific frames)

5. Review issues and fix accessibility problems

6. Generate annotations for developer handoff

7. Export results as CSV or JSON

## 🆚 Comparison

Feature parity with axe for Designers, but open source and free!

## 💡 Best Practices

- Use semantic layer names (e.g., "Submit Button", "H1: Hero Heading")

- Add descriptions to layers for alt text and ARIA labels

- Check contrast early in the design process

- Ensure interactive elements are at least 44×44px

- Structure pages with proper landmarks (Header, Nav, Main, Footer)

## 📝 Support

- Email: [email protected]

- Web: https://blyxo.app

## 📄 License

MIT License - Open source and free to use

---

Built with ❤️ by the Blyxo team