Free accessibility widget for your website
npm install @haktantekin/noblockAuthor: 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!
styleType prop for custom design themes (e.g., styleType="hfkb" enables gradient styling)color prop; gradient effects are only applied with specific styleType valuescontentSectionTitle prop to customize "İçerik Ayarları" headingtrue - set to false to hide specific featuresiconWidth and iconHeight props to customize widget button sizefeatures prop to customize which accessibility features are displayed- 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)
NPM Package: @haktantekin/noblock
``bash`
npm install @haktantekin/noblock
`bash`
npm install @haktantekin/noblock
Then use the component:
`jsx
import { AccessibilityWidget } from '@haktantekin/noblock'
export default function App() {
return (
<>
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!
`jsx`
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={
/>
All props are optional. Here are the available customization options:
| 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. |
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| contentSectionTitle | string | 'İçerik Ayarları' | Content settings section title |profilesSectionTitle
| | string | 'Erişilebilirlik Profilleri' | Profiles section title |
| 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) |
| 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 |
| 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 |
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 |
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 |
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 |
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 |
`jsx`
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"
/>
`jsx`
mainIcon={}
closeIcon={}
// Setting icons
fontSizeIcon={}
lineHeightIcon={}
letterSpacingIcon={}
// Toggle icons
featureActiveIcon={}
featureInactiveIcon={}
// Feature-specific icons
iconHighContrast={}
iconScreenReader={}
// ... other feature icons
/>
You can hide specific features or settings that you don't want to display:
`jsx`
fontSizeVisible={false}
letterSpacingVisible={false}
// Hide specific features
grayscaleVisible={false}
simplifyPageVisible={false}
muteSoundsVisible={false}
screenReaderVisible={false}
/>
`jsx`
profilesSectionTitle="Accessibility Profiles"
// Custom profile labels
labelElderlyProfile="Senior Mode"
labelDyslexiaProfile="Dyslexia Support"
// Custom profile icons
iconElderlyProfile={}
// Hide specific profiles
seizureSafeProfileVisible={false}
parkinsonProfileVisible={false}
/>
You can apply custom styles using the className prop:
`jsx
__html:
.my-custom-widget svg {
display: none;
}
.my-custom-widget .noblock-widget-button {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%) !important;
}
}} />
`
- Automatic CSS Injection: Styles are injected into
` when the widget mounts- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Free to use on any website.