Accessibility DevTools CLI

A command line interface to run accessibility checks on your React and HTML files.

Usage

Step 1: Installation

First, install the BrowserStack Accessibility DevTools CLI via npm

npm install -g accessibility-devtools-cli

Step 2: Authentication

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
3. Set up the two environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY a. For Zsh, add in ~/.zshrc b. For Bash, add in ~/.bashrc or ~/.bash_profile c. For Fish Shell, add in ~/.config/fish/config.fish

Step 3: Run your tests

Run the CLI on your file(s) or directory

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

Sample pre-commit script:

#!/usr/bin/env bash
# Identify project root
GIT_ROOT=$(git rev-parse --show-toplevel)

# Allow skipping a11y checks
if [ -n "$SKIP_A11Y_CHECKS" ]; then
    echo "Skipping accessibility checks."
    exit 0
fi
echo "Running accessibility checks..."
if [ -n "$NON_STRICT_A11Y_CHECKS" ]; then
    # Run checks, but be lenient
    npx accessibility-devtools-cli --include $GIT_ROOT/src/**.jsx --non-strict
    exit 0
fi

# Run checks and don't let commit pass if exit code is !0
npx accessibility-devtools-cli --include $GIT_ROOT/src/**.jsx
exit $?