From 038227d3295243468fdf41d5a5337a7bcdd62768 Mon Sep 17 00:00:00 2001
From: rohitbharmal <rohitbharmal123@gmail.com>
Date: Thu, 19 Feb 2026 15:37:09 +0530
Subject: [PATCH 1/2] website: Fix accessibility issues to match a11y standards

- Add alt attributes to images (nav event image, CNCF logos)
- Give links discernible names (navbar brand, scroll-to-overview, aria-labels)
- Improve contrast for navbar badges and adopters button
- Make links distinguishable without color (underlines, focus-visible)
- Fix heading order (section headings h3 -> h2)

Closes: #4312
Signed-off-by: rohitbharmal <rbharmal@redhat.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Signed-off-by: rohitbharmal <rohitbharmal123@gmail.com>
---
 assets/scss/_styles_project.scss | 49 ++++++++++++++++++++++++++++++++
 config.toml                      |  2 +-
 content/en/_index.html           | 18 ++++++------
 layouts/partials/navbar.html     |  2 +-
 4 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 45f69610e8..fef2ab26db 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -895,6 +895,55 @@ nav.foldable-nav {
   a > code {
     color: unset;
   }
+
+  // a11y: links distinguishable without color alone (underline, focus)
+  a:not(.btn) {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+}
+
+// a11y: same for homepage content sections (links not relying on color only)
+#overview a:not(.btn),
+#community a:not(.btn),
+#pageContent a:not(.btn) {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+// --------------------------------------------------
+// a11y: sufficient contrast for navbar badges and adopters button
+// --------------------------------------------------
+.td-navbar .badge-warning {
+  background-color: #b38600;
+  color: #fff;
+}
+
+#adopters .btn-outline-primary {
+  color: $primary;
+  border-color: $primary;
+  font-weight: 500;
+
+  &:hover {
+    color: #fff;
+    background-color: $primary;
+    border-color: $primary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
 }
 
 // --------------------------------------------------
diff --git a/config.toml b/config.toml
index cbad9feedc..a394756a99 100644
--- a/config.toml
+++ b/config.toml
@@ -69,7 +69,7 @@ ignoreFiles = []
   [[menu.main]]
     name = "" 
     weight = -1000
-    pre = "<span style='display:inline-flex; align-items:center;'><img src='/events/images/cloud-native-ai-2025.png' style='height:60px; width:auto; margin-right:8px;'><span style='display:flex; flex-direction:column; justify-content:center;'><span class='badge badge-warning' style='margin-bottom:4px;'>March 23rd, 2026</span><span class='badge badge-warning'>Amsterdam, Netherlands</span></span></span>"
+    pre = "<span style='display:inline-flex; align-items:center;'><img src='/events/images/cloud-native-ai-2025.png' alt='Cloud Native AI 2025 event' style='height:60px; width:auto; margin-right:8px;'><span style='display:flex; flex-direction:column; justify-content:center;'><span class='badge badge-warning' style='margin-bottom:4px;'>March 23rd, 2026</span><span class='badge badge-warning'>Amsterdam, Netherlands</span></span></span>"
     post = ""
     url = "https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/co-located-events/cloud-native-ai-kubeflow-day/"
 #  [[menu.main]]
diff --git a/content/en/_index.html b/content/en/_index.html
index 5bfad5c681..cfc74357ff 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -19,8 +19,8 @@
       <i class="fas fa-brain ml-1"></i>
     </a>
   <div class="mt-2">
-    <a class="btn btn-link text-light" href="#overview">
-      <i class="fa-solid fa-circle-chevron-down" style="font-size: 350%"></i>
+    <a class="btn btn-link text-light" href="#overview" aria-label="Scroll to overview">
+      <i class="fa-solid fa-circle-chevron-down" style="font-size: 350%" aria-hidden="true"></i>
     </a>
   </div>
 </div>
@@ -28,7 +28,7 @@
 
 <div id="community-stats" class="text-center">
   <div class="container">
-    <h3 class="section-head">
+    <h2 class="section-head">
       <span class="border-bottom pb-2">Open Source. Battle-Tested. Community Built.</span>
     </h3>
     <div class="row justify-content-center">
@@ -62,7 +62,7 @@ <h3 class="section-head">
 
 <div id="overview" class="text-center">
   <div class="container">
-    <h3 class="section-head">
+    <h2 class="section-head">
       <span class="border-bottom pb-2">What is Kubeflow?</span>
     </h3>
     <p class="mx-auto col-11 col-xl-7 px-0">
@@ -81,7 +81,7 @@ <h3 class="section-head">
 
 <div id="adopters" class="text-center">
   <div class="container">
-    <h3 class="section-head">
+    <h2 class="section-head">
       <span class="border-bottom pb-2">Trusted by</span>
     </h3>
     <div class="mb-5 d-flex flex-wrap align-content-between align-items-center justify-content-center user-select-none">
@@ -129,7 +129,7 @@ <h3 class="section-head">
 
 <section id="pageContent">
   <div class="container">
-    <h3 class="section-head text-center">
+    <h2 class="section-head text-center">
       <span class="border-bottom pb-2">Kubeflow Projects</span>
     </h3>
     <div class="card-deck">
@@ -290,7 +290,7 @@ <h3 class="section-head text-center">
 
 <div id="community" class="text-center">
   <div class="container">
-    <h3 class="section-head">
+    <h2 class="section-head">
       <span class="border-bottom pb-2">Join our Community</span>
     </h3>
     <p class="mx-auto col-md-7 px-0">
@@ -306,13 +306,13 @@ <h3 class="section-head">
       <img
           src="/docs/images/logos/cncf.svg"
           draggable="false"
-          class="show_light-only img-fluid
+          class="show_light-only img-fluid"
           alt="Cloud Native Computing Foundation Logo"
       />
       <img
           src="/docs/images/logos/cncf-white.svg"
           draggable="false"
-          class="show_dark-only img-fluid
+          class="show_dark-only img-fluid"
           alt="Cloud Native Computing Foundation Logo"
       />
     </div>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 075778e402..31b845320e 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -6,7 +6,7 @@
 <nav class="js-navbar-scroll navbar navbar-expand-md navbar-dark
             {{- if $cover }} td-navbar-cover {{- end }} td-navbar">
 <div class="container px-0">
-  <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+  <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}" aria-label="{{ .Site.Title }} - home">
     {{- /**/ -}}
     <span class="navbar-brand__logo navbar-logo">
       {{- if ne .Site.Params.ui.navbar_logo false -}}

From a5f40a1b32577ad6ce10b5d11a2ab0b72e23c23e Mon Sep 17 00:00:00 2001
From: rohitbharmal <rohitbharmal123@gmail.com>
Date: Thu, 19 Feb 2026 15:37:09 +0530
Subject: [PATCH 2/2] website: Enhance accessibility for adopters button and
 main content area

Signed-off-by: rohitbharmal <rohitbharmal123@gmail.com>
---
 assets/scss/_styles_project.scss | 57 ++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index fef2ab26db..502ab72263 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -929,23 +929,68 @@ nav.foldable-nav {
   color: #fff;
 }
 
-#adopters .btn-outline-primary {
-  color: $primary;
-  border-color: $primary;
+// Adopters button: ensure 4.5:1+ contrast (light theme = dark blue on light bg)
+[data-theme="light"] #adopters .btn-outline-primary {
+  color: #003d99;
+  border-color: #003d99;
   font-weight: 500;
 
   &:hover {
     color: #fff;
-    background-color: $primary;
-    border-color: $primary;
+    background-color: #003d99;
+    border-color: #003d99;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #003d99;
+    outline-offset: 2px;
+  }
+}
+
+// Adopters button: dark theme = light blue on dark bg
+[data-theme="dark"] #adopters .btn-outline-primary {
+  color: #7eb8ff;
+  border-color: #7eb8ff;
+  font-weight: 500;
+
+  &:hover {
+    color: #0d1117;
+    background-color: #7eb8ff;
+    border-color: #7eb8ff;
   }
 
   &:focus-visible {
-    outline: 2px solid $primary;
+    outline: 2px solid #7eb8ff;
     outline-offset: 2px;
   }
 }
 
+// Fallback when data-theme not set (e.g. no-JS)
+#adopters .btn-outline-primary {
+  font-weight: 500;
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+// a11y: sufficient contrast for main content area (background and text)
+.td-main main {
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+[data-theme="light"] .td-main main {
+  background-color: #ffffff;
+  color: #212529;
+}
+
+[data-theme="dark"] .td-main main {
+  background-color: #0d1117;
+  color: #e6edf3;
+}
+
 // --------------------------------------------------
 // alert styling
 // --------------------------------------------------