Find and Fix Accessibility Issues in Vega Studio

The A11y Inspector in Vega Studio checks your app’s .tsx and .jsx files for accessibility issues as you edit. It flags components that assistive technologies, such as the VoiceView screen reader, can’t describe or operate correctly, and offers one-click fixes for most issues. The A11y Inspector is on by default, and you can’t turn it off.

Prerequisites

Vega Studio version 0.24.2 or later. For installation instructions, see Set Up Vega Studio.

Find accessibility issues

The A11y Inspector analyzes each .tsx and .jsx file you open and marks issues in the editor with a wavy underline. The underline color shows the severity:

Blocker (red) - Assistive technologies can’t use the element. Fix these first.
Critical (yellow) - The element uses a deprecated accessibility prop.
Major (blue) - The element is missing information that helps users understand or operate it.

Above each flagged element, a CodeLens annotation shows the number of issues and their severity, for example A11y: 2 broken · 1 bad. The annotation includes Fix, Preview, and Explain buttons.

Scan your whole workspace

The inspector checks files as you open them. To check every .tsx and .jsx file in your workspace at once:

Open the command palette.
Run A11y Inspector: Run Lint.

The results appear in the Accessibility view in the Vega Studio sidebar. The Accessibility view lists every accessibility issue in your workspace. To open it, run A11y Inspector: Show Sidebar from the command palette. To change how issues are organized, select Group by Severity or Group by File in the view’s title bar:

Group by Severity - Lists Blocker, Critical, and Major issues together.
Group by File - Lists issues under the file they appear in.

The Accessibility view in the Vega Studio sidebar, grouped by severity. The Blocker group is expanded and lists five issues, including invalid role values, a switch element missing its state, and a broken accessibilityDescribedBy reference.

Select an issue to go to it in the editor.

Understand an issue

To see a summary of an issue, hover over the underlined element. The tooltip shows the rule name, the diagnostic message, the severity, and a link to documentation. For more detail, select Explain in the CodeLens annotation. The Explain panel shows:

The rule name and severity
The diagnostic message
Guidance on how to fix the issue
Before-and-after code examples
Suppression syntax for the rule
Links to related documentation

The Explain panel for the missing-accessible-label rule, marked Blocker. It shows the diagnostic message, How to Fix guidance with before-and-after code examples that add aria-label, How to Suppress examples using eslint-disable-next-line comments, and a link to accessibility documentation.

Fix issues

You can fix one issue at a time or fix all fixable issues in your workspace at once.

Fix a single issue

Select the lightbulb icon next to the issue, or select Fix in the CodeLens annotation.
Choose the fix to apply. The inspector applies the fix and the wavy underline disappears from the element.

Quick fixes can:

Add a missing aria-label.
Add a missing role.
Add a missing aria-checked or aria-selected state.
Add a missing accessibilityHint.
Rename a deprecated prop, for example accessibilityLabel to aria-label, or accessibilityRole to role.
Replace an invalid role value, for example header with heading, or image with img.

Preview a fix before you apply it

Select Preview in the CodeLens annotation. The inspector shows the proposed change inline, highlighted in green.
Select Accept Fix to apply the fix, or Revert to discard it.

Fix all issues in your workspace

Open the command palette.
Run A11y Inspector: Fix All. You can also select Fix All in the title bar of the Accessibility view.

The inspector applies every available quick fix across your workspace. Issues that don’t have a quick fix stay in the issues view for you to fix manually. Review the changes before you commit them.

Suppress an issue

If an issue doesn’t apply to an element, you can suppress it. To add a suppression comment, select the suppress action from the lightbulb menu, or add the comment yourself.

Comment	Effect
`{/* a11y-ignore rule-name */}`	Suppresses the specified rule.
`{/* a11y-ignore-next-line */}`	Suppresses all rules on the next line.
`{/* a11y-ignore-next-line rule-name */}`	Suppresses the specified rule on the next line.

For example, to suppress the missing label rule for a decorative image:

{/* a11y-ignore-next-line missing-accessible-label */}
<Image source={backgroundPattern} />

The inspector also recognizes ESLint suppression comments:

{/* eslint-disable-next-line @amazon-devices/kepler/missing-accessible-label */}
<Image source={backgroundPattern} />

An eslint-disable-next-line comment without a rule name suppresses all rules on the next line.

Accessibility rules

Rule name	Severity	What it checks
`missing-accessible-label`	Blocker	Interactive or informative elements that don’t have an accessible label.
`missing-accessibility-state`	Blocker	Checkboxes, switches, radio buttons, and tabs that don’t expose their checked or selected state.
`invalid-role-value`	Blocker	`role` or `accessibilityRole` values that aren’t valid.
`dangling-described-by-ref`	Blocker	`accessibilityDescribedBy` references to a `nativeID` that doesn’t exist.
`dangling-transport-control-ref`	Blocker	`transportControls` entries that reference a `nativeID` that doesn’t exist.
`deprecated-prop-rename`	Critical	Deprecated accessibility props that have a replacement, such as `accessibilityLabel`.
`missing-accessibility-role`	Major	Interactive elements that don’t have a `role`.
`missing-accessibility-hint`	Major	Interactive elements that don’t have an `accessibilityHint`.

Develop Vega Apps

Find and Fix Accessibility Issues in Vega Studio

Prerequisites