@browserstack/accessibility-devtools

Accessibility DevTools

Run accessibility checks on your React and HTML files

Documentation

Usage

Step 1: Authentication

Pre-Requisites

• Sign up on http://browserstack.com
• 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

• For Zsh, add in ~/.zshrc
• For Bash, add in ~/.bashrc or ~/.bash_profile
• 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)