a11y-ws

readme.md

Nebraska.code a11y workshop

This is a copy of important code snippets from the outline

Y'all ready for this?

git clone https://github.com/AustinGil/accessiblitz.git && cd accessiblitz/react && npm install

• Cypress users: npx cypress verify
• Playwright users: npx playwright install --with-deps
• Download NVDA
• Windows WSL users? See me. Download VcXsrv

Audit your own website

• Lighthouse scores -- DevTools > Lighthouse > Accessibility -- experte
• Inspect Accessibility Tree: DevTools > Elements > Accessibility
• HTML_CodeSniffer

Practice Awareness

• Physical
  • Unplug mouse / cover up track pad
  • Use your off hand
• Visual
  • Chrome DevTools > Kebab > More Tools > Rendering > Emulate vision deficiencies more info
  • Web Disability Simulator
  • Color Oracle
• Technology
  • DevTools > Network > Slow 3G
  • Disable Javascript
  • Personas

Keyboard navigation & screen readers

• Download NVDA
  • Preferences > Settings > Vision > Enable Visual Highlighting
• Learn Keyboard Shortcuts
• Learn HOW to test

Write accessible components (tips & patterns) - Let's Code!

npm run dev

Open http://localhost:3000

• Img (alt text)

• Button (empty links & buttons)

• Radio + Checkbox (tab + focus)

• Input (labels)

• SVG (labels)

• Dialog

• Datepicker

• Searchbox (tab ordering)

• Element with text/heading (document order)

• Semantic headings vs size

• Layouts (skip links)

• Card list (links)

• Prevent invalid HTML? (eg. Buttons containing divs)

• Styling with semantics (attr)

• reduced-motion

• @supports

Spot mistakes sooner

• axe linter
• Web Hint

Viewing dev/staging UI

npm i -D a11y.css

if (import.meta.env.DEV) {
  import('a11y.css/css/a11y-en.css')
}

As a CLI (Linter)

npm init @eslint/config && /
npm i -D eslint eslint-plugin-react eslint-plugin-jsx-a11y

{
  "plugins": ["react", "jsx-a11y"],
  "extends": [
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect",
    }
  },
}

As a CLI (Static Analysis)

touch tsconfig.json && npm i -D typescript

{
  "include": [
    "src/main.jsx"
  ],
  "compilerOptions": {
    "checkJs": true,
    "allowJs": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "esModuleInterop": true,
  },
}

As a CLI (Tests)

Cypress

npm i -D cypress cypress-axe

import 'cypress-axe'

describe('homepage', () => {
  it('passes axe', () => {
    cy.visit('http://localhost:5173/')
    cy.injectAxe()
    cy.checkA11y()
  })
})

Playwright

npm init playwright@latest && /
npm i -D @playwright/test @axe-core/playwright

import { test, expect } from '@playwright/test';
import { AxeBuilder } from '@axe-core/playwright';

test.describe('homepage', () => {
  test('passes axe', async ({ page }) => {
    await page.goto('http://localhost:5173/');
    const axe = new AxeBuilder({ page })
    const { violations } = await axe.analyze();
    expect(violations).toEqual([])
  });
})

Automated Checking Pipeline

• Git Hooks: Lefthook
• PR Review: Accesslint
• CI/CD: GitHub Actions