Implement P0 enterprise accessibility fixes

Debdyut · Debdyut · commit d01a5030b4e0 · 2025-11-16T10:32:53.000+05:30
✅ WCAG 2.1 Compliance:
- Added focus indicators for all interactive elements
- Skip navigation link for keyboard users
- ARIA labels and roles for navigation
- Consistent navigation pattern across breakpoints
- Improved form focus states with proper contrast

✅ Enterprise Standards:
- Proper outline styles with offset
- Semantic HTML with roles
- Keyboard navigation support
- Screen reader friendly emoji handling
diff --git a/portfolio/themes/basic/layouts/_default/baseof.html b/portfolio/themes/basic/layouts/_default/baseof.html
@@ -15,22 +15,24 @@
     <link rel="stylesheet" href="{{ "css/minimal.css" | relURL }}">
 </head>
 <body>
-    <nav>
+    <a href="#main-content" class="skip-nav">Skip to main content</a>
+    
+    <nav role="navigation" aria-label="Main navigation">
         <div class="nav-brand">{{ .Site.Params.author }}</div>
         <ul>
-            <li><a href="{{ "/" | relURL }}"><span class="emoji">🏠</span> Home</a></li>
-            <li><a href="{{ "/projects" | relURL }}"><span class="emoji">🛠️</span> Projects</a></li>
-            <li><a href="{{ "/opensource" | relURL }}"><span class="emoji">🌍</span> Community</a></li>
-            <li><a href="{{ "/contact" | relURL }}"><span class="emoji">📧</span> Connect</a></li>
+            <li><a href="{{ "/" | relURL }}"><span class="emoji" aria-hidden="true">🏠</span> Home</a></li>
+            <li><a href="{{ "/projects" | relURL }}"><span class="emoji" aria-hidden="true">🛠️</span> Projects</a></li>
+            <li><a href="{{ "/opensource" | relURL }}"><span class="emoji" aria-hidden="true">🌍</span> Community</a></li>
+            <li><a href="{{ "/contact" | relURL }}"><span class="emoji" aria-hidden="true">📧</span> Connect</a></li>
         </ul>
     </nav>
     
-    <main>
+    <main id="main-content" role="main">
         {{ block "main" . }}{{ end }}
     </main>
     
-    <footer>
-        <p><span class="emoji">👨💻</span> {{ .Site.Params.author }} | {{ .Site.Params.role }}</p>
+    <footer role="contentinfo">
+        <p><span class="emoji" aria-hidden="true">👨💻</span> {{ .Site.Params.author }} | {{ .Site.Params.role }}</p>
     </footer>
 </body>
 </html>
diff --git a/portfolio/themes/basic/static/css/minimal.css b/portfolio/themes/basic/static/css/minimal.css
@@ -11,6 +11,24 @@
   --warm-beige: #E8DDD4;
 }
 
+/* Skip Navigation */
+.skip-nav {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: var(--deep-purple);
+  color: var(--light-gray);
+  padding: 8px;
+  text-decoration: none;
+  border-radius: 4px;
+  z-index: 1000;
+}
+
+.skip-nav:focus {
+  top: 6px;
+  outline: 2px solid var(--warm-peach);
+}
+
 /* Base Mobile Styles */
 * {
   margin: 0;
@@ -63,6 +81,12 @@ a:hover {
   padding: 2px 4px;
 }
 
+a:focus {
+  outline: 2px solid var(--rust-terracotta);
+  outline-offset: 2px;
+  background: var(--light-lavender);
+}
+
 /* Navigation - Mobile First */
 nav {
   background: var(--deep-purple);
@@ -98,6 +122,13 @@ nav a:hover {
   color: var(--charcoal);
 }
 
+nav a:focus {
+  outline: 2px solid var(--warm-peach);
+  outline-offset: 2px;
+  background: var(--sage-green);
+  color: var(--charcoal);
+}
+
 /* Lists */
 ul, ol {
   margin: 1rem 0;
@@ -141,6 +172,12 @@ input, textarea {
   border-radius: 4px;
 }
 
+input:focus, textarea:focus {
+  outline: 2px solid var(--rust-terracotta);
+  outline-offset: 2px;
+  border-color: var(--deep-purple);
+}
+
 button {
   background: var(--rust-terracotta);
   color: var(--light-gray);
@@ -156,6 +193,12 @@ button:hover {
   background: var(--deep-purple);
 }
 
+button:focus {
+  outline: 2px solid var(--warm-peach);
+  outline-offset: 2px;
+  background: var(--deep-purple);
+}
+
 /* Footer */
 footer {
   margin-top: 3rem;
@@ -184,7 +227,7 @@ footer {
   
   nav ul {
     display: flex;
-    gap: 2rem;
+    gap: 1rem;
     justify-content: center;
   }
   
@@ -193,7 +236,7 @@ footer {
   }
   
   nav a {
-    display: inline;
+    display: inline-block;
     padding: 0.5rem 1rem;
   }
   
@@ -213,19 +256,18 @@ footer {
 
 /* Desktop Enhancement */
 @media (min-width: 1024px) {
-  nav {
-    background: transparent;
-    border-bottom: 1px solid var(--sage-green);
-    padding: 1rem 0;
+  nav ul {
+    gap: 2rem;
   }
   
-  nav a {
-    color: var(--steel-blue);
-    background: none;
+  nav a:hover {
+    background: var(--light-lavender);
+    color: var(--deep-purple);
   }
   
-  nav a:hover {
-    color: var(--rust-terracotta);
-    background: none;
+  nav a:focus {
+    outline: 2px solid var(--rust-terracotta);
+    background: var(--light-lavender);
+    color: var(--deep-purple);
   }
 }
