Sports.gouv.fr

In the lead-up to the Paris 2024 Olympics, the French government's sports website needed new interactive features — including a live countdown timer module — while meeting strict RGAA (Référentiel Général d'Amélioration de l'Accessibilité) standards, the French transposition of WCAG. The site had to handle massive traffic spikes during the Games, remain fully accessible to all citizens, and comply with government design system guidelines.

Developed a custom Drupal module for the Olympic countdown timer, integrating real-time calculations with server-rendered fallbacks for accessibility. Performed a comprehensive RGAA audit and remediation: semantic HTML restructuring, ARIA landmarks, keyboard navigation, contrast ratios, and screen reader compatibility. Refined the CSS layer for responsive consistency across the government's design tokens. Every component was tested against RGAA criteria levels A and AA.

// Custom Drupal module: Olympic countdown block
function sports_countdown_block_build() {
  $games_start = new \DateTime('2024-07-26T19:30:00',
    new \DateTimeZone('Europe/Paris'));
  $now = new \DateTime('now',
    new \DateTimeZone('Europe/Paris'));
  $interval = $now->diff($games_start);

  return [
    '#theme' => 'sports_countdown',
    '#days' => $interval->days,
    '#hours' => $interval->h,
    '#minutes' => $interval->i,
    '#attached' => [
      'library' => ['sports_countdown/timer'],
    ],
    '#cache' => ['max-age' => 60],
  ];
}