Sports.gouv.fr

Drupal 开发人员 & 无障碍专家—2024

客户

体育部 — 法国政府

角色

Drupal 开发人员 & 无障碍专家

技术栈

Drupal, PHP, Twig, CSS, JavaScript, RGAA/WCAG

日期

2024

挑战

在 2024 年巴黎奥运会前夕，法国政府的体育网站需要新的互动功能——包括实时倒计时模块——同时也必须符合严格的 RGAA（一般无障碍改进参考标准，即 WCAG 的法国版本）标准。该网站必须能够应对奥运期间的巨大流量峰值，对所有公民保持完全无障碍，并符合政府设计系统的准则。

解决方案

开发了一个自定义 Drupal 模块用于奥运倒计时，集成了实时计算和服务器端回退以确保无障碍访问。进行了全面的 RGAA 审计和修复：语义 HTML 重构、ARIA 地标、键盘导航、对比度和屏幕阅读器兼容性。根据政府的设计令牌优化了 CSS 层以实现响应式一致性。每个组件都经过了 RGAA A 级和 AA 级标准的测试。

php

// 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],
  ];
}

↳ 服务器端渲染的倒计时，配合客户端 hydration 实现无障碍访问

下一个项目

2R2T

电竞平台 / 算法