Accessibility NextJS Starter Kit

This Next.js Starter Kit offers a simple and practical solution for integrating an accessibility plugin into your project. With it, you can get started quickly, saving time and focusing on the most important tasks. I have configured and included all the essential libraries and tools, allowing you to focus on development while making your site more inclusive and accessible for everyone.

Key Features

• Next.js v15 with Server Actions for optimized server-side logic and performance.
• Tailwind CSS for streamlined and responsive styling.
• Shadcn/ui for pre-built components and enhanced styling options.
• Built-in SEO capabilities for improved search engine visibility right out of the box.
• Dark mode support with an easy-to-use toggle button.
• Preconfigured fonts for a polished and consistent design.
• ESLint integration for efficient code linting and error detection.
• Type safety with TypeScript to ensure robust and error-free code.
• Comprehensive documentation to facilitate easy usage and customization.
• Accessibility plugin to ensure your website is usable by all users, regardless of abilities.

Accessibility Plugin

This project includes an accessibility plugin designed to make your site more inclusive and accessible. The plugin adds essential features such as:

• Font Control:

  • Adjust font size to improve readability.
  • Control line spacing for better text clarity.
  • Modify letter spacing to enhance accessibility for users with visual impairments.

• Color Control:

  • Adjust saturation for better color perception.
  • Modify contrast to improve text and background visibility.
  • Toggle between light and dark modes for visual comfort.

• Optimized Screen Reader Support: Ensures content is accessible to visually impaired users.

• Visible Focus Management: Enables efficient navigation using only the keyboard.

• Alt Text for Images: Ensures all visual content is effectively described.

How to Use

1. Clone the repository:

   git clone --depth=1 https://github.com/bragap/nextjs-accessibility-starter your-project-name
   
   cd your-project-name

2. Install the dependencies:

   npm install

3. Run the project:

   npm run dev

4. Access the site at http://localhost:3000.

Contributions

Contributions are welcome! If you identify issues or wish to improve accessibility or other aspects of the project, feel free to open an issue or submit a pull request.

Maintainer

Pedro Braga