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>

Author: rohit-bharmal

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;
+  }
 }
 
 // --------------------------------------------------

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]]

content/en/_index.html

@@ -19,16 +19,16 @@
       <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>
 {{</blocks/cover>}}
 
 <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>

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 -}}