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

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 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) |