How can we help you?

With Stark's Storybook Addon, you can quickly run WCAG Audits right from within your Storybook panels, and test your designs against all of Stark's vision simulations.

---

Installing the Add-on

Run the following command to install the addon in your Storybook repo:

npm install -D storybook-addon-stark

Then include Stark's Storybook Addon in your addons list:

// .storybook/main.ts
export default {
  addons: ["storybook-addon-stark"],
};

---

Using the Addon

There are two main ways to use the Stark addon:

1. At the top of the Storybook preview, click the Stark logo and select a Vision Simulation from the dropdown.
2. To remove the simulation, simply select Reset Vision Simulation from the dropdown.

1. In the Storybook Panels, select Stark.
2. Stark will automatically audit the Storybook preview frame for accessibility issues.
3. Change between Violations, Potentials, and Passed test results by using the tabs at the top.
4. More information on how to fix issues can be found by clicking the "WCAG Explained" links below each code block.

---

Have any questions about using our Storybook Addon? Suggestions or feedback? Don’t hesitate to reach out to us at support@getstark.co.