Last Updated: 11/18/2025 - 12:30

For Developers

Upstream Developers are responsible for ensuring all base templates, themes, and custom modules in the UCSB Web Theme upstream comply with WCAG 2.1 Level AA and UCSB accessibility standards. Accessibility must be verified for every new or modified code added to the upstream.

Accessibility Evaluation Sequence

1. Run Automated Accessibility Tests (CI/CD Pipeline)

  • Confirm GitHub Actions workflow runs automatically for the pull request.
  • Review axe Developer Hub and Siteimprove Alfa results in PR comments and Pantheon /test-reports/.
  • Verify there are no critical WCAG 2.1 AA failures before merging.

2. Run Code Linting Checks

  • Execute automated linting for:
    • Twig / PHP: phpcs
    • JS / SCSS / YAML / Markdown: eslint, stylelint
  • Fix any warnings related to ARIA attributes, skip links, or heading structure.
  • Confirm zero linting errors in the PR summary.

3. Manual Keyboard Navigation Test

  • Tab through menus, buttons, modals, and forms.
  • Confirm:
    • Focus is always visible and logical.
    • No keyboard traps.
    • All controls can be activated with Enter or Spacebar.
  • Perform in local or Pantheon Multidev environment.

4. Screen Reader Spot-Check

  • Turn on VoiceOver (macOS) or NVDA (Windows).
  • Verify:
    • Logical reading order.
    • Buttons and form fields have clear labels.
    • ARIA landmarks (main, nav, footer) are announced correctly.

5. Color & Contrast Verification

  • Test key elements for sufficient contrast:
    • Text ≥ 4.5 : 1
    • Large text / UI elements ≥ 3 : 1
  • Use TPGi CCA or Stark Plugin.
  • Confirm focus states meet contrast ratio.

6. Responsive Zoom / Reflow Check

  • Zoom page to 200 % and 400 %.
  • Confirm:
    • No horizontal scrolling (except data tables).
    • All navigation and modals remain visible and functional.
  • Test in Chrome DevTools → Device Toolbar.

7. Document and Verify Results

  • Attach or link CI/CD and manual verification notes in the PR.
  • Mark accessibility status as ✅ Passed before merge.
  • Update release notes if fixes were made.

Quick Reference Summary

  • Run automated tests first, then manual verification.
  • Every new or modified upstream code must pass both before merge.
Step Type Tools / Platform When to Run
1 Automated CI/CD Tests
  • GitHub Actions
  • axe Developer Hub
  • Siteimprove Alfa
Each PR or code update
2 Code Linting
  • PHPCS
  • ESLint
  • Stylelint
Each commit
3 Keyboard Navigation Native keyboard test Each new layout or feature
4 Screen Reader Check
  • VoiceOver
  • NVDA
Each template or module change
5 Color & Contrast
  • TPGi CCA
  • Stark Plugin
When visual changes are made
6 Responsive Zoom Chrome DevTools Every major UI update
7 Verification & Documentation
  • PR notes
  • Pantheon reports
Before merge approval