react-a11y-kit
Advanced tools
A comprehensive React accessibility widget that integrates seamlessly with React apps to enhance usability for all users. react-a11y-kit provides adjustable font sizes, alignment, dyslexia-friendly fonts, color and contrast controls, blue light filtering,
react-a11y-kit is a React component that brings an advanced accessibility interface to your web app, empowering users with a suite of usability tools.
Install via your preferred package manager:
yarn add react-a11y-kit
# or
npm install react-a11y-kit
The accessibility widget can integrate seamlessly with your application's i18n system (such as next-intl or i18next). This allows you to control the widget's language from your host application, preventing duplicate language selectors and ensuring a consistent language experience.
You can control the widget's language in three ways:
Pass the current language directly as a prop:
import AccessibilityUI from "react-a11y-kit"
export default function App() {
const currentLang = "ar" // or "en"
return (
<div className="App">
<MyApp />
<AccessibilityUI language={currentLang} disableLanguageSelector={true} />
</div>
)
}
Provide a function that returns the current language:
import AccessibilityUI from "react-a11y-kit"
import { useLocale } from "next-intl"
export default function App() {
const locale = useLocale()
return (
<div className="App">
<MyApp />
<AccessibilityUI resolveLanguage={() => locale} disableLanguageSelector={true} />
</div>
)
}
If neither language nor resolveLanguage is provided, the widget will automatically detect the language from document.documentElement.lang:
// In your HTML: <html lang="ar">
import AccessibilityUI from "react-a11y-kit"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI disableLanguageSelector={true} />
</div>
)
}
language?: string - Set the widget language directly (e.g., "en" or "ar")resolveLanguage?: () => string - Callback function that returns the current languagedisableLanguageSelector?: boolean - When true, hides the language dropdown from the widget UIimport AccessibilityUI from "react-a11y-kit"
import { useLocale } from "next-intl"
export default function RootLayout({ children }) {
const locale = useLocale()
return (
<html lang={locale}>
<body>
{children}
<AccessibilityUI language={locale} disableLanguageSelector={true} />
</body>
</html>
)
}
import AccessibilityUI from "accessibility-ui"
import { useTranslation } from "react-i18next"
export default function App() {
const { i18n } = useTranslation()
return (
<div className="App">
<MyApp />
<AccessibilityUI language={i18n.language} disableLanguageSelector={true} />
</div>
)
}
Currently, the widget supports:
en)ar)The widget automatically handles RTL (right-to-left) layout for Arabic.
All language integration props are optional. If you don't provide any language props, the widget will use its built-in language selector and behavior, maintaining full backward compatibility with existing implementations.
You can customize the theme of the accessibility widget to match your application's branding by passing a theme prop:
import AccessibilityUI from "accessibility-ui"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI
theme={{
primaryColor: "#2563eb", // Blue
highlightColor: "#3b82f6", // Lighter blue
backgroundColor: "#f0f9ff", // Light blue background
textColor: "#1e293b", // Dark slate
}}
/>
</div>
)
}
All theme properties are optional. If not provided, the default theme will be used:
primaryColor - Main color used for UI elements (default: #4b5563)highlightColor - Color used for highlighted/active states (default: #4b5563)backgroundColor - Background color of the widget menu (default: #f7f7fe)textColor - Text color throughout the widget (default: #000)import AccessibilityUI, { AccessibilityTheme } from "react-a11y-kit"
const customTheme: AccessibilityTheme = {
primaryColor: "#2563eb",
highlightColor: "#3b82f6",
backgroundColor: "#f0f9ff",
textColor: "#1e293b",
}
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI theme={customTheme} />
</div>
)
}
import AccessibilityUI from "react-a11y-kit"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI />
</div>
)
}
You can selectively enable or disable specific accessibility widgets by passing a config prop. By default, all widgets are enabled. Set any widget to false to hide it.
import AccessibilityUI from "accessibility-ui"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI
config={{
// Content widgets
adjustFontSize: true,
dyslexiaFont: true,
fontWeight: false, // Hide font weight widget
textAlignLeft: true,
textAlignCenter: true,
textAlignRight: true,
highlightLinks: true,
highlightTitles: true,
letterSpacing: true,
lineHeight: true,
wordSpacing: false, // Hide word spacing widget
zoom: true,
// Color widgets
blueLightFilter: true,
brightness: true,
darkContrast: true,
lightContrast: true,
highContrast: true,
highSaturation: false, // Hide high saturation widget
lowSaturation: false, // Hide low saturation widget
monochrome: true,
textColorPicker: true,
visualImpairment: true,
// Tool widgets
bigCursor: true,
readingGuide: true,
}}
/>
</div>
)
}
The library includes TypeScript definitions. You can import the WidgetConfig type for better type safety:
import AccessibilityUI, { WidgetConfig } from "react-a11y-kit"
const config: WidgetConfig = {
adjustFontSize: true,
dyslexiaFont: true,
zoom: true,
bigCursor: true,
readingGuide: true,
// All other widgets will be enabled by default
}
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI config={config} />
</div>
)
}
This accessibility widget provides a comprehensive suite of features designed to meet WCAG 2.1 guidelines and help create an inclusive web experience for all users. Each feature addresses specific accessibility needs and user preferences.
Purpose: Allows users to scale text from 10% to 200% for improved readability.
Benefits: Essential for users with low vision or reading difficulties. Supports WCAG 2.1 Success Criterion 1.4.4 (Resize Text).
Standards: WCAG 2.1 Level AA - Users should be able to resize text up to 200% without loss of content or functionality.
Purpose: Applies the OpenDyslexic font, specifically designed to increase readability for users with dyslexia.
Benefits: Unique letter shapes reduce confusion between similar-looking characters, helping dyslexic readers distinguish letters more easily.
Standards: Supports WCAG 2.1 Success Criterion 1.4.8 (Visual Presentation) by providing alternative font rendering options.
Purpose: Increases font weight to bold (700) across all text elements.
Benefits: Improves text visibility and contrast, particularly helpful for users with low vision or in high-glare environments.
Standards: Supports WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) by enhancing text prominence.
Purpose: Allows users to change text alignment to their preference.
Benefits: Helps users with certain cognitive disabilities or reading preferences. Some users find centered or right-aligned text easier to read.
Standards: Supports WCAG 2.1 Success Criterion 1.4.8 (Visual Presentation) regarding text alignment customization.
Purpose: Adds a visible outline around all hyperlinks on the page.
Benefits: Makes links more visually prominent, improving navigation for users with cognitive disabilities or low vision.
Standards: Supports WCAG 2.1 Success Criterion 2.4.4 (Link Purpose) and 1.4.1 (Use of Color) by providing non-color visual distinction for links.
Purpose: Adds a visible outline around all heading elements (h1-h6).
Benefits: Helps users quickly identify page structure and navigate content hierarchy, essential for cognitive accessibility.
Standards: Supports WCAG 2.1 Success Criterion 2.4.6 (Headings and Labels) by making structural elements more visible.
Purpose: Adjustable spacing between characters (incremental adjustment in pixels).
Benefits: Increases readability for users with dyslexia or visual processing difficulties. Reduces crowding of characters.
Standards: WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) - Letter spacing should be adjustable to at least 0.12 times the font size.
Purpose: Adjustable spacing between words (incremental adjustment in pixels).
Benefits: Improves text parsing and readability for users with dyslexia and cognitive disabilities.
Standards: WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) - Word spacing should be adjustable to at least 0.16 times the font size.
Purpose: Adjustable spacing between lines of text (adjustable from 10% to 300%).
Benefits: Reduces visual crowding and improves reading flow for users with dyslexia, low vision, or cognitive disabilities.
Standards: WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) - Line height should be adjustable to at least 1.5 times the font size.
Purpose: Full-page zoom from 10% to 300% for content magnification.
Benefits: Critical for users with low vision who need to magnify content beyond browser defaults. Preserves layout while enlarging.
Standards: WCAG 2.1 Success Criterion 1.4.4 (Resize Text) and 1.4.10 (Reflow) - Content should be viewable at up to 200% zoom without loss of information.
Purpose: Applies a sepia filter (80%) to reduce blue light emission from screens.
Benefits: Reduces eye strain and fatigue during extended viewing sessions, particularly beneficial for evening use and users sensitive to blue light.
Standards: Supports user comfort and accessibility best practices for extended screen usage.
Purpose: Adjustable screen brightness from 150% to 500%.
Benefits: Allows users to adapt content to different lighting conditions and personal sensitivity. Essential for users with light sensitivity or photophobia.
Standards: Supports WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) by allowing users to control luminosity.
Purpose: Toggle between light background with dark text, or dark background with light text.
Benefits: Provides high contrast color schemes preferred by many users with low vision or light sensitivity. Dark mode reduces eye strain in low-light environments.
Standards: WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) - Enhanced contrast of at least 7:1 for optimal readability.
Purpose: Adjustable contrast from 125% to 200%.
Benefits: Increases color differentiation and edge definition, crucial for users with low vision, color deficiencies, or contrast sensitivity.
Standards: WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) Level AAA - Contrast ratio of at least 7:1 for normal text.
Purpose: Adjustable color saturation from 50% to 800%.
Benefits: Allows users to increase or decrease color intensity based on preference or visual needs. Helpful for users with color perception difficulties.
Standards: Supports WCAG 2.1 Success Criterion 1.4.1 (Use of Color) by allowing color adjustment without losing information.
Purpose: Converts all colors to grayscale (100% desaturation).
Benefits: Eliminates color distractions for users who find color overwhelming, and assists users with color blindness by focusing on luminosity contrast.
Standards: Supports WCAG 2.1 Success Criterion 1.4.1 (Use of Color) by ensuring information is not conveyed by color alone.
Purpose: Custom color selection for all text elements using a hex color picker.
Benefits: Allows users to choose text colors that work best for their specific vision needs or preferences.
Standards: Supports WCAG 2.1 Success Criterion 1.4.8 (Visual Presentation) by enabling user control over text colors.
Purpose: Inverts all colors on the page (100% inversion filter).
Benefits: Particularly helpful for users with severe light sensitivity, certain types of color blindness, or those who prefer negative contrast.
Standards: Supports accessibility best practices for users with photophobia and specific visual processing needs.
Purpose: Replaces the default cursor with a larger, more visible custom cursor.
Benefits: Essential for users with visual impairments, motor control difficulties, or those using large displays where the standard cursor is hard to track.
Standards: Supports WCAG 2.1 Success Criterion 2.5.5 (Target Size) principles by making pointer interactions more visible.
Purpose: Darkens areas above and below the cursor position, creating a horizontal reading strip that follows mouse movement.
Benefits: Helps users with dyslexia, ADHD, or visual tracking difficulties maintain focus on the current line of text being read.
Standards: Supports cognitive accessibility best practices and WCAG 2.1 Success Criterion 2.4.8 (Location) by helping users maintain reading position.
This widget is designed to help web applications meet and exceed international accessibility standards:
The features in this widget support multiple WCAG 2.1 Success Criteria across all three conformance levels (A, AA, AAA):
Key WCAG 2.1 Success Criteria addressed:
While this widget focuses on visual and cognitive accessibility, it follows WAI-ARIA authoring practices for interactive components and ensures compatibility with assistive technologies.
By implementing this accessibility widget, your application takes significant steps toward WCAG 2.1 Level AA compliance and provides an inclusive experience for users with diverse needs.
All widgets are enabled by default. You can selectively disable widgets by passing a config prop to the AccessibilityUI component. Here are all available configuration options:
adjustFontSize - Font size adjustment controlsdyslexiaFont - Dyslexia-friendly font togglefontWeight - Font weight selectiontextAlignLeft - Left text alignmenttextAlignCenter - Center text alignmenttextAlignRight - Right text alignmenthighlightLinks - Highlight links featurehighlightTitles - Highlight titles featureletterSpacing - Letter spacing controllineHeight - Line height adjustmentwordSpacing - Word spacing controlzoom - Page zoom controlblueLightFilter - Blue light filter togglebrightness - Brightness controldarkContrast - Dark contrast modelightContrast - Light contrast modehighContrast - High contrast controlhighSaturation - High saturation controllowSaturation - Low saturation controlmonochrome - Monochrome/grayscale modetextColorPicker - Custom text color pickervisualImpairment - Visual impairment modebigCursor - Big cursor togglereadingGuide - Reading guide toggleYou can customize both the theme and which widgets to display:
import AccessibilityUI from "react-a11y-kit"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI
theme={{
primaryColor: "#2563eb",
highlightColor: "#3b82f6",
backgroundColor: "#f0f9ff",
textColor: "#1e293b",
}}
config={{
adjustFontSize: true,
dyslexiaFont: true,
zoom: true,
highContrast: true,
bigCursor: true,
readingGuide: true,
// Disable widgets you don't need
wordSpacing: false,
highSaturation: false,
}}
/>
</div>
)
}
Install and add to your React project:
yarn add react-a11y-kit
# or
npm install react-a11y-kit
import AccessibilityUI from "react-a11y-kit"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI />
</div>
)
}
import AccessibilityUI from "react-a11y-kit"
export default function App() {
return (
<div className="App">
<MyApp />
<AccessibilityUI
config={{
adjustFontSize: true,
dyslexiaFont: true,
zoom: true,
highContrast: true,
bigCursor: true,
readingGuide: true,
// Set any widget to false to hide it
wordSpacing: false,
highSaturation: false,
}}
/>
</div>
)
}
Empower everyone to navigate your site comfortably with react-a11y-kit—no setup required.
FAQs
A comprehensive React accessibility widget that integrates seamlessly with React apps to enhance usability for all users. react-a11y-kit provides adjustable font sizes, alignment, dyslexia-friendly fonts, color and contrast controls, blue light filtering,
We found that react-a11y-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.