Fix accesbility - thanks to Erwan C.

stephlm2dev · stephlm2dev · commit 694a7d2a785d · 2026-04-17T11:50:13.000+02:00
diff --git a/index.html b/index.html
@@ -186,6 +186,8 @@
 
   </head>
   <body>
+    <a href="#main-content" class="skip-link">Passer au contenu principal</a>
+    <main id="main-content">
     <section
       id="hello"
       class="hero-section uk-section uk-padding uk-flex uk-flex-middle"
@@ -459,7 +461,7 @@ <h3 class="client-card-name">Orange</h3>
         </div>
 
         <div class="uk-margin-large-top">
-          <blockquote class="uk-text-lead uk-text-center uk-text-muted">
+          <blockquote class="uk-text-lead uk-text-center uk-text-muted" lang="en">
             <p>
             He is a top-notch specialist and full-stack developer who brings
             great benefits to the project. He is very responsible and
@@ -783,6 +785,8 @@ <h2 class="uk-heading-small uk-text-center">
       </div>
     </section>
 
+    </main>
+
     <!-- Scroll indicator -->
     <nav class="scroll-indicator" aria-label="Navigation sections">
       <a href="#hello" class="scroll-dot active" data-section="hello"><span class="scroll-dot-label">Accueil</span></a>
diff --git a/style.css b/style.css
@@ -2,6 +2,36 @@
   --main-bg-color: rgb(229, 77, 66);
 }
 
+/* Skip navigation link */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 16px;
+  background: var(--main-bg-color);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 0 0 6px 6px;
+  font-family: 'Raleway', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  z-index: 9999;
+  transition: top 0.2s;
+}
+.skip-link:focus {
+  top: 0;
+  color: white;
+}
+
+/* Visible focus states */
+a:focus-visible,
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--main-bg-color);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+
 .hero-section {
   position: relative;
   background-image: linear-gradient(
@@ -77,7 +107,7 @@ h3 {
 }
 p,
 a {
-  font-weight: 100;
+  font-weight: 400;
   font-family: 'Raleway', sans-serif !important;
 }
 
@@ -160,7 +190,7 @@ a:hover {
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 2px;
-  color: #999;
+  color: #767676;
   margin: 0 0 8px 0;
 }
 
@@ -385,7 +415,7 @@ section#contact-me {
   font-size: 0.9rem;
   line-height: 1.6;
   margin: 0 0 20px 0;
-  font-weight: 100;
+  font-weight: 400;
 }
 
 .expertise-card-list {
@@ -399,7 +429,7 @@ section#contact-me {
   color: #444;
   padding: 5px 0 5px 18px;
   position: relative;
-  font-weight: 100;
+  font-weight: 400;
   font-family: 'Raleway', sans-serif;
 }
 
@@ -427,8 +457,8 @@ section#contact-me {
 
 .expertise-card-footer span {
   font-size: 0.8rem;
-  color: #999;
-  font-weight: 100;
+  color: #767676;
+  font-weight: 400;
 }
 
 /* Client cards */
@@ -462,9 +492,9 @@ section#contact-me {
   position: absolute;
   bottom: 12px;
   left: 12px;
-  background: rgba(229, 77, 66, 0.9);
+  background: #c94438;
   color: white;
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 600;
   font-family: 'Raleway', sans-serif;
   letter-spacing: 0.5px;
@@ -490,7 +520,7 @@ section#contact-me {
 
 .client-card-meta {
   font-size: 0.75rem;
-  color: #888;
+  color: #767676;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin: 0 0 16px 0;
@@ -502,7 +532,7 @@ section#contact-me {
   color: #333;
   line-height: 1.7;
   margin: 0;
-  font-weight: 100;
+  font-weight: 400;
 }
 
 /* Process timeline */
@@ -570,5 +600,5 @@ section#contact-me {
   font-size: 1rem;
   line-height: 1.6;
   margin: 0;
-  font-weight: 100;
+  font-weight: 400;
 }
