NoBlock - Free Accessibility Widget

Author: Haktan Tekin - haktantekin.com
GitHub: 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!

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
• 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

npm install @haktantekin/noblock

React/Next.js Usage

npm install @haktantekin/noblock

Then use the component:

import { AccessibilityWidget } from '@haktantekin/noblock'

export default function App() {
  return (
    <>
      <AccessibilityWidget 
        title="Accessibility"
        resetText="Reset"
        fontSize={1}
        lineHeight={1.5}
        letterSpacing={0}
        color="#10366e"
        iconUrl="https://example.com/accessibility-icon.png"
        fontSizeLabel="Font Size"
        lineHeightLabel="Line Height"
        letterSpacingLabel="Letter Spacing"
        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"
      />
      {/* Your page content */}
    </>
  )
}

Note: CSS is automatically imported by the component - no additional setup needed!

Configuration Props

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

Basic Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | '' | Additional CSS classes | | 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) |

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 |

Example: Custom Branding

<AccessibilityWidget 
  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"
/>

## How It Works

- 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

## 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.