Get started with Visual Studio Code

Install the Accessibility DevTools plugin for Visual Studio Code to run accessibility scans.

You can use the Accessibility DevTools plugin in Visual Studio Code to identify and fix accessibility issues as you develop your applications.

Prerequisites

Ensure you have Visual Studio Code installed on your machine. Optionally, sign in with your BrowserStack account to access enhanced features.

Install the VS Code extension

Follow these steps to install and start using Accessibility DevTools in VS Code:

1. Open Visual Studio Code.
2. Press Ctrl+Shift+X or Cmd+Shift+X to open the Extensions Marketplace.
3. Search for “Accessibility DevTools” in the Extensions Marketplace.
4. Click Install to add the extension to your IDE.

Set up the extension

1. Log in to your BrowserStack account or sign up if you don’t have an account.
2. Obtain your Username and Access Key from the Account & Profile section section on the dashboard.
3. Open Visual Studio Code and press Ctrl+Shift+P or Cmd+Shift+P.
4. Search Preferences: Open User Settings (JSON) and press Enter.

5. In your settings.json file, add the Username and Access Key (from Step 2) at the root level, inside the first set of curly braces ({}):

    {
        "browserstack.username": "your_username",
        "browserstack.accessKey": "your_access_key"
        ...
    }
   

6. Save the settings.json file. The linter starts working.

Run accessibility scans

To get started with running accessibility scans, follow these steps:

1. Open a code file (.jsx, .js, .tsx) in Visual Studio Code. As you write or edit code, accessibility issues are detected automatically and highlighted inline.
2. Hover over a highlighted code to view detailed information about the accessibility problem.
3. Click on Fix to receive AI-powered code suggestions for remediation.
4. Review and apply the suggested fix directly in your code editor.
5. Repeat the process as you continue coding to ensure ongoing accessibility compliance.