From 6cd311ad9d0749165f9fe048e6c6bfa7bfdf47f4 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Sat, 3 Feb 2024 16:55:26 +0100
Subject: [PATCH 1/4] a11y: add alt texts to images on home page

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index c97a78ef5ebe..f8b240869242 100644
--- a/layouts/index.html
+++ b/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>

From 723006b12b524f2cddc0ca5e6af9e77960a336d4 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:02:24 +0100
Subject: [PATCH 2/4] a11y: add link titles in header, footer

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/footer.html | 23 ++++++++++++++++++++---
 layouts/partials/header.html |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 978f5854e342..c3bcee2fe75f 100644
--- a/layouts/partials/footer.html
+++ b/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>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6dc7ddbaead9..8544e7bf9a94 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -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>

From 14f905327b1b794ec25f457fa9da3af405450f97 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:03:48 +0100
Subject: [PATCH 3/4] a11y: remove explicit tabindex on buttons

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/header.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8544e7bf9a94..2fe791c6992f 100644
--- a/layouts/partials/header.html
+++ b/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) {
@@ -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 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;

From c1cd9f7f844a69383863aff8ab089ca41bc01cfd Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:05:36 +0100
Subject: [PATCH 4/4] a11y: add aria label to theme switch button

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/partials/header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2fe791c6992f..00ac424df7dd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -26,7 +26,7 @@
     </div>
     <div class="flex items-center gap-6">
       <div id="docsearch"></div>
-      <button id="theme-switch" 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;