About This Demo

This page demonstrates progressive accessibility patterns that serve both human users (with screen readers, keyboard navigation) and AI agents (understanding content structure).

Try navigating with:

  • Tab - Move through interactive elements
  • Enter/Space - Activate buttons and links
  • Screen reader - VoiceOver (Mac), NVDA (Windows), or Orca (Linux)

Level 1: Foundational Patterns

Hidden until focused, allows keyboard users to bypass repetitive content.

Try it: Press Tab when you first load the page

HTML Structure: <a href="#main-content" class="skip-link">Skip to main content</a>
Screen reader announces: "Skip to main content, link"

Semantic Landmarks

HTML5 elements with ARIA roles create navigable page structure.

<header role="banner">

Site identity and navigation

<main role="main">

Primary page content

<footer role="contentinfo">

Site-wide footer information

Screen reader navigation: VoiceOver: Ctrl+Option+U → Landmarks menu

Focus Visibility

All interactive elements show clear focus indicators.

Link
CSS Pattern: :focus-visible { outline: 2px solid #4a7c4e; outline-offset: 2px; }

Level 2: Component Patterns

Clickable Cards

Cards that act as links need proper keyboard access and ARIA labels.

DIGITAL

Technology as Liberation

ORGANIZATION

Cooperative Structures

NETWORK

Distributed Systems

Key attributes: role="link" tabindex="0" aria-label="Full context"
Screen reader announces: "DIGITAL pillar - Technology as Liberation, link"

Semantic Timeline

Lists with proper semantics for screen readers and AI.

Q1 2026

Technical Infrastructure

K3s cluster, GitOps, monitoring

Q2 2026

AI Portal Agent

Conversational interface for ecosystem

Q3 2026

Partner Network

First 10 cooperative partners

Screen reader announces: "Project milestones, list, 3 items"

Live Regions (ARIA Live)

Dynamic content that screen readers announce automatically.

Waiting for announcement...
HTML Pattern: <div role="status" aria-live="polite" aria-atomic="true">

Level 3: Motion & Preferences

Reduced Motion Support

Respects user's motion preferences via CSS media query.

Animated Element

CSS Pattern: @media (prefers-reduced-motion: reduce) { animation: none !important; }

Try it: Enable "Reduce Motion" in your OS settings, or use the toggle button above to simulate.

Color Contrast (WCAG AA)

All text meets WCAG AA contrast requirements (4.5:1 minimum).

Primary Text
14.5:1 (AAA)
Secondary Text
8.2:1 (AAA)
Links
4.8:1 (AA)
WCAG Requirements: AA: 4.5:1 normal text, 3:1 large text | AAA: 7:1 normal text, 4.5:1 large

Level 4: AI-Ready Features

Semantic HTML as API

Machine-readable structure enables both screen readers and AI agents.

HTML Layer <article aria-labelledby="title">
Screen Reader Understanding "Article, Documentation Guide"
AI Understanding { "type": "article", "topic": "documentation" }
Key Insight: If it's accessible, it's AI-ready. One foundation, multiple capabilities.

Future AI Integration (Q2 2026)

Planned features building on the accessibility foundation.

AI Chat Widget

Conversational interface with aria-live announcements

Command Palette

Ctrl+K natural language queries

Inline Hints

Contextual explanations via data-ia-explain

Testing Checklist

Use this interactive checklist to verify accessibility implementation:

Keyboard Navigation

Screen Reader