Accessibility Tools

{# themes/mon_theme/templates/a11y-widget.html.twig #}
{# Surcharge du widget complet — bouton trigger personnalisé #}

<div class="a11y-widget mon-theme-a11y">
  <button
    class="a11y-widget-trigger"
    aria-label="{{ 'Accessibilité' | t }}"
    aria-expanded="false"
    aria-controls="a11y-panel"
  >
    {# Icône personnalisée du thème #}
    {{ source('@mon_theme/images/a11y-icon.svg') }}
  </button>

  <div
    id="a11y-panel"
    class="a11y-widget-panel"
    hidden
    role="dialog"
    aria-label="{{ 'Outils d\'accessibilité' | t }}"
  >
    {# Ré-inclure les sections du template parent #}
    {% if plugins.contrast %}...{% endif %}
    {# ... #}
  </div>
</div>

/* themes/mon_theme/css/a11y.css */
/* body.a11y-focusmode — masquer les éléments non essentiels */

body.a11y-focusmode .layout-sidebar-first,
body.a11y-focusmode .layout-sidebar-second,
body.a11y-focusmode .region-footer-top,
body.a11y-focusmode .views-element-container:not(.main-content *),
body.a11y-focusmode [aria-hidden="true"],
body.a11y-focusmode .decorative-image,
body.a11y-focusmode .block-system-breadcrumb-block {
  display: none !important;
}

body.a11y-focusmode .layout-main {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

# Option 1 : héberger js-cookie localement via un module custom
# Télécharger : https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js
# → web/modules/custom/mon_module/js/js.cookie.min.js

# Surcharger la librairie global dans mon_module.libraries.yml :
a11y/global:
  version: override
  css:
    base:
      /modules/contrib/accesstools/plugins/global/global.css: {}
  js:
    js/js.cookie.min.js: {minified: true}

# Option 2 : autoriser jsDelivr dans la CSP (next.config.ts ou nginx)
# script-src 'self' https://cdn.jsdelivr.net;

# Option 3 (Drupal) : ajouter dans settings.php :
$config['system.performance']['js']['preprocess'] = TRUE;
# Et configurer le Content-Security-Policy via le module seckit :
# composer require drupal/seckit

// Console navigateur — vérifier l'état de tous les plugins :
document.cookie.split(';')
  .filter(c => c.trim().startsWith('a11y_'))
  .forEach(c => console.log(c.trim()));

// Résultat attendu (si textspacing et contrast activés) :
// a11y_textspacing=true
// a11y_contrast=true
// a11y_textsize=1.1

// Réinitialiser toutes les préférences accesstools :
document.cookie.split(';')
  .filter(c => c.trim().startsWith('a11y_'))
  .forEach(c => {
    const name = c.trim().split('=')[0];
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
  });