chore: add initial project setup with Docker and React configuration
This commit is contained in:
ɧσℓσ
384
src/pages/Accessibility.jsx
Normal file
384
src/pages/Accessibility.jsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import React from 'react'
|
||||
import './SharedPages.css'
|
||||
|
||||
function Accessibility() {
|
||||
return (
|
||||
<div className="shared-page">
|
||||
<header className="page-header">
|
||||
<i className="fas fa-universal-access"></i>
|
||||
<h1>Principes de l'Accessibilité Web</h1>
|
||||
<p className="subtitle">Vers un numérique inclusif</p>
|
||||
</header>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-question-circle"></i> Qu'est-ce que l'accessibilité numérique ?</h2>
|
||||
<p>
|
||||
L'accessibilité numérique consiste à rendre les sites web et applications utilisables par tous,
|
||||
<strong> y compris les personnes en situation de handicap</strong>. Cela englobe les handicaps visuels,
|
||||
auditifs, moteurs, cognitifs et temporaires.
|
||||
</p>
|
||||
<div className="stats-grid" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', marginTop: '2rem'}}>
|
||||
<div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--primary), var(--secondary))', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
|
||||
<div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>15%</div>
|
||||
<div>de la population mondiale vit avec un handicap</div>
|
||||
</div>
|
||||
<div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--info), #52b788)', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
|
||||
<div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>1 Md</div>
|
||||
<div>de personnes dans le monde</div>
|
||||
</div>
|
||||
<div style={{padding: '1.5rem', background: 'linear-gradient(135deg, var(--warning), #ffc107)', color: 'white', borderRadius: '8px', textAlign: 'center'}}>
|
||||
<div style={{fontSize: '2.5rem', fontWeight: 'bold'}}>70%</div>
|
||||
<div>des sites ne sont pas accessibles</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-users"></i> Types de handicaps concernés</h2>
|
||||
<div className="disabilities-grid" style={{display: 'grid', gap: '1.5rem'}}>
|
||||
{[
|
||||
{
|
||||
type: 'Handicap visuel',
|
||||
icon: 'fa-eye-slash',
|
||||
examples: 'Cécité, malvoyance, daltonisme',
|
||||
needs: 'Lecteurs d\'écran, contrastes élevés, alternatives textuelles',
|
||||
color: '#2d6a4f'
|
||||
},
|
||||
{
|
||||
type: 'Handicap auditif',
|
||||
icon: 'fa-deaf',
|
||||
examples: 'Surdité, malentendance',
|
||||
needs: 'Sous-titres, transcriptions textuelles, langue des signes',
|
||||
color: '#52b788'
|
||||
},
|
||||
{
|
||||
type: 'Handicap moteur',
|
||||
icon: 'fa-wheelchair',
|
||||
examples: 'Mobilité réduite, tremblements, paralysie',
|
||||
needs: 'Navigation au clavier, zones cliquables larges, commandes vocales',
|
||||
color: '#74c69d'
|
||||
},
|
||||
{
|
||||
type: 'Handicap cognitif',
|
||||
icon: 'fa-brain',
|
||||
examples: 'Dyslexie, TDAH, troubles de la mémoire',
|
||||
needs: 'Langage simple, navigation claire, temps de lecture adaptable',
|
||||
color: '#95d5b2'
|
||||
},
|
||||
{
|
||||
type: 'Handicap temporaire',
|
||||
icon: 'fa-band-aid',
|
||||
examples: 'Bras cassé, conjonctivite, environnement bruyant',
|
||||
needs: 'Adaptabilité, multi-modalité',
|
||||
color: '#b7e4c7'
|
||||
}
|
||||
].map((disability, index) => (
|
||||
<div key={index} style={{
|
||||
padding: '1.5rem',
|
||||
background: 'var(--bg)',
|
||||
borderRadius: '8px',
|
||||
borderLeft: `4px solid ${disability.color}`,
|
||||
display: 'grid',
|
||||
gap: '0.75rem'
|
||||
}}>
|
||||
<h3 style={{margin: 0, display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--primary-dark)'}}>
|
||||
<i className={`fas ${disability.icon}`} style={{color: disability.color}}></i>
|
||||
{disability.type}
|
||||
</h3>
|
||||
<div>
|
||||
<strong>Exemples :</strong> {disability.examples}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Besoins :</strong> {disability.needs}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-balance-scale"></i> WCAG : Les 4 principes fondamentaux</h2>
|
||||
<p style={{marginBottom: '2rem'}}>
|
||||
Les <strong>Web Content Accessibility Guidelines (WCAG)</strong> définissent 4 principes universels pour l'accessibilité web,
|
||||
repris par le RGAA français :
|
||||
</p>
|
||||
|
||||
<div className="principles-grid" style={{display: 'grid', gap: '2rem'}}>
|
||||
<div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #2d6a4f'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #2d6a4f, #52b788)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold'
|
||||
}}>1</div>
|
||||
<h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Perceptible</h3>
|
||||
</div>
|
||||
<p><strong>Les utilisateurs doivent pouvoir percevoir l'information</strong></p>
|
||||
<ul>
|
||||
<li>Fournir des alternatives textuelles aux contenus non textuels (images, vidéos)</li>
|
||||
<li>Assurer des contrastes suffisants (au moins 4.5:1 pour le texte)</li>
|
||||
<li>Ne pas se fier uniquement à la couleur pour transmettre l'information</li>
|
||||
<li>Rendre le contenu adaptable (responsive, redimensionnable)</li>
|
||||
</ul>
|
||||
<div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
|
||||
<strong>Exemple :</strong> Une image doit avoir un attribut <code>alt</code> descriptif pour les lecteurs d'écran.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #52b788'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #52b788, #74c69d)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold'
|
||||
}}>2</div>
|
||||
<h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Utilisable</h3>
|
||||
</div>
|
||||
<p><strong>Les utilisateurs doivent pouvoir utiliser l'interface</strong></p>
|
||||
<ul>
|
||||
<li>Toutes les fonctionnalités accessibles au clavier (sans souris)</li>
|
||||
<li>Laisser suffisamment de temps pour lire et utiliser le contenu</li>
|
||||
<li>Ne pas utiliser d'éléments susceptibles de provoquer des crises (flashs)</li>
|
||||
<li>Fournir des aides à la navigation (menu, fil d'Ariane, liens d'évitement)</li>
|
||||
</ul>
|
||||
<div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
|
||||
<strong>Exemple :</strong> Un menu déroulant doit être navigable avec les flèches du clavier et la touche Entrée.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #74c69d'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #74c69d, #95d5b2)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold'
|
||||
}}>3</div>
|
||||
<h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Compréhensible</h3>
|
||||
</div>
|
||||
<p><strong>Les utilisateurs doivent pouvoir comprendre l'information et l'interface</strong></p>
|
||||
<ul>
|
||||
<li>Rendre le texte lisible et compréhensible (langage simple, abréviations expliquées)</li>
|
||||
<li>Faire en sorte que les pages fonctionnent de manière prévisible</li>
|
||||
<li>Aider les utilisateurs à éviter et corriger les erreurs (validation de formulaires claire)</li>
|
||||
<li>Fournir des instructions claires et des labels explicites</li>
|
||||
</ul>
|
||||
<div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
|
||||
<strong>Exemple :</strong> Un message d'erreur de formulaire doit expliquer clairement le problème et comment le corriger.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '2rem', background: 'var(--bg)', borderRadius: '8px', borderTop: '4px solid #95d5b2'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem'}}>
|
||||
<div style={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
background: 'linear-gradient(135deg, #95d5b2, #b7e4c7)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'white',
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold'
|
||||
}}>4</div>
|
||||
<h3 style={{margin: 0, color: 'var(--primary-dark)'}}>Robuste</h3>
|
||||
</div>
|
||||
<p><strong>Le contenu doit être compatible avec les technologies actuelles et futures</strong></p>
|
||||
<ul>
|
||||
<li>Utiliser du HTML valide et sémantique</li>
|
||||
<li>Assurer la compatibilité avec les technologies d'assistance (lecteurs d'écran)</li>
|
||||
<li>Utiliser ARIA (Accessible Rich Internet Applications) quand nécessaire</li>
|
||||
<li>Tester avec différents navigateurs et technologies d'assistance</li>
|
||||
</ul>
|
||||
<div className="example-box" style={{marginTop: '1rem', padding: '1rem', background: 'white', borderRadius: '4px'}}>
|
||||
<strong>Exemple :</strong> Utiliser les balises sémantiques <code><nav></code>, <code><main></code>, <code><article></code> plutôt que des <code><div></code> génériques.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-flag-checkered"></i> Le RGAA : Référentiel français</h2>
|
||||
<div className="info-card">
|
||||
<div className="info-row">
|
||||
<strong>Nom complet:</strong>
|
||||
<span>Référentiel Général d'Amélioration de l'Accessibilité</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<strong>Créé par:</strong>
|
||||
<span>DINUM (Direction Interministérielle du Numérique)</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<strong>Base:</strong>
|
||||
<span>WCAG 2.1 (adapté au contexte français)</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<strong>Version actuelle:</strong>
|
||||
<span>RGAA 4.1 (2021)</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<strong>Obligation légale:</strong>
|
||||
<span>Services publics, entreprises > 250M€ CA</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{marginTop: '2rem'}}>
|
||||
<h3>Les 13 thèmes du RGAA</h3>
|
||||
<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '0.75rem', marginTop: '1rem'}}>
|
||||
{[
|
||||
'Images', 'Cadres', 'Couleurs', 'Multimédia', 'Tableaux', 'Liens',
|
||||
'Scripts', 'Éléments obligatoires', 'Structuration', 'Présentation',
|
||||
'Formulaires', 'Navigation', 'Consultation'
|
||||
].map((theme, index) => (
|
||||
<div key={index} style={{
|
||||
padding: '0.75rem',
|
||||
background: 'var(--primary)',
|
||||
color: 'white',
|
||||
borderRadius: '4px',
|
||||
textAlign: 'center',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: '500'
|
||||
}}>
|
||||
{theme}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-hands-helping"></i> Bénéfices de l'accessibilité</h2>
|
||||
<div className="benefits-grid" style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem'}}>
|
||||
<div style={{padding: '1.5rem', background: '#d4edda', borderRadius: '8px', borderLeft: '4px solid var(--success)'}}>
|
||||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||||
<i className="fas fa-users"></i> Social & Éthique
|
||||
</h4>
|
||||
<ul style={{marginBottom: 0}}>
|
||||
<li>Inclusion de tous les utilisateurs</li>
|
||||
<li>Respect des droits fondamentaux</li>
|
||||
<li>Image responsable</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '1.5rem', background: '#cfe2ff', borderRadius: '8px', borderLeft: '4px solid var(--info)'}}>
|
||||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||||
<i className="fas fa-chart-line"></i> Business
|
||||
</h4>
|
||||
<ul style={{marginBottom: 0}}>
|
||||
<li>Élargissement de l'audience (+15%)</li>
|
||||
<li>Amélioration du SEO</li>
|
||||
<li>Réduction du taux de rebond</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '1.5rem', background: '#fff3cd', borderRadius: '8px', borderLeft: '4px solid var(--warning)'}}>
|
||||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||||
<i className="fas fa-gavel"></i> Légal
|
||||
</h4>
|
||||
<ul style={{marginBottom: 0}}>
|
||||
<li>Conformité réglementaire</li>
|
||||
<li>Éviter les sanctions</li>
|
||||
<li>Anticipation des obligations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{padding: '1.5rem', background: '#d1ecf1', borderRadius: '8px', borderLeft: '4px solid #0dcaf0'}}>
|
||||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||||
<i className="fas fa-code"></i> Technique
|
||||
</h4>
|
||||
<ul style={{marginBottom: 0}}>
|
||||
<li>Code plus robuste et maintenable</li>
|
||||
<li>Meilleure compatibilité</li>
|
||||
<li>Performance améliorée</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content-section">
|
||||
<h2><i className="fas fa-tools"></i> Bonnes pratiques essentielles</h2>
|
||||
<div className="best-practices" style={{display: 'grid', gap: '1rem'}}>
|
||||
{[
|
||||
{
|
||||
practice: 'Ajouter des attributs alt aux images',
|
||||
code: '<img src="logo.png" alt="Logo de l\'organisation">',
|
||||
impact: 'Essentiel pour les lecteurs d\'écran'
|
||||
},
|
||||
{
|
||||
practice: 'Assurer un contraste suffisant',
|
||||
code: 'Ratio minimum 4.5:1 pour texte normal, 3:1 pour texte large',
|
||||
impact: 'Lisibilité pour malvoyants et daltoniens'
|
||||
},
|
||||
{
|
||||
practice: 'Structurer avec des titres hiérarchiques',
|
||||
code: '<h1>, <h2>, <h3>... sans sauter de niveau',
|
||||
impact: 'Navigation et compréhension de la structure'
|
||||
},
|
||||
{
|
||||
practice: 'Rendre les formulaires accessibles',
|
||||
code: '<label for="email">Email</label><input id="email" type="email">',
|
||||
impact: 'Association claire label/champ'
|
||||
},
|
||||
{
|
||||
practice: 'Navigation au clavier',
|
||||
code: 'tabindex, focus visible, touches Entrée/Échap fonctionnelles',
|
||||
impact: 'Utilisateurs sans souris'
|
||||
},
|
||||
{
|
||||
practice: 'Utiliser ARIA avec prudence',
|
||||
code: 'role="navigation", aria-label="Menu principal"',
|
||||
impact: 'Enrichir la sémantique pour technologies d\'assistance'
|
||||
}
|
||||
].map((item, index) => (
|
||||
<div key={index} style={{
|
||||
padding: '1.5rem',
|
||||
background: 'var(--bg)',
|
||||
borderRadius: '8px',
|
||||
borderLeft: '4px solid var(--primary)'
|
||||
}}>
|
||||
<h4 style={{marginTop: 0, color: 'var(--primary-dark)'}}>{item.practice}</h4>
|
||||
<div className="formula">
|
||||
<code>{item.code}</code>
|
||||
</div>
|
||||
<p style={{margin: '0.5rem 0 0 0', color: 'var(--text-light)', fontSize: '0.9rem'}}>
|
||||
<strong>Impact :</strong> {item.impact}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="conclusion-banner">
|
||||
<i className="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<strong>L'accessibilité, c'est pour tout le monde</strong>
|
||||
<p>Un site accessible est plus utilisable, plus performant, mieux référencé et conforme à la loi.
|
||||
L'accessibilité n'est pas une contrainte, c'est une opportunité d'améliorer l'expérience de tous les utilisateurs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accessibility
|
||||
Reference in New Issue
Block a user