<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ressources tips et quick wins pour l'accessibilité web">
<meta property="og:title" content="A11y Resources - Accessibilité Web Professionnelle">
<meta property="og:description" content="Votre ressource complète pour créer des sites web accessibles et performants">
<meta property="og:type" content="website">
<meta property="og:url" content="https://a11y-resources.com">
<meta property="og:image" content="https://a11y-resources.com/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A11y Resources - Accessibilité Web">
<meta name="twitter:description" content="Guides et outils pour un web accessible">
<title>Accessibilité Web tips et quick wins</title>
<link rel="alternate" hreflang="en-GB" href="https://a11y-resources.com/en/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<style>
:root {
--bg-light: #ffffff;
--surface-light: #f8f9fa;
--text-light: #1a1a1a;
--text-secondary-light: #4a5568;
--bg-dark: #0f1419;
--surface-dark: #1a202c;
--text-dark: #e8eaed;
--text-secondary-dark: #a0aec0;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--secondary: #8b5cf6;
--accent: #f59e0b;
--success: #10b981;
--error: #ef4444;
--focus-ring: 3px solid #3b82f6;
--focus-offset: 2px;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--border-radius-sm: 0.375rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: var(--bg-dark);
--surface-color: var(--surface-dark);
--text-color: var(--text-dark);
--text-secondary: var(--text-secondary-dark);
}
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: var(--bg-light);
--surface-color: var(--surface-light);
--text-color: var(--text-light);
--text-secondary: var(--text-secondary-light);
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
font-size: 1rem;
transition: background var(--transition-slow), color var(--transition-slow);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Skip link - WCAG 2.4.1 */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary);
color: white;
padding: var(--spacing-md) var(--spacing-lg);
text-decoration: none;
font-weight: 600;
z-index: 100;
border-radius: 0 0 var(--border-radius-md) 0;
}
.skip-link:focus {
top: 0;
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--spacing-xl);
}
}
/* Header */
header {
padding: var(--spacing-lg) 0;
background: var(--bg-color);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--shadow-md);
border-bottom: 2px solid var(--primary);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.logo {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.logo:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
border-radius: var(--border-radius-sm);
}
.nav-menu {
display: none;
flex-direction: column;
gap: var(--spacing-sm);
width: 100%;
padding: var(--spacing-lg) 0;
}
.nav-menu.active {
display: flex;
}
@media (min-width: 768px) {
.nav-menu {
display: flex;
flex-direction: row;
width: auto;
padding: 0;
align-items: center;
}
}
.nav-menu a {
text-decoration: none;
color: var(--text-color);
font-weight: 600;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-md);
transition: background var(--transition-fast), color var(--transition-fast);
display: block;
/* Touch target size minimum 44x44px - WCAG 2.5.5 */
min-height: 44px;
display: flex;
align-items: center;
}
.nav-menu a:hover {
background: var(--primary);
color: white;
}
.nav-menu a:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
.burger {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
padding: var(--spacing-md);
background: transparent;
border: 2px solid var(--primary);
border-radius: var(--border-radius-md);
color: var(--primary);
/* Touch target size - WCAG 2.5.5 */
min-width: 44px;
min-height: 44px;
transition: background var(--transition-fast), color var(--transition-fast);
}
.burger:hover {
background: var(--primary);
color: white;
}
.burger:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
@media (min-width: 768px) {
.burger {
display: none;
}
}
.theme-toggle {
background: var(--secondary);
color: white;
border: none;
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-xl);
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
gap: var(--spacing-sm);
/* Touch target size - WCAG 2.5.5 */
min-height: 44px;
transition: transform var(--transition-fast), background var(--transition-fast);
}
.theme-toggle:hover {
transform: scale(1.05);
background: var(--primary);
}
.theme-toggle:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
.lang-switcher {
display: flex;
gap: var(--spacing-sm);
margin: var(--spacing-lg) 0;
flex-wrap: wrap;
}
.lang-switcher a {
padding: var(--spacing-md) var(--spacing-lg);
text-decoration: none;
color: var(--text-color);
border: 2px solid var(--primary);
border-radius: var(--border-radius-md);
font-weight: 600;
/* Touch target size - WCAG 2.5.5 */
min-height: 44px;
display: flex;
align-items: center;
transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-switcher a:hover,
.lang-switcher a[aria-current="page"] {
background: var(--primary);
color: white;
}
.lang-switcher a:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* Main content */
main {
padding: var(--spacing-2xl) 0;
min-height: 60vh;
}
section {
margin-bottom: var(--spacing-3xl);
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--surface-color);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-lg);
border-left: 4px solid var(--primary);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (prefers-reduced-motion: no-preference) {
section:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
}
h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.75rem, 5vw, 2.5rem);
color: var(--primary);
margin-bottom: var(--spacing-lg);
line-height: 1.2;
font-weight: 700;
}
h2 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.5rem, 4vw, 2rem);
color: var(--secondary);
margin-bottom: var(--spacing-lg);
line-height: 1.3;
font-weight: 700;
}
h3 {
font-size: clamp(1.25rem, 3vw, 1.5rem);
color: var(--text-color);
margin-bottom: var(--spacing-md);
font-weight: 600;
}
p {
margin-bottom: var(--spacing-lg);
color: var(--text-secondary);
max-width: 70ch;
}
/* Lists */
ul, ol {
margin-left: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
}
li {
margin-bottom: var(--spacing-md);
color: var(--text-secondary);
line-height: 1.7;
}
/* Links */
a {
color: var(--primary);
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
a:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
border-radius: var(--border-radius-sm);
}
/* Definition list - POUR principles */
dl {
display: grid;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
@media (min-width: 640px) {
dl {
grid-template-columns: auto 1fr;
}
}
dt {
font-weight: 700;
color: var(--primary);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--surface-color);
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
}
dd {
color: var(--text-secondary);
padding: var(--spacing-sm) 0;
}
/* Mark/highlight - Ensure sufficient contrast */
mark {
background: var(--accent);
color: var(--text-light);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-weight: 600;
}
/* Code elements */
code, kbd {
background: var(--surface-color);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-family: 'Courier New', monospace;
font-size: 0.9em;
border: 1px solid var(--primary);
}
kbd {
box-shadow: var(--shadow-sm);
font-weight: 600;
}
/* Abbreviations */
abbr[title] {
text-decoration: underline dotted;
cursor: help;
border-bottom: 2px dotted var(--primary);
}
/* Footer */
footer {
background: var(--surface-dark);
color: var(--text-dark);
padding: var(--spacing-3xl) 0 var(--spacing-xl);
margin-top: var(--spacing-3xl);
}
.footer-content {
display: grid;
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
@media (min-width: 640px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-content {
grid-template-columns: repeat(4, 1fr);
}
}
.footer-column h3 {
margin-bottom: var(--spacing-lg);
color: var(--accent);
font-size: 1.25rem;
}
.footer-column ul {
list-style: none;
margin-left: 0;
}
.footer-column li {
margin-bottom: var(--spacing-sm);
}
.footer-column a {
color: var(--text-dark);
text-decoration: none;
transition: color var(--transition-fast);
display: inline-block;
padding: var(--spacing-xs) 0;
}
.footer-column a:hover {
color: var(--accent);
}
.footer-column a:focus {
outline: 3px solid var(--accent);
outline-offset: var(--focus-offset);
border-radius: var(--border-radius-sm);
}
.social-links {
display: flex;
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
flex-wrap: wrap;
}
.social-links a {
font-size: 1.5rem;
/* Touch target size - WCAG 2.5.5 */
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary);
border-radius: 50%;
transition: transform var(--transition-fast), background var(--transition-fast);
}
@media (prefers-reduced-motion: no-preference) {
.social-links a:hover {
transform: scale(1.1);
background: var(--accent);
}
}
.footer-copyright {
text-align: center;
padding-top: var(--spacing-xl);
border-top: 2px solid rgba(255, 255, 255, 0.2);
font-size: 0.9rem;
color: var(--text-secondary-dark);
}
/* Utility classes for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Enhanced focus styles for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* Animation for theme toggle icon */
@media (prefers-reduced-motion: no-preference) {
.theme-toggle i {
transition: transform var(--transition-base);
}
.theme-toggle:hover i {
transform: rotate(20deg);
}
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
<header>
<nav class="container" aria-label="Navigation principale">
<a href="/" class="logo" aria-label="A11y Resources - Page d'accueil">
<i class="fas fa-universal-access" aria-hidden="true"></i>
<span>A11y Resources</span>
</a>
<button class="burger" aria-label="Ouvrir le menu de navigation" aria-expanded="false" aria-controls="nav-menu">
<i class="fas fa-bars" aria-hidden="true"></i>
<span class="sr-only">Menu</span>
</button>
<div class="nav-menu" id="nav-menu">
<a href="#guides">Guides</a>
<a href="#outils">Outils</a>
<a href="#bonnes-pratiques">Bonnes pratiques</a>
<button class="theme-toggle" aria-label="Changer le thème d'affichage">
<i class="fas fa-adjust" aria-hidden="true"></i>
<span>Thème</span>
</button>
</div>
</nav>
</header>
<main class="container" id="main-content">
<nav class="lang-switcher" aria-label="Sélection de la langue">
<a href="/" lang="fr" hreflang="fr" aria-label="Version française" aria-current="page">
<i class="fas fa-globe" aria-hidden="true"></i> Français
</a>
<a href="/en/" lang="en" hreflang="en" aria-label="English version">
<i class="fas fa-globe" aria-hidden="true"></i> English
</a>
</nav>
<section id="principes">
<h1>Accessibilité Web : principes fondamentaux</h1>
<p>
Cette section présente les quatre piliers <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> POUR,
suivis de recommandations clés à chaque niveau et liens vers les sections détaillées.
</p>
<dl>
<dt><mark>Perceivable</mark> (Perceptible)</dt>
<dd>Transcription, alternatives textuelles, contraste suffisant, organisation visuelle claire.</dd>
<dt><mark>Operable</mark> (Utilisable)</dt>
<dd>Navigation au clavier, ordre de tabulation logique, skip links, compatibilité mobile.</dd>
<dt><mark>Understandable</mark> (Compréhensible)</dt>
<dd>Langue déclarée, feedback cohérent, instructions simples, accessibilité cognitive.</dd>
<dt><mark>Robust</mark> (Robuste)</dt>
<dd>Compatibilité avec technologies d'assistance, ARIA conforme, validation du code.</dd>
</dl>
<h3>Navigation rapide</h3>
<ul>
<li><a href="#keyboard">Navigation clavier</a></li>
<li><a href="#forms">Accessibilité des formulaires</a></li>
<li><a href="#cognitive">Accessibilité cognitive</a></li>
<li><a href="#aria">Utilisation ARIA</a></li>
<li><a href="#multimedia">Multimédia et contenus dynamiques</a></li>
<li><a href="#mobile">Accessibilité mobile</a></li>
<li><a href="#overlay">Accessibilité overlay</a></li>
<li><a href="#testing">Tests utilisateur réels</a></li>
<li><a href="#intersection">Intersectionnalité</a></li>
</ul>
</section>
<section id="guides">
<h2>Guides accessibilité</h2>
<p>
Implémentez les meilleures pratiques WCAG, SEO accessible, Core Web Vitals,
et accédez à des tutoriels interactifs pour créer des expériences web inclusives.
</p>
</section>
<section id="keyboard">
<h2>Navigation clavier et focus</h2>
<p>Une navigation au clavier efficace est essentielle pour l'accessibilité. Respectez ces principes :</p>
<ul>
<li><strong>Tabulation visible</strong> : Assurez un ordre de focus cohérent qui suit la structure visuelle de la page.</li>
<li>Ordre logique (<strong>tabindex</strong>)</li>
<li>Exclure volontairement les éléments non interactifs par la mise en place dans le code de <code>tabindex="-1"</code></li>
<li><strong>Skip links</strong> : Ajoutez des liens d'évitement comme <code><a href="#main-content">Aller au contenu principal</a></code> en début de page.</li>
<li><strong>Visibilité du focus</strong> : Utilisez des styles <code>:focus</code> et <code>:focus-visible</code> avec un contraste élevé (minimum 3:1 avec l'arrière-plan).</li>
<li><strong>Fonctionnalités accessibles sans souris</strong> : Tous les boutons, menus et formulaires doivent être utilisables au clavier uniquement.</li>
</ul>
<p>
<strong>Testez avec</strong> : <kbd>Tab</kbd>, <kbd>Shift</kbd>+<kbd>Tab</kbd>, <kbd>Enter</kbd>, <kbd>Space</kbd>, flèches directionnelles.
<br>
Guide complet WebAIM sur la navigation clavier
</p>
</section>
<section id="forms">
<h2>Accessibilité des formulaires</h2>
<p>Les formulaires accessibles améliorent l'expérience de tous les utilisateurs :</p>
<ul>
<li><strong>Labels compréhensibles sans équivoques</strong> : Utilisez <code><label for="id"></code> relié à chaque champ input (et à chaque bouton) pour une association explicite.</li>
<li><strong>Messages d'erreur accessibles</strong> en temps réel : Ajoutez <code>role="alert"</code> ou <code>aria-live="polite"</code> pour notifier les utilisateurs de lecteurs d'écran.</li>
<li><strong>Instructions avant le champ</strong> : Placez les indications nécessaires avant l'input, pas après.</li>
<li><strong>CAPTCHA alternatif</strong> : Proposez des alternatives audio ou mathématiques aux CAPTCHA visuels.</li>
<li><strong>Groupement logique</strong> : Utilisez <code><fieldset></code> et <code><legend></code> pour regrouper les champs liés (dates, adresses).</li>
</ul>
<p>
<a href="https://www.w3.org/WAI/tutorials/forms/" target="_blank" rel="noopener">Tutoriel WAI sur les formulaires accessibles</a>
</p>
</section>
<section id="cognitive">
<h2>Accessibilité cognitive et neurodiversité</h2>
<p>Créez du contenu compréhensible pour tous, incluant les personnes avec des difficultés cognitives :</p>
<ul>
<li><strong>Langage simple</strong> : Évitez le jargon technique et les abréviations non expliquées.</li>
<li><strong>Instructions claires</strong> : Utilisez une présentation linéaire et des étapes numérotées.</li>
<li><strong>Réduction des distractions</strong> : Respectez <code>prefers-reduced-motion</code> pour limiter les animations. Evitez les animations qui se lancent automatiquement au chargement de la page.</li>
<li><strong>Espacement généreux</strong> : Aérez le contenu pour faciliter la lecture et la concentration.</li>
<li><strong>Feedback immédiat</strong> : Confirmez les actions de l'utilisateur rapidement et clairement.</li>
</ul>
<p>
<a href="https://www.w3.org/WAI/cognitive/" target="_blank" rel="noopener">Guide WAI sur l'accessibilité cognitive</a>
</p>
</section>
<section id="aria">
<h2>ARIA : bonnes pratiques</h2>
<p><strong>Règle d'or</strong> : "No ARIA is better than bad ARIA" - Utilisez ARIA en complément du HTML sémantique, jamais en remplacement.</p>
<ul>
<li><code>aria-label</code> : Pour boutons avec icônes sans texte visible (ex: <code><button aria-label="Fermer"><i class="fa-times"></i></button></code>).</li>
<li><code>aria-expanded</code> : Pour indiquer l'état ouvert/fermé des accordéons et menus déroulants.</li>
<li><code>role="alert"</code> : Pour les notifications importantes qui nécessitent une attention immédiate.</li>
<li><code>aria-live</code> : Pour les mises à jour dynamiques (valeurs : "polite", "assertive", "off").</li>
<li><strong>Ne pas surcharger</strong> : Limitez l'utilisation d'ARIA aux seuls cas où le HTML natif est insuffisant.</li>
</ul>
<p>
Aide-mémoire ARIA complet
</p>
</section>
<section id="multimedia">
<h2>Accessibilité multimédia et contenus dynamiques</h2>
<p>Rendez tous les contenus multimédia accessibles :</p>
<ul>
<li><strong>Transcriptions</strong> : Fournissez une transcription textuelle complète pour audio et vidéo.</li>
<li><strong>Sous-titres</strong> : Ajoutez des sous-titres synchronisés (format WebVTT recommandé).</li>
<li><strong>Audio-description</strong> : Décrivez les éléments visuels importants pour les personnes aveugles.</li>
<li>Des instructions alternatives pour animations et overlays (<code>aria-modal</code>).</li>
<li> Appliquez un ratio de contraste (minimum : 4.5:1 pour texte normal).</li>
</ul>
<p>Checklist: <a href="https://webaim.org/techniques/captions/" target="_blank">WebAIM Captions</a></p>
</section>
<section id="mobile">
<h2>Accessibilité mobile</h2>
<ul>
<li>Touch targets larges, espacés.</li>
<li>Pas d’éléments piégés par le hover/focus absent sur mobile.</li>
<li>Zoom autorisé, pas de fixed-viewport (<code>user-scalable=yes</code>).</li>
<li>Navigation linéaire</li>
<li>Lecteurs d’écran mobiles humains (VoiceOver, TalkBack)</li>
<li><strong>Ne pas compter sur les overlays</strong> : privilégier la correction du code en profondeur. Envisager un audit par un expert externe ou un panel d’utilisateurs en situation.</li>
</ul>
<p>Outil recommandé : Tenon API, Axe Mobile, MDN Mobile Accessibility</p>
</section>
<section id="overlay">
<h2>Accessibilité overlay : mises en garde</h2>
<p>
Les overlays automatiques (widgets, toolbars) <strong>n'offrent pas</strong> la conformité WCAG réelle. Privilégiez la correction native du code ! <br>
<strong>Référence :</strong> <a href="https://www.accessibility.works/blog/avoid-accessibility-overlay-tools-toolbar-plugins/" target="_blank">Pourquoi éviter les overlays</a>
</p>
</section>
<section id="testing">
<h2>Tests avec utilisateurs en situation réelle</h2>
<ul>
<li>Inclure personnes handicapées lors des tests ; différents handicaps (visuel, moteur, auditif, cognitif, etc.</li>
<li>Observations sur navigation réelle.</li>
<li>Collecte de feedback direct via questionnaires adaptés.</li>
<li>Testez clavier seul, lecteur d’écran (NVDA, JAWS, VoiceOver), et navigation tactile.</li>
<li>Combiner audit automatisé (axe, WAVE…) et correction manuelle avec retour d’usagers réels.</li>
</ul>
<p>Guide pratique : WAI User Testing</p>
</section>
<section id="intersection">
<h2>Intersectionnalité, localisation et linguistique</h2>
<ul>
<li>Respect des cultures, accès multilingue, textes compatibles avec traduction automatique.</li>
<li>Formats de date, heure et devise localisés.</li>
<li>Testez sur plusieurs régions et langues.</li>
</ul>
<p>Voir : W3C i18n Best Practices</p>
</section>
<section id="outils">
<h2>Outils recommandés</h2>
<p>Explorez notre sélection d'outils pour tester et améliorer l'accessibilité de vos sites web.</p>
<ul><li>AccessScan produit des rapports WCAG 2.2 et ADA avec alt-text généré par IA</li>
<li>Axe DevTools (Deque) : intégré avec VScode, produit des rapports détaillés</li>
<li>WAVE (WebAIM) scans visuels et audits WCAG</li>
<li>pa11y : Outil CLI open-source pour tests automatisés en CI/CD</li>
<li>Tenon API pour audits scalables, avec focus sur mobile et IA.</li>
<li>Testez sur mobile (VoiceOver/TalkBack), outils contrastes (WebAIM Contrast Checker), analyseurs de formulaires</li>
</ul>
</section>
<section id="bonnes-pratiques">
<h2>Bonnes pratiques</h2>
<p>Adoptez les meilleures pratiques pour un web plus inclusif et performant.</p>
<ul><li>certification IAAP</li><li>Section 508</li><li>WCAG 2.2 : Focus sur l'opérabilité : critères 3.3.7 (Drag-and-Drop : toute fonctionnalité de glisser-déposer doit être réalisable sans drag, sauf si essentiel) et 3.2.6 (Consistent Help : les mécanismes d'aide répétés doivent apparaître dans le même ordre relatif sur les pages)</li>
<li>Contraste des Couleurs (WCAG 1.4.3) : Assurez un ratio de contraste minimum de 4.5:1 pour le texte normal (3:1 pour gros texte). Formule : (L1 + 0.05) / (L2 + 0.05), où L1/L2 sont les luminances (calculables via outils comme WebAIM Contrast Checker). Exemple : Évitez gris clair (#CCCCCC) sur blanc (#FFFFFF) – ratio 1.3:1, échoue AA. </li>
<li>Utilisez ARIA pour enrichir le sémantique sans surcharger (règle : "No ARIA is better than bad ARIA"). Exemples : aria-label pour boutons sans texte visible ; role="alert" pour notifications dynamiques ; aria-expanded pour accordéons.</li>
<li>Alt-Text Efficace : Rédigez des descriptions concises et contextuelles. Pour images décoratives, utilisez alt="". Pour graphiques, décrivez les données clés.</li>
</ul>
</section>
<section id="ressources-complementaires">
<h2>Aller plus loin : ressources avancées et communauté</h2>
<ul>
<li><a href="https://www.a11yproject.com/" rel="noopener" target="_blank">A11Y Project</a> : guides complets et checklists</li>
<li><a href="https://accessibility.blog.gov.uk/" target="_blank" rel="noopener">Accessibility blog GOV.UK</a></li>
<li><a href="https://www.a11y-collective.com/blog/how-to-overcome-avoid-the-7-common-digital-accessibility-issues/" target="_blank" rel="noopener">7 obstacles courants et leur résolution</a></li>
<li>Certification : <a href="https://www.accessibilityassociation.org/" target="_blank">IAAP</a></li>
</ul>
</section>
</main>
<footer>
<div class="container footer-content">
<div class="footer-column">
<h3>À Propos</h3>
<p>A11y Resources est dédié à promouvoir un web accessible à tous.<br>Un site proposé par Omnireso, webmaster et dévelopeur web depuis 1997 et certifié Opquast.</p>
</div>
<div class="footer-column">
<h3>Contact</h3>
<ul>
<li><a href="mailto:contact@a11y-resources.com">Email</a></li>
<li><a href="#legal.html">Mentions Légales</a></li>
</ul>
<div class="social-links">
<a href="https://x.com/omnireso" aria-label="Twitter" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/omnireso" aria-label="GitHub" target="_blank" rel="noopener"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/company/omnireso/" aria-label="omnireso LinkedIn" target="_blank" rel="noopener"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Manifeste</h3>
<p>Actuellement consultant SEO au sein d’une agence digitale, Omnireso promeut l’accessibilité web auprès des clients. Dans le cadre de ses missions SEO, il accompagne et met en place autant que faire se peut les différentes étapes d’accession à l’accessibilité web.</p>
</div>
<div class="footer-column">
<h3>Pour aller plus loin</h3>
<p>Si vous avez des remarques ou suggestions, n'hésitez pas à échanger par mail. Merci :)</p>
</div>
</div>
<div class="footer-copyright">
<p>© 2018 - 2025 a11y-resources.com - Tous droits réservés - Code valide W3 validator</p>
</div>
</footer>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "A11y Resources",
"url": "https://a11y-resources.com",
"dateModified":"2025-11-15T12:02:56+01:00",
"keywords" : "a11y, web accessibility, handicap, accessible",
"alternateName":"a11y",
"description":"Ressources pour l'accessibilité web (Web Accessibility Resources)",
"potentialAction": {
"@type": "SearchAction",
"target": "https://a11y-resources.com/search?q={search_term_string}",
"query-input": "required maxlength=100 name=q"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Accessibilité Web : principes fondamentaux",
"url": "https://a11y-resources.com",
"description": "Ressources professionnelles pour l'accessibilité web - Guides, outils et bonnes pratiques pour un web inclusif",
"inLanguage": "fr",
"datePublished": "2018-01-01",
"dateModified": "2025-11-15",
"mainEntity": {
"@type": "ItemList",
"name": "Principes POUR de WCAG",
"description": "Les quatre piliers de l'accessibilité web selon WCAG 2",
"numberOfItems": 4,
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "DefinedTerm",
"name": "Perceivable",
"termCode": "Perceptible",
"description": "Transcription, alternatives textuelles, contraste suffisant, organisation visuelle claire."
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "DefinedTerm",
"name": "Operable",
"termCode": "Utilisable",
"description": "Navigation au clavier, ordre de tabulation logique, skip links, compatibilité mobile."
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "DefinedTerm",
"name": "Understandable",
"termCode": "Compréhensible",
"description": "Langue déclarée, feedback cohérent, instructions simples, accessibilité cognitive."
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"@type": "DefinedTerm",
"name": "Robust",
"termCode": "Robuste",
"description": "Compatibilité avec technologies d'assistance, ARIA conforme, validation du code."
}
}
]
}
}
</script>
<script>
const burger = document.querySelector('.burger');
const navMenu = document.querySelector('.nav-menu');
const themeToggle = document.querySelector('.theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
burger.addEventListener('click', () => {
const isExpanded = navMenu.classList.toggle('active');
burger.setAttribute('aria-expanded', isExpanded);
burger.textContent = isExpanded ? '✕' : '☰';
});
function setTheme() {
const isDark = localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && prefersDark.matches);
document.body.style.setProperty('--bg-color', isDark ? 'var(--bg-dark)' : 'var(--bg-light)');
document.body.style.setProperty('--text-color', isDark ? 'var(--text-dark)' : 'var(--text-light)');
themeToggle.innerHTML = isDark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
}
themeToggle.addEventListener('click', () => {
const isDark = document.body.style.getPropertyValue('--bg-color') === 'var(--bg-dark)';
localStorage.setItem('theme', isDark ? 'light' : 'dark');
setTheme();
});
setTheme();
prefersDark.addEventListener('change', setTheme);
</script>
</body>
</html>
