@browserstack/accessibility-devtools

Accessibility DevTools

Run accessibility checks on your React and HTML files

Documentation

Usage

Step 1: Installation

First, install the BrowserStack Accessibility DevTools via npm

npm install @browserstack/accessibility-devtools

Step 2: 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 3: Run your tests

Via CLI

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

npx accessibility-devtools-cli --include src/**.jsx

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 --browserstack-username or -u: BrowserStack username (if not provided, taken from BROWSERSTACK_USERNAME env variable) --browserstack-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

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';
const runStatus = runA11yDevtools({
  include: ['src/**/*.jsx'],
  exclude: [],
  browserstackUsername: 'your_username',
  browserstackAccessKey: 'your_access_key',
});
process.exit(runStatus);

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)