Get started with the npm plugin

Install and run the BrowserStack Accessibility DevTools npm package to scan React and HTML files for accessibility issues in your existing npm workflow.

The @browserstack/accessibility-devtools npm package integrates accessibility scanning directly into your existing npm-based workflow. As it requires no separate binary installation, it fits seamlessly into CI/CD pipelines and local developer setups. Just run npm install and you’re ready to go.

Prerequisites

• Node.js 16 or later.
• A BrowserStack account. If you don’t have one, sign up for free.
• Your BrowserStack Username and Access Key from the Account & Profile page.

Supported file types

The npm plugin supports the following file types:

• React: .js, .jsx, .tsx
• HTML: .html

Set up authentication

To set up authentication, you need to add your credentials in both your local system and your CI/CD tool.

Local setup

Set up your BrowserStack credentials as environment variables in your shell configuration file:

export BROWSERSTACK_USERNAME=<your-username>
export BROWSERSTACK_ACCESS_KEY=<your-access-key>

export BROWSERSTACK_USERNAME=<your-username>
export BROWSERSTACK_ACCESS_KEY=<your-access-key>

set -x BROWSERSTACK_USERNAME <your-username>
set -x BROWSERSTACK_ACCESS_KEY <your-access-key>

CI/CD setup

Store your credentials as secrets in your CI/CD platform and inject them as environment variables into the build environment.

Run accessibility checks

You can run accessibility checks using the CLI or the Node.js API:

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

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

import runA11yDevtools from '@browserstack/accessibility-devtools';

runA11yDevtools({
  include: ['src/**/*.jsx'],
  exclude: [],
  browserstackUsername: 'your_username',
  browserstackAccessKey: 'your_access_key',
});

Related resources

• Accessibility DevTools overview
• Run checks with CLI
• BrowserStack Account & Profile
• @browserstack/accessibility-devtools on npm