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

``bash
npm install @haktantekin/noblock
`

$3

`bash
npm install @haktantekin/noblock
`

Then use the component:

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

export default function App() {
return (
<>
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!

$3

`jsx
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={}
closeIcon={}
fontSizeIcon={}
lineHeightIcon={}
letterSpacingIcon={}

// Feature Icons
iconHighContrast={}
iconInvertColors={}
iconGrayscale={}
iconReadableFont={}
iconUnderlineLinks={}
iconLargeCursor={}
iconPauseAnimations={}
iconSimplifyPage={}
iconDyslexiaFriendly={}
iconHideImages={}
iconMuteSounds={}
iconReadingGuide={}
iconReadingMask={}
iconCognitiveMode={}
iconAlternativeText={}
iconScreenReader={}

// Profile Icons
iconElderlyProfile={}
iconSeizureSafeProfile={}
iconVisionImpairedProfile={}
iconCognitiveDisabilityProfile={}
iconBlindProfile={}
iconDyslexiaProfile={}
iconColorBlindProfile={}
iconMotorImpairedProfile={}
iconAdhdProfile={}
iconParkinsonProfile={}
/>
`




Configuration Props

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| mainIcon | ReactNode | | Main widget button icon |
| closeIcon | ReactNode | | 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 |

$3

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 |

$3

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 |

$3

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

$3

`jsx
// Main icons
mainIcon={}
closeIcon={}

// Setting icons
fontSizeIcon={}
lineHeightIcon={}
letterSpacingIcon={}

// Toggle icons
featureActiveIcon={}
featureInactiveIcon={}

// Feature-specific icons
iconHighContrast={}
iconScreenReader={}
// ... other feature icons
/>
`

$3

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

`jsx
// Hide specific settings
fontSizeVisible={false}
letterSpacingVisible={false}

// Hide specific features
grayscaleVisible={false}
simplifyPageVisible={false}
muteSoundsVisible={false}
screenReaderVisible={false}
/>
`

$3

`jsx
// Custom profile section title
profilesSectionTitle="Accessibility Profiles"

// Custom profile labels
labelElderlyProfile="Senior Mode"
labelDyslexiaProfile="Dyslexia Support"

// Custom profile icons
iconElderlyProfile={}

// Hide specific profiles
seizureSafeProfileVisible={false}
parkinsonProfileVisible={false}
/>
`

$3

You can apply custom styles using the className prop:

`jsx