Accessibility DevTools

Run accessibility checks on your React and HTML files

Documentation

Usage

Step 1: Authentication

Pre-Requisites

1. Sign up on http://browserstack.com
2. Get your Username and Access Key by logging in to http://browserstack.com and going to Profile → Account & Profile → My Profile → Authentication & Security

For local execution

Set up the two environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY

1. For Zsh, add in ~/.zshrc
2. For Bash, add in ~/.bashrc or ~/.bash_profile
3. For Fish Shell, add in ~/.config/fish/config.fish

For CI/CD

Save the username and access key in the CI/CD secrets and inject into the build.

Step 2: Run your tests

Via CLI

Run the linter manually from your terminal, or integrate it into Git pre-commit hooks and build scripts.

npx @browserstack/accessibility-devtools -i src/**/*.tsx

CLI Options

`--version`: Show version number
`--include` or `-i`: Glob pattern(s) for files to lint
`--exclude` or `-e`: Glob pattern(s) for files to exclude from linting
`--username` or `-u`: BrowserStack username (if not provided, taken from BROWSERSTACK_USERNAME env variable)
`--access-key` or `-k`: BrowserStack access key (if not provided, taken from BROWSERSTACK_ACCESS_KEY env variable)
`--non-strict` or `-n`: Run in non-strict mode (only print violations, do not exit with non-success code)
`--help`: Show help

Exit Codes:

0 - no issues 1 - open accessibility issues 2 - BrowserStack connection issues

Via Node.js

Install the BrowserStack Accessibility DevTools via npm

npm install @browserstack/accessibility-devtools --save-dev

Use the API for custom build scripts (like Gulp/Node.js runners etc.)

export interface AccessibilityDevToolsOptions {
  // List of glob patterns to include in the linting process.
  include: string[];
  // List of glob patterns to exclude from the linting process.
  exclude?: string[];
  // BrowserStack credentials
  browserstackUsername: string;
  browserstackAccessKey: string;
  // Whether to run in non-strict mode, default: false
  nonStrict?: boolean;
}
enum RunStatus {
  SUCCESS = 0,
  FAILURE = 1,
  ERROR = 2,
}
export default function runA11yDevtools(options: AccessibilityDevToolsOptions): Promise<RunStatus>;

Sample code snippet:

import runA11yDevtools from '@browserstack/accessibility-devtools';
runA11yDevtools({
  include: ['src/**/*.jsx'],
  exclude: [],
  browserstackUsername: 'your_username',
  browserstackAccessKey: 'your_access_key',
});

API Parameters

| Property | Type | Required | Description | | :---------------------- | :--------- | :------- | :-------------------------------------------------------------------------------- | | include | string[] | Yes | Glob pattern(s) for files to lint. | | browserstackUsername | string | Yes | Your BrowserStack account username. | | browserstackAccessKey | string | Yes | Your BrowserStack account access key. | | exclude | string[] | No | Glob pattern(s) to ignore. | | nonStrict | boolean | No | Run in non-strict mode (only print violations, do not exit with non-success code) |