Merge pull request #19299 from dvdksn/lighthouse-improvements

site: accessibility improvements

Author: dvdksn

layouts/index.html

@@ -35,8 +35,8 @@ <h1 class="text-2xl">Get Docker</h1>
           </a>
         </div>
         <div class="absolute bottom-0 right-0 origin-bottom-right md:scale-50">
-          <img class="dark:hidden" src="/assets/images/app-wf-light-1.svg" />
-          <img class="hidden dark:block" src="/assets/images/app-wf-dark-1.svg" />
+          <img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-1.svg" />
+          <img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-1.svg" />
         </div>
       </div>
 
@@ -127,8 +127,8 @@ <h2 class="font-medium">Getting started</h2>
             </div>
           </div>
           <div class="absolute bottom-0 right-0 origin-bottom-right sm:scale-75">
-            <img class="dark:hidden" src="/assets/images/app-wf-light-2.svg" />
-            <img class="hidden dark:block" src="/assets/images/app-wf-dark-2.svg" />
+            <img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-2.svg" />
+            <img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-2.svg" />
           </div>
         </div>
         <div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
@@ -152,8 +152,8 @@ <h2 class="font-medium">Featured</h2>
                 <div class="ml-auto sm:col-start-2">
                   {{ $dbcLogoWhite := resources.Get "images/build-cloud-white.svg" }}
                   {{ $dbcLogoLight := resources.Get "images/build-cloud-light.svg" }}
-                  <img class="hidden h-full w-full dark:block" src="{{ $dbcLogoWhite.Permalink }}" />
-                  <img class="h-full w-full dark:hidden" src="{{ $dbcLogoLight.Permalink }}" />
+                  <img class="hidden h-full w-full dark:block" alt="Docker Build Cloud logo" src="{{ $dbcLogoWhite.Permalink }}" />
+                  <img class="h-full w-full dark:hidden" alt="Docker Build Cloud logo" src="{{ $dbcLogoLight.Permalink }}" />
                 </div>
               </div>
             </div>

layouts/partials/footer.html

@@ -15,34 +15,51 @@
       <div class="flex gap-4">
         <a
           class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
+          title="X (Twitter)"
           href="http://twitter.com/docker/">
           {{ (resources.Get "images/TwitterCircle.svg").Content | safe.HTML }}
         </a>
         <a
           class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
+          title="LinkedIn"
           href="https://www.linkedin.com/company/docker">
           {{ (resources.Get "images/LinkedinCircle.svg").Content | safe.HTML }}
         </a>
         <a
           class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
+          title="Instagram"
           href="https://www.instagram.com/dockerinc/">
           {{ (resources.Get "images/InstagramCircle.svg").Content | safe.HTML }}
         </a>
         <a
           class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
+          title="YouTube"
           href="http://www.youtube.com/user/dockerrun">
           {{ (resources.Get "images/YoutubeCircle.svg").Content | safe.HTML }}
         </a>
         <a
           class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
+          title="Facebook"
           href="https://www.facebook.com/docker.run">
           {{ (resources.Get "images/FacebookCircle.svg").Content | safe.HTML }}
         </a>
       </div>
       <div class="flex items-center gap-4">
-        <a class="underline-offset-2 hover:underline" href="https://www.docker.com/legal/docker-terms-service">Terms of Service</a>
-        <a class="underline-offset-2 hover:underline" href="https://www.dockerstatus.com/">Status</a>
-        <a class="underline-offset-2 hover:underline" href="https://www.docker.com/legal">Legal</a>
+        <a
+          class="underline-offset-2 hover:underline"
+          title="Docker Terms of Service"
+          href="https://www.docker.com/legal/docker-terms-service"
+          >Terms of Service</a>
+        <a
+          class="underline-offset-2 hover:underline"
+          title="Docker Systems Status Page"
+          href="https://www.dockerstatus.com/"
+          >Status</a>
+        <a
+          class="underline-offset-2 hover:underline"
+          title="Docker Legal Terms"
+          href="https://www.docker.com/legal"
+          >Legal</a>
       </div>
     </div>
   </div>

layouts/partials/header.html

@@ -2,7 +2,7 @@
   <div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
     <div class="flex h-full items-center gap-8 md:gap-2">
       {{ if not .IsHome }}
-      <button x-data tabindex="4" @click="() => {
+      <button x-data @click="() => {
       $store.showSidebar = ! $store.showSidebar;
       const sidebar = document.querySelector('#sidebar');
       if ($store.showSidebar) {
@@ -16,7 +16,7 @@
       {{ end }}
       <div>
         {{/* main logo */}}
-        <a href="{{ site.BaseURL }}">
+        <a title="Docker Docs home page" href="{{ site.BaseURL }}">
           <div>
             {{- (resources.Get "images/docs-logo-white-full.svg").Content | safe.HTML -}}
           </div>
@@ -26,7 +26,7 @@
     </div>
     <div class="flex items-center gap-6">
       <div id="docsearch"></div>
-      <button id="theme-switch" tabindex="1" class="svg-icon"
+      <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
         localStorage.setItem('theme-preference', value);
         document.firstElementChild.className = value;