Final Polish · Accessibility

Building for Everyone

What I Did

Ran a full Lighthouse accessibility audit on every page, then systematically fixed every issue it flagged. Also ran manual keyboard navigation tests and used a screen reader (VoiceOver on macOS) to hear how the site sounded. The experience was humbling.

What I Fixed

Added aria-label to all icon-only links (social icons in the footer).
Added aria-current="page" to the active nav link via JavaScript.
Added aria-live="polite" to announce completed words in the typing animation (not every character).
Fixed colour contrast on muted text — raised from #666 to #7a7aa8 to pass WCAG AA.
Added visible :focus-visible rings to all interactive elements.
Added a skip link ("Skip to main content") at the top of every page.
Ensured all form inputs had associated <label> elements (not just placeholders).
Added alt text to all book cover images; fallback covers use role="img" aria-label="...".

Code highlight — focus-visible ring and skip link

/* Visible keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link — visible on focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent-purple);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

Challenge & Fix

Problem: The typing animation was being announced by VoiceOver on every character change, creating a stream of noise for screen reader users.

Fix: Hidden the typing display from assistive technology with aria-hidden="true", and added a visually-hidden aria-live="polite" region that only announces the complete word once typing finishes. Screen readers hear "Web Developer" once, not 12 individual characters.

Before & After — Lighthouse Scores

Before (Week 1)

After (Week 5)

Skills Gained

WCAG 2.1 AA ARIA attributes Keyboard navigation Colour contrast Focus management Screen reader testing Lighthouse