From 173ce19c7274d6287fe305b9d6470e3762c9445a Mon Sep 17 00:00:00 2001
From: Shanwis <ashsanthosh8@gmail.com>
Date: Tue, 14 Jul 2026 13:54:30 +0530
Subject: [PATCH] Improve website accessibility to address Lighthouse audit
 findings from #7019

Signed-off-by: Shanwis <ashsanthosh8@gmail.com>
---
 docs/assets/scss/_styles_project.scss         | 21 ++++++++++++++++++-
 docs/content/en/_index.html                   |  6 +++---
 docs/layouts/partials/footer.html             | 14 ++++++-------
 .../partials/navbar-version-selector.html     |  2 +-
 docs/layouts/partials/navbar.html             |  4 ++--
 docs/layouts/partials/sidebar-tree.html       |  4 ++--
 docs/layouts/shortcodes/blocks/feature.html   |  2 +-
 docs/layouts/shortcodes/blocks/value.html     |  6 ++++--
 8 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/docs/assets/scss/_styles_project.scss b/docs/assets/scss/_styles_project.scss
index 00a7680e9c..d00337d8ec 100644
--- a/docs/assets/scss/_styles_project.scss
+++ b/docs/assets/scss/_styles_project.scss
@@ -28,10 +28,16 @@
 
 .long-description {
     font-weight: 600;
-    color: $gray-500;
+    color: #c9d1e0;
     margin-bottom: 2.5rem;
 }
 
+.btn-secondary {
+    color: #1a2744;
+    background: #28beeb;
+    border-color: #28beeb;
+}
+
 .core-values {
     max-width: 80rem;
 }
@@ -65,6 +71,19 @@
     margin-left: -1rem;
 }
 
+footer a {
+    text-decoration: underline;
+    color: inherit;
+}
+
+.td-cover-block a {
+    text-decoration: underline;
+}
+
+.td-box a {
+    text-decoration: underline;
+}
+
 
 @include media-breakpoint-down(md) {
     .value-title {
diff --git a/docs/content/en/_index.html b/docs/content/en/_index.html
index 065e98c006..9d1e0e81a0 100644
--- a/docs/content/en/_index.html
+++ b/docs/content/en/_index.html
@@ -15,13 +15,13 @@
 </div>
 
 <div class="mx-auto">
-	<a class="btn btn-lg btn-primary mr-3 mb-4" target="_blank" href="https://play.pipecd.dev?project=play">
+	<a class="btn btn-lg btn-primary mr-3 mb-4" target="_blank" rel="noopener noreferrer" href="https://play.pipecd.dev?project=play">
 		Try on Playground <i class="fas fa-arrow-alt-circle-right ml-2"></i>
 	</a>
 	<a class="btn btn-lg btn-primary mr-3 mb-4" href="https://pipecd.dev/docs/quickstart/">
 		Quick Start <i class="fas fa-arrow-alt-circle-right ml-2"></i>
 	</a>
-	<a class="btn btn-lg btn-secondary mr-3 mb-4" target="_blank" href="https://github.com/pipe-cd/pipecd">
+	<a class="btn btn-lg btn-secondary mr-3 mb-4" target="_blank" rel="noopener noreferrer" href="https://github.com/pipe-cd/pipecd">
 		GitHub <i class="fab fa-github ml-2 "></i>
 	</a>
     <a class="btn btn-lg btn-primary mr-3 mb-4" href="https://pipecd.dev/docs-v1.0.x/">
@@ -31,7 +31,7 @@
 </div>
 
 <div class="mx-auto">
-	<a class="release-panel" target="_blank" href="https://github.com/pipe-cd/pipecd/releases">
+	<a class="release-panel" target="_blank" rel="noopener noreferrer" href="https://github.com/pipe-cd/pipecd/releases">
 		PipeCD <span class="bolder">{{< blocks/latest_version >}}</span> is now available! Check out the release notes <i class="fas fa-arrow-alt-circle-right ml-2"></i>
 	</a>
 </div>
diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html
index 441dd24f01..5631cf4116 100644
--- a/docs/layouts/partials/footer.html
+++ b/docs/layouts/partials/footer.html
@@ -5,13 +5,13 @@
 {{ if .IsHome }} {{ $text_color = "text-dark" }} {{ end }}
 {{ $cncf_logo := "https://www.cncf.io/wp-content/uploads/2022/05/CNCF_logo_white.svg" }}
 {{ if .IsHome }} {{ $cncf_logo = "https://www.cncf.io/wp-content/uploads/2022/07/cncf-color-bg.svg" }} {{ end }}
-<div class="{{ $bg_color }} row d-print-none">
+<footer class="{{ $bg_color }} row d-print-none">
   <div class="container-fluid py-3 mx-sm-5">
     <div class="row">
       <div class="col-8 py-3 order-sm-2 {{ $text_color }}">
         <a href="https://www.cncf.io/projects/pipecd/" target="_blank">
           <img src="{{ $cncf_logo }}" alt="cncf logo" width="250">
-          <div class="py-2 {{ $text_color }}">PipeCD is a Cloud Native Computing Foundation sandbox project.</div>
+          <p class="py-2 {{ $text_color }}">PipeCD is a Cloud Native Computing Foundation sandbox project.</p>
         </a>
       </div>
       <div class="col-4 order-sm-3 d-flex align-items-center justify-content-center">
@@ -19,8 +19,8 @@
         {{ with index . "developer"}}
         <ul class="list-inline mb-0">
           {{ range . }}
-          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
-            <a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}">
+          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}">
+            <a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}" aria-label="{{ .name }}">
               <i class="{{ .icon }} {{ $text_color }}"></i>
             </a>
           </li>
@@ -30,8 +30,8 @@
         {{ with index . "user"}}
         <ul class="list-inline mb-0">
           {{ range . }}
-          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
-            <a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}">
+          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}">
+            <a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}" aria-label="{{ .name }}">
               <i class="{{ .icon }} {{ $text_color }}"></i>
             </a>
           </li>
@@ -48,4 +48,4 @@
         see <a href="https://www.linuxfoundation.org/trademark-usage/">Trademark Usage</a>.</small>
     </div>
   </div>
-</div>
+</footer>
diff --git a/docs/layouts/partials/navbar-version-selector.html b/docs/layouts/partials/navbar-version-selector.html
index d266b3946d..c51ce5d6d4 100644
--- a/docs/layouts/partials/navbar-version-selector.html
+++ b/docs/layouts/partials/navbar-version-selector.html
@@ -1,7 +1,7 @@
 <a class="nav-link dropdown-toggle navbar-version-menu" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 	{{ (index .Site.Params.versions 1).version }}
 </a>
-<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 	{{ range .Site.Params.versions }}
 	<a class="dropdown-item" href="{{ .url }}">{{ .version }}</a>
 	{{ end }}
diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
index a9c1c95da5..0d2eb0191b 100644
--- a/docs/layouts/partials/navbar.html
+++ b/docs/layouts/partials/navbar.html
@@ -1,5 +1,5 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar" aria-label="Main navigation">
 	{{ if not $cover }}
     <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
 		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
@@ -16,7 +16,7 @@
 				{{ end }}
 				{{ $url := urls.Parse .URL }}
 				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
-				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" rel="noopener noreferrer"{{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
 			</li>
 			{{ end }}
 			{{ if and .Site.Params.versions (not .IsHome) (ne .Section "community") (ne .Section "blog") }}
diff --git a/docs/layouts/partials/sidebar-tree.html b/docs/layouts/partials/sidebar-tree.html
index 25874f4523..9e168ce231 100644
--- a/docs/layouts/partials/sidebar-tree.html
+++ b/docs/layouts/partials/sidebar-tree.html
@@ -5,14 +5,14 @@
   {{ if not .Site.Params.ui.sidebar_search_disable -}}
   <form class="td-sidebar__search d-flex align-items-center">
     {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
   {{ else -}}
   <div id="content-mobile">
   <form class="td-sidebar__search d-flex align-items-center">
     {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
     </button>
   </form>
   </div>
diff --git a/docs/layouts/shortcodes/blocks/feature.html b/docs/layouts/shortcodes/blocks/feature.html
index bbc70268f3..48f2c75118 100644
--- a/docs/layouts/shortcodes/blocks/feature.html
+++ b/docs/layouts/shortcodes/blocks/feature.html
@@ -6,5 +6,5 @@
   </div>
   <p class="h4">{{ .Get "title" | markdownify }}</p>
   <p class="mb-0">{{ .Inner }}</p>
-  {{ with .Get "url" }}<p><a href="{{ . }}">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} …</a></p>{{ end }}
+  {{ with .Get "url" }}<p><a href="{{ . }}" aria-label="{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} - {{ $.Get "title" }}">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} …</a></p>{{ end }}
 </div>
diff --git a/docs/layouts/shortcodes/blocks/value.html b/docs/layouts/shortcodes/blocks/value.html
index 2bb8512672..071604dfff 100644
--- a/docs/layouts/shortcodes/blocks/value.html
+++ b/docs/layouts/shortcodes/blocks/value.html
@@ -1,5 +1,6 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 {{ $value_image := resources.GetMatch (printf "**%s*" .Params.image) }}
+{{ $value_title := .Params.title }}
 
 <div class="row justify-content-center core-value {{ if eq .Params.image_position "right" }} flex-row-reverse {{ end }} border-bottom">
 
@@ -14,6 +15,7 @@
       class="mw-100 h-auto align-self-center"
       width="500"
       height="250"
+      alt="{{ $value_title }}"
       src="{{ $image_resized_500.RelPermalink }}"
       srcset="{{ $image_resized_500.RelPermalink }},
               {{ $image_resized_750.RelPermalink }} 1.5x,
@@ -26,7 +28,7 @@
   {{ end }}
 
   <div class="col-md">
-    <div class="value-title h2">{{ .Params.title }}</div>
-    <p class="value-body">{{ .Inner }}</p>
+    <h2 class="value-title">{{ $value_title }}</h2>
+    <div class="value-body">{{ .Inner }}</div>
   </div>
 </div>