Skip to main content
🎉 A11y Issue Detection Agent is now live! Detect accessibility issues like a WCAG expert with AI. Try now!
No Result Found
Connect & Get help from fellow developers on our Discord community. Ask the CommunityAsk the Community

Get started with JetBrains IDEs

Install the BrowserStack plugin for JetBrains IDEs to run accessibility scans while you code.

You can use the BrowserStack plugin in JetBrains IDEs (IntelliJ, WebStorm, Android Studio and others) to identify and fix accessibility issues as you develop your applications.

Prerequisites

Ensure you have the latest JetBrains IDE installed and a BrowserStack account. IDEs with version 2022.3 and higher support accessibility features. If you do not have a BrowserStack account, you can sign up for free.

Install the plugin

To install the Accessibility DevTools plugin, follow these steps:

  1. Open your JetBrains IDE (for example, IntelliJ IDEA or WebStorm).
  2. Click the settings icon at the top right to open Settings/Preferences.
  3. Click Plugins and go to the Marketplace tab.
  4. Search for BrowserStack and click Install.
  5. Restart the IDE when prompted. After restart, BrowserStack appears in the Installed plugins list.

Set up the extension

Set your BrowserStack credentials so the plugin can authenticate:

  1. Log in to your BrowserStack account or sign up if you don’t have one.
  2. Find your Username and Access Key in the Account & Profile page.
  3. In your JetBrains IDE, open Settings and click BrowserStack.
  4. Enter your Username and Access Key (from Step 2) in the respective fields.

    DevTools settings with Username and Access Key fields

  5. Click Apply then OK. The plugin validates the credentials.

Restart the IDE to load the updated environment.

Run accessibility scans

To run an accessibility scan while coding, follow these steps:

  1. Open a code file (.jsx, .js, .tsx) in your JetBrains IDE. As you write or edit code, accessibility issues are automatically detected and highlighted inline.
  2. Hover over the highlighted code to view detailed information about the accessibility problem.
  3. You can also fix the issue using AI. Click the lightbulb icon, then choose the Fix with AI option. To do this, you must enable AI chat in your IDE. For more information, see Fix errors with AI.
  4. Review the suggested fix. Apply it or modify the code manually.
  5. Continue editing until no issues remain. After resolving all the issues, commit your changes to keep accessibility fixes incremental.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle