Create Next App

1. Installation

Install the eqlec.tech accessibility package using npm or your preferred package manager:

npm install eqlectech-accessibility

2. Environment Configuration (Optional)

Create a .env.local file at the root of your project and add your Gemini API key (and other relevant sensitive information):

GEMINI_API_KEY=your_gemini_api_key_here

Replace your_gemini_api_key_here with your actual API key. Remember to add .env.local to your .gitignore file to prevent committing secrets.

3. React / Next.js Integration

To integrate eqlec.tech into your React or Next.js application, you typically include the custom element within your main layout component (e.g., layout.tsx in Next.js App Router).

Example using Next.js App Router (src/app/layout.tsx):

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
// Potentially import useState if needed for dynamic logic later
// import { useState } from 'react'; 

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "My App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  // const [someState, setSomeState] = useState(initialValue); // Example useState

  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        {/* Include the eqlec.tech custom element */}
        <eqlec-tech /> 
      </body>
    </html>
  );
}

Place the <eqlec-tech /> tag typically just before the closing </body> tag. While useState isn't strictly required just to render the tag, you might import and use it later if you need to interact with the component dynamically.

Alternative: Basic HTML Integration

For non-React setups or simpler integrations, ensure your build process includes the package and then add the custom HTML tag directly into your main HTML file (e.g., index.html):

<eqlec-tech />

4. TypeScript Configuration

To make TypeScript recognize the <eqlec-tech /> custom element in your JSX, create a type declaration file (e.g., eqlectech-accessibility.d.ts or global.d.ts) in your project's source directory:

// eqlectech-accessibility.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'eqlec-tech': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    // Add any other custom elements if needed
  }
}

Then, ensure this declaration file is included in your TypeScript configuration. Add the file path or a wildcard pattern matching it to the include array in your tsconfig.json:

{
  "compilerOptions": {
    // ... your other options
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "eqlectech-accessibility.d.ts"], 
  // Or use a broader pattern like "src/**/*.d.ts" if applicable
  "exclude": ["node_modules"]
}

Available Accessibility Attributes

When users configure their preferences via the eqlec.tech interface, the following attributes may be dynamically applied to the <body> or relevant elements, enabling specific accessibility features:

enable-high-contrast: Activates a high contrast mode.
enable-large-font: Increases text size for better readability.
enable-sparse-text: Increases spacing between text elements.
enable-screen-reader: Optimizes the site structure and attributes for screen reader compatibility.
enable-live-subtitles: Enables generation of subtitles for audio content (may require additional configuration or API keys).

Your application's CSS or JavaScript can target these attributes to modify the presentation or behavior accordingly (e.g., body[enable-high-contrast] ).