Skip to content

lab-00-setup.md

Latest commit

 

History

History
264 lines (175 loc) · 6.02 KB

lab-00-setup.md

File metadata and controls

264 lines (175 loc) · 6.02 KB
permalink /labs/lab-00-setup
title Lab 00: Prerequisites and Environment Setup
description Set up your environment with all required tools for WCAG 2.2 accessibility scanning.

Lab 00: Prerequisites and Environment Setup

Note

This workshop is part of the Agentic Accelerator Framework.
Duration 30 minutes
Level Beginner
Prerequisites None

Learning Objectives

By the end of this lab, you will be able to:

  • Fork and clone the accessibility-scan-demo-app repository
  • Install the required tools (Node.js, Docker, GitHub CLI, Azure CLI, PowerShell 7+, Charm freeze)
  • Verify all tool installations with version checks
  • Install scanner dependencies and Playwright browsers
  • Start the accessibility scanner locally and confirm it is running

Exercises

Exercise 0.1: Fork and Clone Repositories

You will fork the scanner repository so you have your own copy to work with.

  1. Open a terminal (PowerShell 7+).

  2. Fork and clone the scanner repository using the GitHub CLI:

    gh repo fork devopsabcs-engineering/accessibility-scan-demo-app --clone

  3. Change into the cloned directory:

    cd accessibility-scan-demo-app

  4. Verify the remote points to your fork:

    git remote -v

    You should see your GitHub username in the origin URL.

  5. Fork and clone the workshop repository:

    gh repo fork devopsabcs-engineering/accessibility-scan-workshop --clone

Tip

If you do not have the GitHub CLI installed yet, you will install it in the next exercise. You can also fork via the GitHub web UI and clone manually with git clone.

Exercise 0.2: Install Required Tools

You will install the tools used throughout the workshop.

  1. Node.js 20+ — Download from nodejs.org or install via a package manager:

    # Windows
winget install OpenJS.NodeJS.LTS
    # macOS
brew install node@20

  2. Docker Desktop — Download from docker.com or install via a package manager:

    # Windows
winget install Docker.DockerDesktop

  3. GitHub CLI — Install the gh CLI:

    # Windows
winget install GitHub.cli
    # macOS
brew install gh

  4. Azure CLI — Install az:

    # Windows
winget install Microsoft.AzureCLI
    # macOS
brew install azure-cli

  5. PowerShell 7+ — Install the latest PowerShell:

    # Windows
winget install Microsoft.PowerShell
    # macOS
brew install powershell/tap/powershell

  6. Charm freeze — Install the terminal screenshot tool:

    # Windows
winget install charmbracelet.freeze
    # macOS
brew install charmbracelet/tap/freeze

Tip

On Windows, run these commands in an elevated PowerShell terminal. Restart your terminal after installation so the tools are available on your PATH.

Exercise 0.3: Verify Tool Versions

You will run version checks to confirm every tool is installed correctly.

  1. Node.js:

    node --version

    Expected output: v20.x.x or higher.

    Node.js version output

  2. Docker:

    docker --version

    Expected output: Docker version 2x.x.x or higher.

    Docker version output

  3. GitHub CLI:

    gh --version

    GitHub CLI version output

  4. Azure CLI:

    az --version

    Azure CLI version output

  5. PowerShell:

    $PSVersionTable.PSVersion

    Expected output: 7.x.x or higher.

    PowerShell version output

  6. Charm freeze:

    freeze --version

    Charm freeze version output

Caution

If any tool fails the version check, resolve the installation issue before proceeding. Later labs depend on all tools being available.

Exercise 0.4: Install Scanner Dependencies

You will install the Node.js dependencies and Playwright browser required by the scanner.

  1. Navigate to the scanner repository root:

    cd accessibility-scan-demo-app

  2. Install Node.js dependencies:

    npm install

  3. Install the Playwright Chromium browser:

    npx playwright install --with-deps chromium

Note

The Playwright browser download is approximately 150 MB. This browser is used by the scanner to render pages and run accessibility checks.

Exercise 0.5: Start the Scanner Locally

You will start the accessibility scanner and verify it is running.

  1. Start the scanner using the local start script:

    ./start-local.ps1

    The script starts the Next.js development server on port 3000.

  2. Open your browser and navigate to:

    http://localhost:3000

  3. Verify the scanner home page loads with the scan form visible.

    Scanner home page

  4. Leave the scanner running for use in subsequent labs.

Tip

If port 3000 is already in use, stop the conflicting process or run ./stop-local.ps1 first. You can also start the scanner with Docker using ./start-local.ps1 -Mode docker.

Verification Checkpoint

Before proceeding, verify:

  • Repository forked and cloned locally
  • All 6 tools installed and returning version output (Node.js, Docker, gh, az, pwsh, freeze)
  • npm install completed without errors
  • Playwright Chromium browser installed
  • Scanner running at http://localhost:3000

Next Steps

Proceed to Lab 01: Explore the Demo Apps and WCAG Violations.