diff --git a/css/styles.css b/css/styles.css index c2bfb2f..4601e34 100644 --- a/css/styles.css +++ b/css/styles.css @@ -5,6 +5,19 @@ box-sizing: border-box; } +/* Accessibilité - Classes utilitaires */ +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + :root { --primary-red: #FF0000; --primary-green: #008000; @@ -42,6 +55,38 @@ a { color: var(--text-color); } +/* Amélioration du focus pour l'accessibilité */ +a:focus, +button:focus, +input:focus, +textarea:focus, +select:focus { + outline: 2px solid var(--primary-red); + outline-offset: 2px; + border-radius: 2px; +} + +/* Support pour les préférences d'animation réduite */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* Support pour le contraste élevé */ +@media (prefers-contrast: high) { + :root { + --text-color: #000000; + --primary-red: #CC0000; + --card-bg: #FFFFFF; + --sidebar-bg: #F0F0F0; + --tag-bg: #E8E8E8; + --search-bg: #D0D0D0; + } +} + img { max-width: 100%; height: auto; diff --git a/includes/header.php b/includes/header.php index e9d3747..c1e18da 100644 --- a/includes/header.php +++ b/includes/header.php @@ -1,38 +1,50 @@ -