Le service de diagnostic d'accessibilité supporte désormais les certificats et rapports en PDF !

Le service de diagnostic d'accessibilité de Liberogic proposait auparavant les certificats et rapports au format HTML, mais en réponse à vos demandes pour obtenir des certificats en PDF, nous pouvons désormais émettre des certificats et rapports en format PDF!

Certificat de conformité d'accessibilité web en PDF

Rapport de conformité d'accessibilité en PDF (VPAT / ACR)

Pour mettre en œuvre cette solution, nous avons construit un système qui génère automatiquement des PDF en même temps que la sortie HTML dans le processus de compilation.

🛠️ Fondations de la conversion PDF : Puppeteer et configuration de l'environnement

Comme outil de génération de PDF, nous avons adopté Puppeteer, qui permet de contrôler le navigateur Chromium en mode headless. Puisque le HTML était déjà construit avec Astro, l'intégration de Puppeteer s'est déroulée relativement sans problème.

1. Assurer un environnement de rendu via un serveur local

Puppeteer utilise la fonction d'impression de Chromium, mais charger directement des fichiers HTML locaux (file://) provoque un problème de mise en page cassée.

Pour contourner ce problème, j'ai mis en place l'environnement suivant.

Serveur Web temporaire : Après la compilation, j'ai lancé un serveur Web local temporaire (http-server) hébergeant le répertoire dist en tant que processus enfant de Node.js.
Environnement stable : En donnant à Puppeteer accès au serveur via http://localhost:8080, j'ai assuré un environnement de rendu stable et identique à celui du navigateur.

Code de configuration de l'environnement et de démarrage du serveur (extrait)

// プロジェクト定数からドメインを取得し、未設定なら localhost:8080 を使用
const HOST_DOMAIN = SITE_URL || `http://localhost:${PORT}`; 
const BUILD_ROOT = path.join(__dirname, 'dist');
const PORT = 8080;

// --- サーバーの起動ロジック ---
let serverProcess = exec(`npx http-server ${BUILD_ROOT} -p ${PORT} -s --silent`);

// サーバーが起動するまで待機
await new Promise((resolve) => setTimeout(resolve, 2000));

// --- Puppeteerのページアクセス ---
// Puppeteerは localhost:8080 にアクセスし、レンダリングを開始します
const serverUrl = `http://localhost:${PORT}/${REPORT_DIR}/${urlPath}`;
await page.goto(serverUrl, { waitUntil: 'networkidle0' });

2. Application des polices japonaises

L'environnement serveur local pour la génération PDF ne dispose pas de polices japonaises, ce qui entraîne un problème avec les polices intégrées dans le PDF.

Contournement de la police : Dans le script, j'insère dynamiquement la référence à la police Web et les styles appliqués dans le DOM juste avant la génération du PDF. Cela permet la sortie PDF avec les polices japonaises. Côté HTML, je privilégie la vitesse en n'utilisant pas de polices Web, donc cette insertion dynamique garantit que les polices ne s'appliquent que pour le PDF.

Code d'insertion dynamique des polices (extrait)

// Webフォントの動的挿入ロジック (page.evaluateでブラウザ側で実行)
await page.evaluate((fontUrl) => {
    // <link>タグを生成してDOMに挿入
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = fontUrl;
    document.head.appendChild(link);
    
    // @media print スタイルを強制的に挿入し、フォントを適用
    const printStyle = document.createElement('style');
    printStyle.textContent = `
      @media print {
        html, body {
          font-family: 'Noto Sans JP', sans-serif !important;
        }
      }
    `;
    document.head.appendChild(printStyle);
}, WEBFONTS_URL);

🚨 Défi majeur : problème de référence d'URL dans les liens PDF

Le plus difficile à résoudre était les liens entre PDF. Les liens intégrés dans le PDF continuaient à faire référence à l'URL de l'environnement de développement local (http://localhost:8080) même après le déploiement. Cela se produit parce que Chromium conserve l'URI de base au moment du chargement du HTML comme point de référence pour les liens PDF.

Forcer les liens en chemins absolus

Pour résoudre ce problème, nous avons réécrits les liens pour les convertir en chemins absolus complets après le déploiement, en suivant les étapes ci-dessous.

Utilisation du domaine de destination du déploiement : Nous récupérons le domaine de destination du déploiement (par exemple https://example.com) à partir de la constante du projet (SITE_URL).
Construction et remplacement des URL absolues : Avec Node.js, nous récupérons le contenu HTML et remplaçons le lien d'origine (/accessibility_report/top/) par une URL complète basée sur le domaine récupéré (par exemple https://example.com/accessibility_report/pdf/acr-top.pdf).
Réapplication au DOM : En réappliquant le HTML modifié à Chromium (via page.setContent()), nous nous assurons que les liens intégrés dans le PDF sont définitivement fixés au domaine de déploiement prévu.

Extrait du code de réécriture des liens

// 1. 無効化したいリンク（.link-ignore-pdf）を物理的に削除
const ignoreLinkRegex = new RegExp(`(<a\\\\s+[^>]*class=["'][^"']*${ignoreClass}[^"']*["'][^>]*>)(.*?)(<\\/a\\\\s*>)`, 'gi');
content = content.replace(ignoreLinkRegex, '$2'); // <a>タグ全体を中身のテキストに置換

// 2. 詳細ページへのリンクを絶対URLに書き換え
const detailLinkRegex = new RegExp(`href="${reportDirRootLink}([^/]+)\\/"`, 'g');
const detailPdfUrl = `${pdfAbsoluteUrl}/acr-top.pdf`; // 例

content = content.replace(detailLinkRegex, (match, slug) => {
    // リンクを <http://localhost>... ではなく、<https://example.com/>... に強制置換
    return `href="${pdfAbsoluteUrl}/acr-${slug}.pdf"`; 
});

// 3. 最終的なコンテンツをブラウザに再適用し、PDF出力へ
await page.setContent(content, { 
    waitUntil: 'domcontentloaded',
    baseURL: baseUrlForContent
});

🎉 Résumé

Bien que cette exigence particulière de créer des liens entre des PDF nous ait posé quelques défis, l'intégration de Puppeteer s'est déroulée sans grande difficulté. Les builds sont rapides, et nous trouvons cet outil extrêmement utile !

Voici les points clés de cette approche :

Garantir la stabilité grâce au rendu via un serveur local
Prise en charge du japonais par injection dynamique de polices web
Chemins absolus pour les liens entre documents PDF

Grâce à la prise en charge du PDF, la commodité de notre service s'est considérablement améliorée. Nous continuerons à poursuivre la qualité de nos services de diagnostic en matière d'accessibilité, qui offrent une réelle valeur à nos clients!