Le problème : informer l’utilisateur de l’ouverture d’un nouvel onglet
Lorsqu’un lien s’ouvre dans un nouvel onglet (target="_blank"), le critère 13.2 du RGAA exige d’informer l’utilisateur de ce comportement. Sans cette indication, les utilisateurs de technologies d’assistance peuvent être désorientés par ce changement de contexte inattendu.
Exemple de lien non conforme
<!-- ❌ Non conforme RGAA -->
<a href="https://example.com" target="_blank" rel="noreferrer noopener">
Voir le site officiel
</a>Exemple de lien conforme
<!-- ✅ Conforme RGAA -->
<a href="https://example.com" target="_blank" rel="noreferrer noopener"
title="Voir le site officiel (nouvel onglet)">
Voir le site officiel
</a>La solution manuelle : fastidieuse et source d’oublis
Traditionnellement, il faut :
- Créer le lien dans Gutenberg
- Passer en mode HTML
- Ajouter manuellement l’attribut
title - Répéter pour chaque lien…
Cette approche est chronophage et source d’erreurs, surtout sur des sites avec de nombreux liens externes.
Solution automatique avec PHP : le code qui fait tout
Code à ajouter dans functions.php
// Ajouter automatiquement l'indication "nouvel onglet" aux liens externes
function add_external_link_notice($content) {
$content = preg_replace_callback(
'/<a\s+([^>]*target=["\']_blank["\'][^>]*)>(.*?)<\/a>/is',
function($matches) {
$all_attributes = $matches[1];
$link_content = $matches[2]; // Contenu complet du lien (avec HTML)
// Extraire le texte sans les balises pour le title
$link_text = strip_tags($link_content);
$link_text = trim($link_text);
// Vérifier si title existe déjà
if (!preg_match('/title\s*=\s*["\'][^"\']*["\']/', $all_attributes)) {
// Ajouter le title
$all_attributes .= ' title="' . esc_attr($link_text) . ' (nouvel onglet)"';
} else {
// Modifier le title existant pour éviter les doublons
if (strpos($all_attributes, '(nouvel onglet)') === false) {
$all_attributes = preg_replace(
'/title\s*=\s*["\']([^"\']*)["\']/',
'title="$1 (nouvel onglet)"',
$all_attributes
);
}
}
return '<a ' . $all_attributes . '>' . $link_content . '</a>';
},
$content
);
return $content;
}
add_filter('the_content', 'add_external_link_notice', 999);Ce que fait ce code
- Détecte automatiquement tous les liens avec
target="_blank" - Extrait le texte du lien pour créer un titre pertinent
- Ajoute l’attribut
titleavec l’indication « (nouvel onglet) » - Évite les doublons si un
titleexiste déjà - S’applique à tout le contenu automatiquement
Alternative JavaScript pour plus de flexibilité
Si vous préférez une approche côté client :
// À ajouter dans votre thème
document.addEventListener('DOMContentLoaded', function() {
const externalLinks = document.querySelectorAll('a[target="_blank"]');
externalLinks.forEach(link => {
const linkText = link.textContent.trim();
const currentTitle = link.getAttribute('title') || '';
// Ajouter l'indication si elle n'existe pas déjà
if (!currentTitle) {
link.setAttribute('title', linkText + ' (nouvel onglet)');
} else if (!currentTitle.includes('nouvel onglet')) {
link.setAttribute('title', currentTitle + ' (nouvel onglet)');
}
});
});Cas particuliers à gérer
Liens dans les menus WordPress
Pour appliquer la fonction aux menus de navigation :
// Étendre aux menus WordPress
add_filter('wp_nav_menu', 'add_external_link_notice', 999);Liens dans les widgets
Pour couvrir les widgets texte :
// Étendre aux widgets
add_filter('widget_text', 'add_external_link_notice', 999);Personnaliser le texte d’indication
// Version avec texte personnalisable
function add_external_link_notice($content) {
$notice_text = ' (nouvelle fenêtre)'; // Modifiable ici
$content = preg_replace_callback(
'/<a\s+([^>]*target=["\']_blank["\'][^>]*)>([^<]*)<\/a>/i',
function($matches) use ($notice_text) {
$all_attributes = $matches[1];
$link_text = trim($matches[2]);
if (!preg_match('/title\s*=\s*["\'][^"\']*["\']/', $all_attributes)) {
$all_attributes .= ' title="' . esc_attr($link_text . $notice_text) . '"';
}
return '<a ' . $all_attributes . '>' . $link_text . '</a>';
},
$content
);
return $content;
}Vérification de la conformité
Votre lien final devrait ressembler à :
<a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1"
target="_blank"
rel="noreferrer noopener"
title="RGAA – Critère 6.1 (nouvel onglet)">
RGAA – Critère 6.1
</a>Points de validation RGAA
- Critère 6.1 : Intitulé du lien explicite
- Critère 6.2 : Titre de lien pertinent
- Critère 13.2 : Information sur l’ouverture de nouvelle fenêtre
Pourquoi éviter les indications visuelles CSS
Il peut être tentant d’ajouter une indication visuelle avec des pseudo-éléments CSS :
/* ❌ NON CONFORME RGAA */
a[target="_blank"]::after {
content: " ↗";
}Cette approche est interdite par le RGAA car elle constitue une non-conformité au critère 1.3.1 des WCAG 2.1. Les contenus générés en CSS via ::before et ::after ne doivent pas être utilisés pour véhiculer de l’information.
Solutions conformes pour l’indication visuelle
Si vous souhaitez absolument une indication visuelle, utilisez du HTML :
<a href="..." target="_blank" title="RGAA – Critère 1.9 (nouvel onglet)">
RGAA – Critère 1.9 <span class="sr-only">(nouvel onglet)</span>
</a>Avec le CSS correspondant :
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Avantages de cette approche
- Automatique : plus besoin de modifier manuellement le HTML
- Rétroactif : fonctionne sur les contenus existants
- Maintenable : une seule fonction à gérer
- Conforme : respecte le RGAA 4.1
- Ciblé : ne modifie que les liens concernés
Conclusion
Cette solution automatise un aspect fastidieux de la conformité RGAA tout en améliorant l’expérience utilisateur. Fini les oublis de title sur les liens externes !
L’approche PHP est recommandée pour sa robustesse, mais l’alternative JavaScript offre plus de flexibilité pour des besoins spécifiques.
Important : l’attribut title seul suffit parfaitement pour la conformité RGAA. Les indications visuelles ne sont pas obligatoires et doivent respecter les règles strictes du référentiel si elles sont ajoutées.
