From f7f59aa6008b20baa69c1cea77c2aa0105c77c93 Mon Sep 17 00:00:00 2001
From: code-sharad <codesharad@gmail.com>
Date: Thu, 17 Sep 2026 02:05:20 +0530
Subject: [PATCH] docs: improve a11y and usability for docs homepage

- add semantic landmarks (header, main, section) for assistive tech
- add alt text for Cloudinary App Gallery images
- add visible focus-visible styles for keyboard navigation
- increase CTA touch targets to 44px
- honor prefers-reduced-motion
- fix nested anchor in Visit App Gallery button

Fixes #628
---
 docs/components/Button/Button.js |  6 +++---
 docs/pages/_app.mdx              | 10 ++++++----
 docs/pages/index.mdx             | 18 +++++++++---------
 docs/styles/global.scss          | 14 +++++++++++++-
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/docs/components/Button/Button.js b/docs/components/Button/Button.js
index 84b88ab2..22acd138 100644
--- a/docs/components/Button/Button.js
+++ b/docs/components/Button/Button.js
@@ -4,8 +4,8 @@ import { cn } from '../../lib/utils';
 
 const Button = ({ children, className = '', href, onClick }) => {
   let buttonColor = 'text-white bg-primary hover:bg-blue-600';
-  
-  const buttonStyles = cn('inline-block rounded py-2.5 px-6 text-lg font-bold uppercase', buttonColor, className);
+
+  const buttonStyles = cn('inline-block rounded py-2.5 px-6 text-lg font-bold uppercase min-h-[44px]', buttonColor, className);
 
   if ( href ) {
     return (
@@ -22,4 +22,4 @@ const Button = ({ children, className = '', href, onClick }) => {
   )
 }
 
-export default Button;
\ No newline at end of file
+export default Button;
diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx
index 55cc73e5..90eea1da 100644
--- a/docs/pages/_app.mdx
+++ b/docs/pages/_app.mdx
@@ -9,15 +9,17 @@ export default function Nextra({ Component, pageProps }) {
   return (
     <>
       <GoogleAnalytics trackPageViews />
-      <div className="bg-primary">
+      <header className="bg-primary">
         <Link className="block text-center py-2" href="/changelog">
           <p className="text-white font-semibold text-xs">
             Next Cloudinary v6 now available! <span className="underline underline-offset-2">View Changelog</span>
           </p>
         </Link>
-      </div>
-      <Component {...pageProps} />
+      </header>
+      <main>
+        <Component {...pageProps} />
+      </main>
       <Analytics />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 7e2ed4c8..b88fad06 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -19,7 +19,7 @@ import Button from '../components/Button';
   twitterTitle="Next Cloudinary"
 />
 
-<div className="text-center max-w-xl mx-auto mt-14 mb-20 md:mt-36 md:mb-44">
+<header className="text-center max-w-xl mx-auto mt-14 mb-20 md:mt-36 md:mb-44">
   <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold">Next Cloudinary</h1>
   <p className="text-xl mt-8">High-performance image and video delivery and uploading at scale in Next.js powered by Cloudinary.</p>
 
@@ -71,9 +71,9 @@ import Button from '../components/Button';
     />
   </p>
   <p className="mt-10"><Button href="/installation">Get Started</Button></p>
-</div>
+</header>
 
-<div className="text-center max-w-4xl mx-auto my-14 md:my-36">
+<section className="text-center max-w-4xl mx-auto my-14 md:my-36">
   <h2 className="text-4xl font-bold">What's Inside?</h2>
 
   <ul className="grid sm:grid-cols-2 gap-16 sm:gap-6 md:gap-8 lg:gap-16 mt-12 md:mt-20">
@@ -146,7 +146,7 @@ import Button from '../components/Button';
           height="600"
           src="https://res.cloudinary.com/nextjsnpm/image/upload/v1743523379/images/photo-crate.png"
           sizes="50w"
-          alt=""
+          alt="Photo Crate app screenshot"
         />
       </a>
       <h3 className="text-2xl font-semibold mb-4">Photo Crate</h3>
@@ -159,7 +159,7 @@ import Button from '../components/Button';
           height="600"
           src="https://res.cloudinary.com/nextjsnpm/image/upload/v1743523378/images/cloudy-cam.png"
           sizes="50w"
-          alt=""
+          alt="Cloudy Cam app screenshot"
         />
       </a>
       <h3 className="text-2xl font-semibold mb-4">Cloudy Cam</h3>
@@ -172,7 +172,7 @@ import Button from '../components/Button';
           height="600"
           src="https://res.cloudinary.com/nextjsnpm/image/upload/v1743523378/images/imgto-xyz.png"
           sizes="50w"
-          alt=""
+          alt="Imgto.xyz app screenshot"
         />
       </a>
       <h3 className="text-2xl font-semibold mb-4">Imgto.xyz</h3>
@@ -185,14 +185,14 @@ import Button from '../components/Button';
           height="600"
           src="https://res.cloudinary.com/nextjsnpm/image/upload/v1743523378/images/image-carbron.png"
           sizes="50w"
-          alt=""
+          alt="Image Carbon app screenshot"
         />
       </a>
       <h3 className="text-2xl font-semibold mb-4">Image Carbon</h3>
     </li>
   </ul> 
-  <Button className="mt-10"><a href="https://app-gallery.cloudinary.com/">Visit App Gallery</a></Button>
-</div>
+  <Button className="mt-10" href="https://app-gallery.cloudinary.com/">Visit App Gallery</Button>
+</section>
 
 <div className="text-center max-w-2xl mx-auto my-20 md:my-44">
   <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold md:leading-[4rem]">Transform &amp; Deliver at Scale with Next Cloudinary</h2>
diff --git a/docs/styles/global.scss b/docs/styles/global.scss
index be979f6b..5d25762a 100644
--- a/docs/styles/global.scss
+++ b/docs/styles/global.scss
@@ -27,4 +27,16 @@ pre {
 
 .nextra-callout a {
   text-decoration: underline;
-}
\ No newline at end of file
+}
+
+:focus-visible {
+  outline: 2px solid #0284c7; /* sky-600 */
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}