Support

How can we help you?

Get answers to all your Stark-related questions with
step-by-step guides from our Support center.

Using the GitHub Integration

Learn how to spin up an accessibility scan within GitHub


With Stark's GitHub integration, you can kick off an accessibility scan right from GitHub. To keep your work secure, no code is sent to our servers — it all happens right within GitHub! 


Using the GitHub Integration

📝
Each report is categorized based on the WCAG success criteria just the way you’re used to from the WCAG audit tool in the Stark browser extensions.

To get started:

Begin by creating a GitHub workflow file at .github/workflows/starkflow.yml. Using the right file path and name is important, otherwise Stark won't be able to scan your repository.

Next, use the following template for your workflow, updating the appropriate values as indicated:

name: Stark Web Audit
run-name: ${{ github.event.inputs.display-title }}

on:
  workflow_dispatch:
    inputs:
      # Used to send this scan's results back to Stark.
      token:
        description: 'Stark token'
        required: true
      # Allows Stark to identify this scan.
      display-title:
        description: 'Display title'
        required: true

jobs:
  accessibility-audit:
    runs-on: ubuntu-latest

    name: Accessibility Audit
    steps:
      - name: Checkout code
        id: code-checkout
        uses: actions/checkout@v3

      - name: Audit
        id: stark
        uses: stark-contrast/accessibility-check-action@1.3.0
        with:
          # [Optional; only required when used with Stark Projects]
          # The token used by the action to send an audit report back to Stark.
          token: ${{ github.event.inputs.token }}

          # [Optional] Shell commands for setting up the container.
          # You can use this to install tools, export variables, etc.
          # Example: 'nvm install 16 && nvm use 16'
          setup: ''

          # [Optional] Shell comamnds to run before the app is built.
          # Run any prebuild steps, cd into subdirectories, etc.
          prebuild: ''

          # [Optional] Shell commands for building your app.
          # Example: 'npm run build'
          build: ''

          # [Optional] Shell commands for serving your app.
          # This command is slightly different from the others: it runs in a long-lived,
          # detached process that is only terminated when the scan finishes and our action stops.
          # Example: 'SERVER_PORT=3000 && npm run serve'
          serve: ''

          # [Optional] The number of milliseconds to wait before your app is ready.
          # Defaults to 5000 milliseconds.
          wait_time: 5000

          # [Required] A list of URLs to be scanned, with each URL belonging to its own line. This value follows YAML conventions for multiline strings.
          # Example:
          #     urls:|-
          #          http://localhost:3000
          #          http://localhost:3000/about
          #          http://localhost:3000/help
          # OR
          #     urls:'
          #          http://localhost:3000
          #
          #          http://localhost:3000/about
          #
          #          http://localhost:3000/help
          #          '
          urls: ''

          # [Optional] If a url scan failed, scans the next one without failing the action.
          # Defaults to false
          skip_errors: false

          # [Optional] Adds a delay before running the scan. This is different from the timeout and delay in the sense that this delay occurs after the page is navigated to.
          # Defaults to 100
          scan_delay: 500

          # [Optional] Shell commands to run after the action finishes a scan.
          # Use this to run any cleanup commands.
          cleanup: ''

          # [Optional] Browser viewport [width]x[height].
          # Use this to specify a browser window size for your scan.
          # Defaults to 800x600
          viewport: '800x600'

          # [Optional] Set to `true` if your URL uses basic HTTP authentication. When true, you must also provide values for "username" and "password".
          # Defaults to false
          requires_basic_auth: false

          # [Optional] Set to `true` if your URL requires authentication. When true, you must also provide values for "username", "password", "login-page-url", "username-selector", "password-selector", and "submit-button-selector".
          # Defaults to false
          requires_page_auth: false

          # [Optional] Username for basic or page authentication.
          username: ''

          # [Optional] Password for basic or page authentication.
          password: ''

          # [Optional] URL for your login page (usually different than the URL you want to scan). Used with page authentication.
          login_page_url: ''

          # [Optional] Selector (https://playwright.dev/docs/locators#locate-by-css-or-xpath) for the username input on the login page. Used with page authentication.
          username_selector: ''

          # [Optional] Selector (https://playwright.dev/docs/locators#locate-by-css-or-xpath) for the password input on the login page. Used with page authentication.
          password_selector: ''

          # [Optional] Selector (https://playwright.dev/docs/locators#locate-by-css-or-xpath) for the submit button on the login page. Used with page authentication.
          submit_button_selector: ''

The Stark action offers convenient arguments for building and serving your repository. For most builds, the key arguments you’ll need to configure are buildserve, and urls. At a minimum, you’ll want to configure urls and wait_time.

To get results flowing up to Stark:

  1. Log into your Stark account
  2. Click Create a Project
  3. Scroll to Add GitHub Repository and follow the instructions shown to install Stark’s GitHub app
  4. Select which repository you want Stark to scan for accessibility issues. Be sure that you've followed the steps for creating the GitHub action in your repo otherwise, nothing will show up.
  5. You can now run your first scan! 🎉

Have any questions about using Stark's developer tools? Don’t hesitate to reach out to us at support@getstark.co.

Go back to articles