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.
• Install GitHub Copilot extension in your IDE.
• Optionally, sign in with your BrowserStack account to access enhanced features.

Install the Visual Studio Code extension

Follow these steps to install and start using Accessibility DevTools in Visual Studio 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 on the dashboard.
3. Open Visual Studio Code and open Settings > Extensions > BrowserStack.
4. Enter the Username and Access Key from step 2, and click OK.

Run accessibility scans

To get started with running accessibility scans:

1. Open a supported file in Visual Studio Code. As you write or edit code, the editor automatically detects and highlights accessibility issues inline.
2. Hover over a highlighted code to view detailed information about the accessibility problem.
3. Review and apply the suggested fix directly in your code editor.
4. Repeat the process as you continue coding to ensure ongoing accessibility compliance.

Visual Studio Code extension link

Use the following link to open the BrowserStack Accessibility DevTools extension in the Visual Studio Code Marketplace:

• BrowserStack Accessibility DevTools extension for Visual Studio Code