Skip to content

Improve a11y and usage for docs homepage  #628

@HRIDYANSHU054

Description

@HRIDYANSHU054

Problem

The docs homepage currently exposes usability barriers that affect keyboard-only users, screen reader users, and people using touch devices.

What I changed

  • Added semantic landmarks (<header>, <main>, <section>) to make page structure explicit for assistive tech.
  • Added concise alt text for "Cloudinary App Gallery" images.
  • Ensured clear, visible focus styles for keyboard navigation.
  • Increased CTA touch targets to ~44×44px to improve tap usability on mobile.
  • Honored prefers-reduced-motion to reduce motion for users who opt out.

Why this is important

  • Better experience for screen reader and keyboard users — faster navigation and clearer content description.
  • Improves tap accuracy on mobile for CTAs and reduces accidental misses.
  • Reduces friction for contributors and reviewers by enabling the docs to run locally.

How to review / acceptance criteria

  1. Pull the branch and run the docs locally: cd docs && pnpm install && pnpm dev.
  2. On the homepage:
    • Use Tab to navigate and confirm focus rings are visible and contrast is high.
    • Verify gallery images have meaningful alt text (screen reader or inspect markup).
    • Confirm CTAs are at least ~44×44px (inspect element or test on a mobile device / emulation).
  3. Run an automated accessibility scan (Lighthouse or axe) — high-severity issues for the homepage should be reduced.
  4. Confirm the docs build locally without import resolution errors.

Files of interest

  • docs/pages/index.mdx
  • docs/pages/_document.js

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions