Bumi - Accessibility Linter (WCAG/a11y)

Accessibility linter for React, Vue, Angular & HTML. Catch a11y issues while coding with WCAG 2.2 diagnostics, quick fixes, and detailed rationale.

Developed by: Flat Electronics Canada Limited
Website: bumi.ca

Features

Real-time Accessibility Diagnostics

Get instant feedback on accessibility issues directly in your editor:

• Squiggly underlines highlight potential issues
• Color-coded by severity (Critical, Serious, Moderate, Minor)
• Issues appear in the Problems panel
• Supports React (JSX/TSX), Vue, Angular, HTML, and Razor

Quick Fixes

One-click fixes for common accessibility issues:

• Add missing alt attributes to images
• Add aria-label to buttons and links
• Add keyboard accessibility attributes
• Fix role and tabindex issues

Rich Hover Tooltips

Hover over any issue to see:

• What is checked
• Why it matters
• Who is affected
• Limitations of the check
• Manual verification steps

Rule Explorer

Browse all 18 accessibility rules in the sidebar:

• Search by ID, title, or WCAG criterion
• Filter by framework, severity, or WCAG principle
• View detailed rule documentation

Report Export

Export accessibility reports for documentation:

• JSON format for CI/CD integration
• HTML format with accessible formatting

Supported File Types

Baseline Rules (18)

Commands

Settings

Configuration File

Create bumi.config.json in your project root for project-specific settings:

{
  "rules": {
    "disabled": ["HEADING_NO_H1"],
    "severityOverrides": {
      "IMG_SUSPICIOUS_ALT": "minor"
    }
  },
  "ignore": ["dist/**", "build/**"],
  "customComponents": {
    "buttons": ["CustomButton", "IconButton"],
    "links": ["NavLink", "RouterLink"]
  }
}

Privacy & Principles

• Local-first: All scanning happens on your machine. No code is sent externally.
• Explainable: Every diagnostic includes WCAG mapping, rationale, and limitations.
• Conservative fixes: Quick fixes are safe and reversible.
• Fast: Designed for instant feedback on save.
• Non-absolute language: We use "may help identify" and "potential issue" rather than claiming guaranteed compliance.

Important Disclaimer

This extension is designed to assist developers in identifying potential accessibility issues during development. Automated accessibility testing may help identify approximately 30% of accessibility issues. Manual testing with assistive technologies is recommended for comprehensive accessibility evaluation.

This tool does not guarantee WCAG conformance. Consult with qualified accessibility professionals for complete assessments.

Publishing to VS Code Marketplace

Prerequisites

1. Create a Microsoft Account at https://account.microsoft.com
2. Create an Azure DevOps Organization at https://dev.azure.com
3. Generate a Personal Access Token (PAT):
   • Go to Azure DevOps > User Settings > Personal Access Tokens
   • Create new token with:
     • Organization: All accessible organizations
     • Scopes: Marketplace > Manage
   • Copy and save the token securely

Publishing Steps

1. Install vsce (VS Code Extension Manager):

   npm install -g @vscode/vsce
   

2. Create a Publisher:

   vsce create-publisher flat-electronics-canada
   

   Follow the prompts and enter your PAT when asked.

3. Login to your Publisher:

   vsce login flat-electronics-canada
   

4. Build the Extension:

   cd vscode-extension
   npm install
   npm run compile
   

5. Package the Extension:

   vsce package
   

   This creates a .vsix file.

6. Publish to Marketplace:

   vsce publish
   

Alternative: Manual Upload

1. Go to https://marketplace.visualstudio.com/manage
2. Sign in with your Microsoft account
3. Click "New Extension" > "Visual Studio Code"
4. Upload the .vsix file

Version Updates

To publish updates:

1. Update version in package.json
2. Run vsce publish minor (or major/patch)

Or specify exact version:

vsce publish 1.0.1

License

MIT License

Copyright (c) 2024 Flat Electronics Canada Limited

Made in Canada 🍁

For support, contact: support@bumi.ca