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!

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

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

<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

<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

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

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

Profile Customization Example

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

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