npm package: @haktantekin/noblock
Description: Free accessibility widget for your website
Author: Haktan Tekin
Latest version: 1.0.15

﻿# NoBlock - Free Accessibility Widget

**Author:** Haktan Tekin - [haktantekin.com](https://haktantekin.com)  
**GitHub:** [haktantekin/noblock](https://github.com/haktantekin/noblock)

NoBlock is a free, lightweight accessibility widget that helps users customize their browsing experience. It provides features for visual accessibility, readability, and navigation improvements.

**✨ Zero Dependencies:** Works without Tailwind CSS or any UI framework!

## 1.0.15
- Reset button now fixed at the bottom of the panel (content scrolls above it)
- Profile items show 1px border when active (uses primary color from `color` prop)
- Profile items have 1px white border when inactive for consistent sizing
- Clicking anywhere on a profile row now toggles it (not just the switch button)

## 1.0.14
- Added `styleType` prop for custom design themes (e.g., `styleType="hfkb"` enables gradient styling)
- Default styling uses solid colors from `color` prop; gradient effects are only applied with specific styleType values
- Added `contentSectionTitle` prop to customize "İçerik Ayarları" heading
- Added profile label props (labelElderlyProfile, labelSeizureSafeProfile, etc.) to customize profile names
- Switch toggle now shows X icon (inactive) and check icon (active) inside thumb
- Added Accessibility Profiles section with 10 predefined profiles (Elderly, Seizure Safe, Vision Impaired, etc.)
- Added profile icon props (iconElderlyProfile, iconSeizureSafeProfile, etc.) for custom SVG icons
- Added profile visibility props (elderlyProfileVisible, seizureSafeProfileVisible, etc.) to show/hide profiles
- Added profile section title customization (profilesSectionTitle)
- Mobile fullscreen support for widget panel
- Added visibility props for all settings (fontSizeVisible, lineHeightVisible, letterSpacingVisible)
- Added visibility props for all features (highContrastVisible, invertColorsVisible, grayscaleVisible, etc.)
- All visibility props default to `true` - set to `false` to hide specific features
- Allows complete customization of which accessibility options are displayed
- Added custom icon props for all widget elements (mainIcon, closeIcon, fontSizeIcon, lineHeightIcon, letterSpacingIcon)
- Added feature toggle icons (featureActiveIcon, featureInactiveIcon)
- Added feature-specific icon props (iconHighContrast, iconInvertColors, iconGrayscale, etc.)
- All icons now accept React.ReactNode (SVG elements) for full customization

## 1.0.13
- Added `iconWidth` and `iconHeight` props to customize widget button size
- Added `features` prop to customize which accessibility features are displayed
- Fixed TypeScript JSX component type definitions
- Improved CSS with max-width/max-height for better size control

## 1.0.12
- Added Alternative Text helper (auto-derives and outlines alt text when toggled).
- Added Screen Reader helper using SpeechSynthesis with focus/click readouts and highlights.
- Added Mute Sounds, Reading Guide, Reading Mask, and Cognitive Mode toggles with corresponding styles and cleanup.


## Features

- **High Contrast** - Increase contrast for better visibility
- **Invert Colors** - Reverse colors for dark mode effect
- **Grayscale** - Remove colors for color blindness support
- **Readable Font** - Switch to more accessible Arial font
- **Underline Links** - Make all links underlined
- **Large Cursor** - Make mouse cursor more visible
- **Pause Animations** - Disable page animations
- **Simplify Page** - Remove background images
- **Dyslexia Friendly** - Apply dyslexia-friendly settings
- **Hide Images** - Disable all images on page
- **Alternative Text Helper** - Auto-derive and outline alt text
- **Screen Reader Helper** - Read focused/clicked elements aloud
- **Mute Sounds** - Silence audio and video
- **Reading Guide** - Floating guide line following the pointer
- **Reading Mask** - Dim surroundings with adjustable window
- **Cognitive Mode** - Calmer layout for cognitive accessibility
- **Font Size** - Adjust text size (90% - 130%)
- **Line Height** - Increase line spacing (1.2 - 2.5)
- **Letter Spacing** - Add space between characters (0 - 0.2em)

## Installation

**NPM Package:** [@haktantekin/noblock](https://www.npmjs.com/package/@haktantekin/noblock)

```bash
npm install @haktantekin/noblock
```

### React/Next.js Usage

```bash
npm install @haktantekin/noblock
```

Then use the component:

```jsx
import { AccessibilityWidget } from '@haktantekin/noblock'

export default function App() {
  return (
    <>
      <AccessibilityWidget 
        title="Accessibility"
        resetText="Reset"
        color="#10366e"
      />
      {/* Your page content */}
    </>
  )
}
```

**✨ CSS Auto-Loading:** Styles are automatically injected into the page when the component mounts - no manual CSS imports needed!

### Full Configuration Example

```jsx
<AccessibilityWidget 
  className="custom-widget"
  style={{ zIndex: 999999 }}
  title="Accessibility"
  resetText="Reset"
  fontSize={1}
  lineHeight={1.5}
  letterSpacing={0}
  color="#10366e"
  iconWidth="48px"
  iconHeight="48px"
  
  // Section Titles
  contentSectionTitle="Content Settings"
  profilesSectionTitle="Accessibility Profiles"
  
  // Typography Labels
  fontSizeLabel="Font Size"
  lineHeightLabel="Line Height"
  letterSpacingLabel="Letter Spacing"
  
  // Feature Labels
  labelHighContrast="High Contrast"
  labelInvertColors="Invert Colors"
  labelGrayscale="Grayscale"
  labelReadableFont="Readable Font"
  labelUnderlineLinks="Underline Links"
  labelLargeCursor="Large Cursor"
  labelPauseAnimations="Pause Animations"
  labelSimplifyPage="Simplify Page"
  labelDyslexiaFriendly="Dyslexia Friendly"
  labelHideImages="Hide Images"
  labelMuteSounds="Mute Sounds"
  labelReadingGuide="Reading Guide"
  labelReadingMask="Reading Mask"
  labelCognitiveMode="Cognitive Mode"
  labelAlternativeText="Alternative Text"
  labelScreenReader="Screen Reader"
  
  // Profile Labels
  labelElderlyProfile="Elderly Profile"
  labelSeizureSafeProfile="Seizure Safe Profile"
  labelVisionImpairedProfile="Vision Impaired Profile"
  labelCognitiveDisabilityProfile="Cognitive Disability Profile"
  labelBlindProfile="Blind Profile"
  labelDyslexiaProfile="Dyslexia Profile"
  labelColorBlindProfile="Color Blind Profile"
  labelMotorImpairedProfile="Motor Impaired Profile"
  labelAdhdProfile="ADHD Profile"
  labelParkinsonProfile="Parkinson Profile"
  
  // Visibility Props (all default to true)
  fontSizeVisible={true}
  lineHeightVisible={true}
  letterSpacingVisible={true}
  highContrastVisible={true}
  invertColorsVisible={true}
  grayscaleVisible={true}
  readableFontVisible={true}
  underlineLinksVisible={true}
  largeCursorVisible={true}
  pauseAnimationsVisible={true}
  simplifyPageVisible={true}
  dyslexiaFriendlyVisible={true}
  hideImagesVisible={true}
  muteSoundsVisible={true}
  readingGuideVisible={true}
  readingMaskVisible={true}
  cognitiveModeVisible={true}
  alternativeTextVisible={true}
  screenReaderVisible={true}
  
  // Profile Visibility (all default to true)
  elderlyProfileVisible={true}
  seizureSafeProfileVisible={true}
  visionImpairedProfileVisible={true}
  cognitiveDisabilityProfileVisible={true}
  blindProfileVisible={true}
  dyslexiaProfileVisible={true}
  colorBlindProfileVisible={true}
  motorImpairedProfileVisible={true}
  adhdProfileVisible={true}
  parkinsonProfileVisible={true}
  
  // Custom Icons (React nodes / SVG elements)
  mainIcon={<YourMainIcon />}
  closeIcon={<YourCloseIcon />}
  fontSizeIcon={<YourFontSizeIcon />}
  lineHeightIcon={<YourLineHeightIcon />}
  letterSpacingIcon={<YourLetterSpacingIcon />}
  
  // Feature Icons
  iconHighContrast={<YourHighContrastIcon />}
  iconInvertColors={<YourInvertColorsIcon />}
  iconGrayscale={<YourGrayscaleIcon />}
  iconReadableFont={<YourReadableFontIcon />}
  iconUnderlineLinks={<YourUnderlineLinksIcon />}
  iconLargeCursor={<YourLargeCursorIcon />}
  iconPauseAnimations={<YourPauseAnimationsIcon />}
  iconSimplifyPage={<YourSimplifyPageIcon />}
  iconDyslexiaFriendly={<YourDyslexiaFriendlyIcon />}
  iconHideImages={<YourHideImagesIcon />}
  iconMuteSounds={<YourMuteSoundsIcon />}
  iconReadingGuide={<YourReadingGuideIcon />}
  iconReadingMask={<YourReadingMaskIcon />}
  iconCognitiveMode={<YourCognitiveModeIcon />}
  iconAlternativeText={<YourAlternativeTextIcon />}
  iconScreenReader={<YourScreenReaderIcon />}
  
  // Profile Icons
  iconElderlyProfile={<YourElderlyProfileIcon />}
  iconSeizureSafeProfile={<YourSeizureSafeProfileIcon />}
  iconVisionImpairedProfile={<YourVisionImpairedProfileIcon />}
  iconCognitiveDisabilityProfile={<YourCognitiveDisabilityProfileIcon />}
  iconBlindProfile={<YourBlindProfileIcon />}
  iconDyslexiaProfile={<YourDyslexiaProfileIcon />}
  iconColorBlindProfile={<YourColorBlindProfileIcon />}
  iconMotorImpairedProfile={<YourMotorImpairedProfileIcon />}
  iconAdhdProfile={<YourAdhdProfileIcon />}
  iconParkinsonProfile={<YourParkinsonProfileIcon />}
/>
```


## Configuration Props

All props are optional. Here are the available customization options:

### Basic Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | string | `''` | Additional CSS classes for custom styling |
| `style` | CSSProperties | `undefined` | Inline styles for the widget container |
| `title` | string | `'NoBlock'` | Panel header text |
| `resetText` | string | `'Sıfırla'` | Reset button text |
| `color` | string | `'#10366e'` | Primary theme color (buttons, sliders, active states) |
| `iconUrl` | string | `undefined` | Custom icon URL for widget button (if not provided, default icon is used) |
| `styleType` | string | `undefined` | Custom design theme identifier. Use for special styling variations (e.g., `'hfkb'` enables gradient header and button styling). When not set, solid colors are used. |

### Section Titles

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `contentSectionTitle` | string | `'İçerik Ayarları'` | Content settings section title |
| `profilesSectionTitle` | string | `'Erişilebilirlik Profilleri'` | Profiles section title |

### Initial Values

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `fontSize` | number | `1` | Initial font size (1 = 100%) |
| `lineHeight` | number | `1.5` | Initial line height |
| `letterSpacing` | number | `0` | Initial letter spacing (em) |

### Typography Labels

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `fontSizeLabel` | string | `'Font Size'` | Font size section label |
| `lineHeightLabel` | string | `'Line Height'` | Line height section label |
| `letterSpacingLabel` | string | `'Letter Spacing'` | Letter spacing section label |

### Feature Labels

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `labelHighContrast` | string | `'High Contrast'` | High contrast button label |
| `labelInvertColors` | string | `'Invert Colors'` | Invert colors button label |
| `labelGrayscale` | string | `'Grayscale'` | Grayscale button label |
| `labelReadableFont` | string | `'Readable Font'` | Readable font button label |
| `labelUnderlineLinks` | string | `'Underline Links'` | Underline links button label |
| `labelLargeCursor` | string | `'Large Cursor'` | Large cursor button label |
| `labelPauseAnimations` | string | `'Pause Animations'` | Pause animations button label |
| `labelSimplifyPage` | string | `'Simplify Page'` | Simplify page button label |
| `labelDyslexiaFriendly` | string | `'Dyslexia Friendly'` | Dyslexia friendly button label |
| `labelHideImages` | string | `'Hide Images'` | Hide images button label |
| `labelAlternativeText` | string | `'Alternative Text'` | Alternative text helper button label |
| `labelScreenReader` | string | `'Screen Reader'` | Screen reader helper button label |
| `labelMuteSounds` | string | `'Mute Sounds'` | Mute audio/video button label |
| `labelReadingGuide` | string | `'Reading Guide'` | Reading guide toggle label |
| `labelReadingMask` | string | `'Reading Mask'` | Reading mask toggle label |
| `labelCognitiveMode` | string | `'Cognitive Mode'` | Cognitive mode toggle label |

### Custom Icons

You can customize all icons using React nodes (SVG elements). All icon props accept `React.ReactNode`.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mainIcon` | ReactNode | `<AccessibilityIcon />` | Main widget button icon |
| `closeIcon` | ReactNode | `<CloseIcon />` | Panel close button icon |
| `fontSizeIcon` | ReactNode | SVG icon | Font size setting icon |
| `lineHeightIcon` | ReactNode | SVG icon | Line height setting icon |
| `letterSpacingIcon` | ReactNode | SVG icon | Letter spacing setting icon |
| `featureActiveIcon` | ReactNode | `'●'` | Icon for active feature toggle |
| `featureInactiveIcon` | ReactNode | `'○'` | Icon for inactive feature toggle |

### Feature-Specific Icons

Each feature can have its own custom icon:

| Prop | Type | Description |
|------|------|-------------|
| `iconHighContrast` | ReactNode | High contrast feature icon |
| `iconInvertColors` | ReactNode | Invert colors feature icon |
| `iconGrayscale` | ReactNode | Grayscale feature icon |
| `iconReadableFont` | ReactNode | Readable font feature icon |
| `iconUnderlineLinks` | ReactNode | Underline links feature icon |
| `iconLargeCursor` | ReactNode | Large cursor feature icon |
| `iconPauseAnimations` | ReactNode | Pause animations feature icon |
| `iconSimplifyPage` | ReactNode | Simplify page feature icon |
| `iconDyslexiaFriendly` | ReactNode | Dyslexia friendly feature icon |
| `iconHideImages` | ReactNode | Hide images feature icon |
| `iconMuteSounds` | ReactNode | Mute sounds feature icon |
| `iconReadingGuide` | ReactNode | Reading guide feature icon |
| `iconReadingMask` | ReactNode | Reading mask feature icon |
| `iconCognitiveMode` | ReactNode | Cognitive mode feature icon |
| `iconAlternativeText` | ReactNode | Alternative text feature icon |
| `iconScreenReader` | ReactNode | Screen reader feature icon |

### Feature Visibility Props

You can show or hide any setting or feature using visibility props. All visibility props default to `true`.

#### Settings Visibility

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `fontSizeVisible` | boolean | `true` | Show/hide font size setting |
| `lineHeightVisible` | boolean | `true` | Show/hide line height setting |
| `letterSpacingVisible` | boolean | `true` | Show/hide letter spacing setting |

#### Feature Visibility

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `highContrastVisible` | boolean | `true` | Show/hide high contrast feature |
| `invertColorsVisible` | boolean | `true` | Show/hide invert colors feature |
| `grayscaleVisible` | boolean | `true` | Show/hide grayscale feature |
| `readableFontVisible` | boolean | `true` | Show/hide readable font feature |
| `underlineLinksVisible` | boolean | `true` | Show/hide underline links feature |
| `largeCursorVisible` | boolean | `true` | Show/hide large cursor feature |
| `pauseAnimationsVisible` | boolean | `true` | Show/hide pause animations feature |
| `simplifyPageVisible` | boolean | `true` | Show/hide simplify page feature |
| `dyslexiaFriendlyVisible` | boolean | `true` | Show/hide dyslexia friendly feature |
| `hideImagesVisible` | boolean | `true` | Show/hide hide images feature |
| `muteSoundsVisible` | boolean | `true` | Show/hide mute sounds feature |
| `readingGuideVisible` | boolean | `true` | Show/hide reading guide feature |
| `readingMaskVisible` | boolean | `true` | Show/hide reading mask feature |
| `cognitiveModeVisible` | boolean | `true` | Show/hide cognitive mode feature |
| `alternativeTextVisible` | boolean | `true` | Show/hide alternative text feature |
| `screenReaderVisible` | boolean | `true` | Show/hide screen reader feature |

### Accessibility Profiles Section

The widget includes predefined accessibility profiles that apply multiple settings at once.

#### Profile Section Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `profilesSectionVisible` | boolean | `true` | Show/hide the entire profiles section |
| `profilesSectionTitle` | string | `'Erişilebilirlik Profilleri'` | Profiles section title |

#### Profile Labels

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `labelElderlyProfile` | string | `'Yaşlılık Profili'` | Elderly profile label |
| `labelSeizureSafeProfile` | string | `'Nöbet Güvenli Profili'` | Seizure safe profile label |
| `labelVisionImpairedProfile` | string | `'Kısıtlı Görme Profili'` | Vision impaired profile label |
| `labelCognitiveDisabilityProfile` | string | `'Bilişsel Öğrenme Bozukluğu'` | Cognitive disability profile label |
| `labelBlindProfile` | string | `'Görme Engelli Profili'` | Blind profile label |
| `labelDyslexiaProfile` | string | `'Disleksi Profili'` | Dyslexia profile label |
| `labelColorBlindProfile` | string | `'Renk Körlüğü Profili'` | Color blind profile label |
| `labelMotorImpairedProfile` | string | `'Hareket Kısıtlılığı Profili'` | Motor impaired profile label |
| `labelAdhdProfile` | string | `'Dikkat Eksikliği Profili'` | ADHD profile label |
| `labelParkinsonProfile` | string | `'Parkinson Profili'` | Parkinson profile label |

#### Profile Icons

Each profile can have a custom SVG icon:

| Prop | Type | Description |
|------|------|-------------|
| `iconElderlyProfile` | ReactNode | Elderly profile icon |
| `iconSeizureSafeProfile` | ReactNode | Seizure safe profile icon |
| `iconVisionImpairedProfile` | ReactNode | Vision impaired profile icon |
| `iconCognitiveDisabilityProfile` | ReactNode | Cognitive disability profile icon |
| `iconBlindProfile` | ReactNode | Blind profile icon |
| `iconDyslexiaProfile` | ReactNode | Dyslexia profile icon |
| `iconColorBlindProfile` | ReactNode | Color blind profile icon |
| `iconMotorImpairedProfile` | ReactNode | Motor impaired profile icon |
| `iconAdhdProfile` | ReactNode | ADHD profile icon |
| `iconParkinsonProfile` | ReactNode | Parkinson profile icon |

#### Profile Visibility

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `elderlyProfileVisible` | boolean | `true` | Show/hide elderly profile |
| `seizureSafeProfileVisible` | boolean | `true` | Show/hide seizure safe profile |
| `visionImpairedProfileVisible` | boolean | `true` | Show/hide vision impaired profile |
| `cognitiveDisabilityProfileVisible` | boolean | `true` | Show/hide cognitive disability profile |
| `blindProfileVisible` | boolean | `true` | Show/hide blind profile |
| `dyslexiaProfileVisible` | boolean | `true` | Show/hide dyslexia profile |
| `colorBlindProfileVisible` | boolean | `true` | Show/hide color blind profile |
| `motorImpairedProfileVisible` | boolean | `true` | Show/hide motor impaired profile |
| `adhdProfileVisible` | boolean | `true` | Show/hide ADHD profile |
| `parkinsonProfileVisible` | boolean | `true` | Show/hide parkinson profile |

## Example: Custom Branding

```jsx
<AccessibilityWidget 
  className="my-custom-widget"
  style={{ bottom: '10px', right: '10px' }}
  title="MyApp Accessibility"
  resetText="Reset All"
  color="#ff6b6b"
  iconUrl="https://example.com/my-icon.png"
  fontSizeLabel="Text Size"
  lineHeightLabel="Line Spacing"
  letterSpacingLabel="Character Spacing"
  labelHighContrast="High Contrast Mode"
  labelInvertColors="Dark Mode"
  labelGrayscale="Black & White"
  labelReadableFont="Easy Read Font"
  labelUnderlineLinks="Show Link Underlines"
  labelLargeCursor="Big Cursor"
  labelPauseAnimations="Stop Animations"
  labelSimplifyPage="Simple View"
  labelDyslexiaFriendly="Dyslexia Support"
  labelHideImages="Hide All Images"
  labelAlternativeText="Alt Text Helper"
  labelScreenReader="Screen Reader"
  labelMuteSounds="Mute Sounds"
  labelReadingGuide="Reading Guide"
  labelReadingMask="Reading Mask"
  labelCognitiveMode="Cognitive Mode"
/>
```

### Custom Icons Example

```jsx
<AccessibilityWidget 
  // Main icons
  mainIcon={<svg viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /></svg>}
  closeIcon={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></svg>}
  
  // Setting icons
  fontSizeIcon={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z" /></svg>}
  lineHeightIcon={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v2H3V5zm0 4h18v2H3V9zm0 4h18v2H3v-2zm0 4h18v2H3v-2z" /></svg>}
  letterSpacingIcon={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 11h18v2H3v-2zm-1-4l4 4-4 4V7zm20 0v8l-4-4 4-4z" /></svg>}
  
  // Toggle icons
  featureActiveIcon={<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="8" /></svg>}
  featureInactiveIcon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8" /></svg>}
  
  // Feature-specific icons
  iconHighContrast={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18V4c4.41 0 8 3.59 8 8s-3.59 8-8 8z" /></svg>}
  iconScreenReader={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z" /></svg>}
  // ... other feature icons
/>
```

### Hiding Features Example

You can hide specific features or settings that you don't want to display:

```jsx
<AccessibilityWidget 
  // Hide specific settings
  fontSizeVisible={false}
  letterSpacingVisible={false}
  
  // Hide specific features
  grayscaleVisible={false}
  simplifyPageVisible={false}
  muteSoundsVisible={false}
  screenReaderVisible={false}
/>
```

### Profile Customization Example

```jsx
<AccessibilityWidget 
  // Custom profile section title
  profilesSectionTitle="Accessibility Profiles"
  
  // Custom profile labels
  labelElderlyProfile="Senior Mode"
  labelDyslexiaProfile="Dyslexia Support"
  
  // Custom profile icons
  iconElderlyProfile={<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" /></svg>}
  
  // Hide specific profiles
  seizureSafeProfileVisible={false}
  parkinsonProfileVisible={false}
/>
```

### Custom Styling with className

You can apply custom styles using the `className` prop:

```jsx
<style dangerouslySetInnerHTML={{
  __html: `
    .my-custom-widget svg {
      display: none;
    }
    .my-custom-widget .noblock-widget-button {
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%) !important;
    }
  `
}} />

<AccessibilityWidget className="my-custom-widget" />
```

## How It Works

- **Automatic CSS Injection:** Styles are injected into `<head>` when the widget mounts
- User preferences are stored in **session cookies** (not permanent)
- Settings persist while browsing your site
- Settings reset when the browser closes
- No data is sent to external servers
- Each visitor has independent settings
- Zero external dependencies - works in any React/Next.js project

## Widget Features

### Font Size Adjustment
- 5 discrete levels: 90%, 100%, 110%, 120%, 130%
- ±10% change per level
- Button-based selection for precise control

### Dynamic Line Height
- Range: 1.2 to 2.5
- Per-element calculation for natural spacing
- Smooth slider control

### Letter Spacing
- Range: 0 to 0.2em
- Improves readability for various needs
- Fine-grained adjustment

## Browser Support

- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## License

Free to use on any website.