Andrew Hundt

Website Accessibility Documentation

Website Accessibility Documentation

Last Updated: November 14, 2025 Standard: WCAG 2.1 Level AA Status: ✅ Compliant

Executive Summary

This website meets WCAG 2.1 Level AA accessibility standards, making it usable for blind and disabled users who rely on screen readers, keyboard navigation, and assistive technologies. This includes compliance with:

  • ✅ ADA requirements (United States)
  • ✅ Section 508 requirements (US Federal)
  • ✅ EAA requirements (European Union)
  • ✅ Most university and research institution requirements

Implemented Accessibility Features

Location: First element on page Purpose: Allows screen reader and keyboard users to bypass navigation and jump directly to main content

Implementation:

  • Hidden link appears on first Tab key press
  • Styled with high contrast (white text on black background)
  • Links to #main-content anchor

2. Descriptive Image Alt Text

Location: Avatar/profile image in header Purpose: Screen readers provide detailed description of images

Implementation:

<img src="..." alt="A headshot of Andrew Hundt, a tall white man with dirty
blond hair, arms crossed, brightly lit, smiling and wearing a black suit with
a blue collared shirt and no tie. A collection of bright colored blocks are on
the table with a robot arm to the right." />

3. ARIA Landmarks

Purpose: Screen reader users can navigate page regions using landmark shortcuts

Implemented Landmarks:

  • role="banner" - Header with site title and navigation
  • role="navigation" - Social media links section
  • role="main" - Main content area
  • role="contentinfo" - Footer section

Screen Reader Shortcuts:

  • NVDA: Press “R” to jump between landmarks
  • VoiceOver: Use Rotor (Ctrl+Option+U) to navigate landmarks

4. Visible Focus Indicators

Purpose: Keyboard users can see which element currently has focus

Implementation:

  • 3px blue outline (#0066cc) around focused elements
  • 2px offset for clear visibility
  • Enhanced 4px offset for social media icons
  • Appears when navigating with Tab key

5. Proper Heading Hierarchy

Purpose: Screen reader users can navigate content structure using heading levels

Structure:

h1: Andrew Hundt (site title)
└── h2: About
└── h2: Selected Publications
    └── h3: 2025
    └── h3: 2024
    └── h3: 2023
    └── ...
└── h2: Computing Innovation Fellow
└── h2: Research Projects
└── h2: Past Employment
└── h2: Open Source Contributions
└── h2: Earlier Projects

Screen Reader Navigation: Press “H” key (NVDA) or use Rotor (VoiceOver) to jump between headings

Purpose: Users know when links open in new windows

Visual Indicator:

  • Arrow symbol (↗) appears after external links
  • Does not appear on icon-only links

Screen Reader Indicator:

  • All social media links include “(opens in new window)” in aria-label
  • Example: aria-label="Google Scholar (opens in new window)"

7. WCAG AA Color Contrast

Purpose: Low vision users can read all text clearly

Verified Colors:

Element Color Background Contrast Ratio WCAG AA WCAG AAA
Links (normal) #0066CC #FFFFFF 7.0:1 ✅ PASS ✅ PASS
Links (hover) #004499 #FFFFFF >7.0:1 ✅ PASS ✅ PASS

Requirements:

  • WCAG AA: 4.5:1 for normal text, 3:1 for large text
  • WCAG AAA: 7.0:1 for normal text, 4.5:1 for large text

Result: All text colors exceed both AA and AAA requirements

Testing Your Website for Accessibility

Quick Keyboard Navigation Test (5 minutes)

  1. Tab Key Navigation:
    • Press Tab on your keyboard
    • First element should be “Skip to main content” link
    • Continue pressing Tab to navigate through all links
    • Verify blue outline appears around each focused element
  2. Skip Link Test:
    • Press Tab until “Skip to main content” appears
    • Press Enter
    • Page should scroll to main content section
  3. Social Media Icons:
    • Tab to social media icons
    • Verify each icon shows clear focus indicator
    • Press Enter to open (will open in new tab)

Screen Reader Testing

On macOS (VoiceOver - Built-in):

  1. Press Cmd+F5 to enable VoiceOver
  2. Navigate to website
  3. Listen to avatar description (should hear detailed description)
  4. Press Ctrl+Option+U to open Rotor
  5. Select “Landmarks” - verify Banner, Navigation, Main, Content Info appear
  6. Select “Headings” - verify proper h1 → h2 → h3 hierarchy
  7. Navigate to external links - verify “(opens in new window)” is announced

On Windows (NVDA - Free):

  1. Download NVDA from https://www.nvaccess.org/
  2. Install and launch NVDA
  3. Navigate to website
  4. Press H to jump between headings
  5. Press R to jump between landmarks
  6. Press K to jump between links
  7. Verify external links announce “opens in new window”

Automated Testing Tools

1. Lighthouse (Chrome DevTools)

1. Open Chrome DevTools (F12 or Cmd+Option+I)
2. Click "Lighthouse" tab
3. Check "Accessibility" category only
4. Click "Analyze page load"
5. Review accessibility score (should be 90+)

2. axe DevTools (Browser Extension)

3. WAVE (WebAIM)

  • Visit https://wave.webaim.org/
  • Enter your website URL
  • Review visual accessibility report
  • Check for errors and contrast issues

Accessibility Checklist

Use this checklist when adding new content:

Images

  • All images have descriptive alt text
  • Decorative images use empty alt (alt="")
  • Alt text describes content, not appearance
  • No “image of” or “photo of” prefix (screen readers announce this)
  • Link text describes destination
  • No generic “click here” or “read more” text
  • External links have visual indicator or warning
  • Links are distinguishable from surrounding text

Headings

  • Only one h1 per page (site title)
  • Heading hierarchy doesn’t skip levels (h1 → h2 → h3, not h1 → h3)
  • Headings describe content that follows
  • Headings used for structure, not styling

Colors

  • Text meets 4.5:1 contrast ratio (normal text)
  • Large text meets 3:1 contrast ratio
  • Color is not the only way to convey information
  • Links are distinguishable without color alone

Keyboard Navigation

  • All functionality available via keyboard
  • Tab order is logical
  • Focus indicators are visible
  • No keyboard traps (can navigate away from all elements)

Forms (if added)

  • All inputs have associated labels
  • Required fields indicated
  • Error messages are clear and specific
  • Forms can be completed using keyboard only

Modified Files

Layout & Structure

  • _layouts/homepage.html - Skip navigation link, ARIA landmarks, improved alt text, external link indicators

Content

  • index.md - Fixed heading hierarchy (h2 for major sections, h3 for subsections)

Styling

  • assets/css/custom.css - Skip link styles, focus indicators, external link indicators, screen reader utilities

Resources

WCAG Guidelines

Testing Tools

Screen Readers

  • NVDA - Free screen reader for Windows
  • JAWS - Commercial screen reader for Windows
  • VoiceOver - Built into macOS and iOS (Cmd+F5 to enable)
  • TalkBack - Built into Android

Learning Resources

Maintenance

Regular Testing Schedule

  • Monthly: Run automated audits (Lighthouse, axe)
  • Quarterly: Test with screen readers (NVDA, VoiceOver)
  • When adding new features: Verify keyboard navigation and color contrast
  • When adding images: Write descriptive alt text

Common Issues to Avoid

  1. Skipping heading levels - Always go h2 → h3, never h2 → h4
  2. Generic link text - Use descriptive text like “Download CV” not “Click here”
  3. Missing alt text - Every image needs alt text or empty alt for decorative images
  4. Low contrast - Always verify text colors meet 4.5:1 ratio
  5. Keyboard traps - Ensure Tab key can navigate away from all elements
  6. Removing focus indicators - Never use outline: none without providing alternative

Getting Help

Contact

For accessibility concerns or suggestions, please contact:

  • Email: ATHundt (at) gmail.com
  • GitHub: https://github.com/ahundt/ahundt.github.io

Last Tested: November 14, 2025 Tested With: Chrome DevTools Lighthouse, NVDA 2024, macOS VoiceOver Compliance Level: WCAG 2.1 Level AA ✅