Scan a project, fix a finding, watch it clear

In this tutorial we will run our first accessibility scan with b8e, read the findings it reports, fix one of them, and re-run the scan to watch that finding disappear. By the end you will have seen the whole loop the CLI is built around — scan, fix, verify — on a real project.

You do not need to know anything about accessibility rules yet. We will take one finding and fix it together.

Before we start

Install the CLI and sign in:

npm i -g @binclusive/cli
b8e auth login

b8e scan needs a session, so the sign-in is not optional — but the scan itself still runs entirely on your machine.

Then clone the public starter project:

git clone https://github.com/Binclusive/a11y-starter
cd a11y-starter

Step 1 — Scan the project

Scan the web source:

b8e scan ./src

b8e walks the source files and prints what it found: each file with a finding, and under it the rule that was flagged. One of those findings is on the hero image — it has no alternative text, so a screen-reader user would hear nothing where the image should be described. That is the finding we will fix.

(The starter also ships iOS, Android, Liquid and Unity examples. Scanning . instead of ./src picks all of them up, which is worth trying once you have finished here.)

Step 2 — Look closer at the finding

Ask for the machine-readable output so we can see the finding’s details:

b8e scan ./src --format json

Find the finding whose rule is about image alt text. It maps to WCAG success criterion 1.1.1, and it points at src/Hero.tsx. That is enough to fix it.

Step 3 — Fix the image

Open src/Hero.tsx. The hero image is missing its alt attribute:

<img src="/hero.png" width={640} height={360} />

Add an alt that describes the image:

<img src="/hero.png" width={640} height={360} alt="Team collaborating at a whiteboard" />

Save the file.

Step 4 — Scan again and watch it clear

Run the same scan once more:

b8e scan ./src

The image-alt finding on Hero.tsx is gone. You changed one line, re-ran the scan, and confirmed the fix — the loop the rest of your accessibility work will follow.

What we did

We scanned a project, read its findings, fixed the missing image alt text, and verified the fix by re-scanning. That is the core b8e loop.

Next, browse the command reference to see every flag b8e scan accepts, or the rules catalog to see what else the scanner checks.