Skip to content

docs: improve a11y and usability for docs homepage - #660

Open
code-sharad wants to merge 1 commit into
cloudinary-community:mainfrom
code-sharad:docs/a11y-homepage-628
Open

code-sharad wants to merge 1 commit into
cloudinary-community:mainfrom
code-sharad:docs/a11y-homepage-628

Conversation

@code-sharad

Copy link
Copy Markdown

Fixes #628

Implemented all acceptance criteria from the issue:

  1. Semantic landmarks (<header>, <main>, <section>) for assistive tech
  2. Concise alt text for Cloudinary App Gallery images
  3. Visible :focus-visible styles for keyboard navigation
  4. CTA touch targets ≥ 44px on mobile
  5. prefers-reduced-motion support
  6. Fixed nested <a> inside <Button> (invalid HTML on the App Gallery CTA)

Files changed:

  • docs/pages/index.mdx
  • docs/pages/_app.mdx
  • docs/styles/global.scss
  • docs/components/Button/Button.js

Verified locally with pnpm dev — Tab focus, landmarks, and Lighthouse a11y all check out.

- 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 cloudinary-community#628
@vercel

vercel Bot commented Sep 16, 2026

Copy link
Copy Markdown

@code-sharad is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

@PaulBoye-py PaulBoye-py left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hello @code-sharad, the alt text fixes, focus styles, touch targets, reduced-motion support, and nested anchor fix are all good improvements.

One issue: the PR adds a <header> in both _app.mdx (changelog banner) and index.mdx (hero section), resulting in two <header> landmarks on the same page. Consider changing the hero wrapper in index.mdx to <section> instead as the changelog banner <header> in _app.mdx is the more appropriate use of the landmark.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve a11y and usage for docs homepage

2 participants