Fixed accessibility for images and links

meshery · Dec 4, 2024 · 52ec84f · 52ec84f
1 parent 1ac7116
commit 52ec84f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/_includes/features.html b/_includes/features.html
@@ -129,7 +129,7 @@ <h2 class="feature-title">Manage infra performance with <span class="special-tex
     <div class="container flex">
         <div class="text ">
             <img src="/assets/images/kanvas-icon-color.svg" style="max-width:20%;position:relative;float:left;
-                    margin-right:20px;margin-bottom: 10px;" loading="lazy" />
+                    margin-right:20px;margin-bottom: 10px;" loading="lazy" alt="kanvas image" />
             <h2 class="feature-title">See changes to your infra <span class="special-text">before you merge</span></h2>
             <p>Get snapshots of your infrastructure directly in your PRs. Preview your deployment, view changes pull request-to-pull request and get infrastructure snapshots within your PRs by connecting Kanvas to your GitHub repositories.</p>
             <!-- <ul style="line-height: 1.5em;height: auto;text-align: left; color: var(--color-secondary-light)">
@@ -150,7 +150,8 @@ <h2 class="feature-title">See changes to your infra <span class="special-text">b
                         <div class="gradient-box-before">Before</div>
                     </div>
                 </div>
-                <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
+                <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider" aria-labelledby="gradient-box-before gradient-box-after">
+                >
                 <div class='slider-button'></div>
             </div>
     </div>
@@ -179,7 +180,7 @@ <h2 class="feature-title">{{ features.title }}</span></h2>
     <div class="container flex">
         <div class="text ">
             <img src="{{ features.logo }}" style="max-width:30%;position:relative;float:left;
-                    margin-right:20px;margin-bottom: 10px;" alt="{{ features.imageDescription }}" loading="lazy" />
+                    margin-right:20px;margin-bottom: 10px;" alt="{{ features.imageDescription | Webassembly based Envoy Filters }}" loading="lazy" />
             <h2 class="feature-title">{{ features.title }}</h2>
             <p>{{ features.description }}</p>
         </div>
@@ -192,7 +193,7 @@ <h2 class="feature-title">{{ features.title }}</h2>
         </div> -->
         <div class="image flex" style="flex-flow: column wrap;">
             <div align="center" style="margin-top: 3rem;">
-                <button id="video-modal" class="link recording-link" style="width:100%"><img
+                <button id="video-modal" class="link recording-link" style="width:100%" aria-label="Envoy WASM Filter Management button"><img
                         src="{{ features.videoPoster }}" loading="lazy" ></button>
                 <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
                     in-action)</p> -->
@@ -214,8 +215,8 @@ <h2 class="feature-title">{{ features.title }}</h2>
         </div>
         <div class="image flex">
             <a style="width: 100%;" href="{{ features.image }}" data-fancybox="images"
-                data-caption="Webassembly based Envoy Filters">
-                <img src="{{ features.image }}" class="screenshot" loading="lazy" />
+                data-caption="Webassembly based Envoy Filters" aria-label="Webassembly based Envoy Filters">
+                <img src="{{ features.image }}" class="screenshot" loading="lazy" alt="Webassembly based Envoy Filter image" />
             </a>
         </div>
     </div>
@@ -257,7 +258,7 @@ <h2 class="feature-title">{{ features.title }}</h2>
         </div>
         <div class="image flex" style="flex-flow: column wrap;">
             <div align="center" style="margin-top: 3rem;">
-                <button id="video-modal" class="link recording-link" style="width:100%"><img
+                <button id="video-modal" class="link recording-link" style="width:100%" aria-label="cloud native design pattern video"><img
                         src="{{ features.videoPoster }}" loading="lazy" class="screenshot"></button>
                 <!-- <p style="font-size: 1rem;margin:0rem;padding:0rem;color:#666;font-style: italic;">(excerpt: patterns
                     in-action)</p> -->

diff --git a/_includes/header.html b/_includes/header.html
@@ -143,7 +143,8 @@
         <img class="nav-text" id="logo-dark-light"
           src="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
           data-logo-for-dark="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-moon.png"
-          data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png" />
+          data-logo-for-light="{{ site.baseurl }}/assets/images/nav-icons/mode-toggle-icon-sun.png" 
+          alt="colour-theme-logo"/>
       </div>
     </div>
   </header>

diff --git a/_includes/home-page.html b/_includes/home-page.html
@@ -106,7 +106,7 @@ <h1 style="margin: 0rem 0rem 1rem 0rem;">the <span class="special-text" style="a
 			<div class="ribbon"><span>video</span></div>
 			<a href="https://www.youtube.com/watch?v=Do7htKrRzDA" data-fancybox="images"
 				data-caption="cloud native management plane" title="watch video">
-				<video class="box-shadow-primary" width="100%" autoplay loop muted>
+				<video class="box-shadow-primary" width="100%" autoplay loop muted data-caption="cloud native management plane video">
 					<source src="{{ site.baseurl }}/assets/videos/hero-img.webm" type="video/webm" />
 				</video>
 			</a>

diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
@@ -46,7 +46,8 @@ <h2>
                 <div class="card-front">
                 <img src="${iconURL}" loading="lazy" id="logo-dark-light"
                 data-logo-for-dark="${iconURL}"
-                data-logo-for-light="${iconURL}" />
+                data-logo-for-light="${iconURL}" 
+                alt="${item.name}-card-image"/>
                 </div>
                 <div class="card-back">
                 <p> ${item.name} </p>

diff --git a/_includes/testimonials.html b/_includes/testimonials.html
@@ -29,7 +29,7 @@ <h2>Hear what other users have to say...</h2>
           <div class="type-two-quote-pattern">
             <div class="type-two-quote-qmark">&#10077;</div>
           </div>
-          <div class="type-two-quote-userpic"><img src="{{ testimonial.image }}"></div>
+          <div class="type-two-quote-userpic"><img src="{{ testimonial.image }}" alt="testimonial image"></div>
           <div class="type-two-quote-base">
             <blockquote class="type-two-quote-text">{{ testimonial.quote }}</blockquote>
             <div class="type-two-quote-meta">