Skip to main content

Widget Demo

A live testing environment for every A11yCore widget feature. Open the widget and try each option below.

Text

Text Content

Test text size, line height, letter spacing, word spacing, and reading font options.

This section teststext size,line height,letter spacing,word spacing, andfont options. Try adjusting these settings in the widget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is smaller text that should still be readable when text size is increased. The widget should scale all text proportionally.

"Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them." — W3C
Headings

Heading Hierarchy

Test heading highlights, validation, and table of contents generation.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Colors

Colors & Contrast

Test high contrast, auto contrast fix, AAA contrast, dark mode, color blind mode, and saturation controls.

Red
Orange
Yellow
Green
Blue
Indigo
Purple
Pink

Low contrast text (test Auto Contrast Fix)

Very low contrast text

Low contrast text on dark

Very low contrast on dark

Images

Images

Test hide images, alt text suggestions, and text-in-image scanner.

A sample placeholder image with a green background demonstrating proper alt text usage

PassImage with descriptive alt text

PassDecorative image (empty alt)

FailImage missing alt text

Media

Video & Audio

Test mute all media, enable captions, and media accessibility controls.

Sample Video

Video with controls — test mute and captions

Sample Audio

Audio player — test mute media feature

Forms

Forms

Test form assistance, input autocomplete, label-in-name validation, and larger touch targets.

Contact Form

Login Form (Auth Assist)

Keyboard

Keyboard Navigation

Test keyboard navigation, enhanced focus, focus assist, tab order, page landmarks, and breadcrumbs.

Try navigating these elements using only your keyboard (Tab, Enter, Arrow keys):

Link 1Link 2
Motor

Motor & Input

Test large cursor, pointer cancellation, drag alternatives, larger touch targets, and gesture alternatives.

Small Touch Targets (should be enlarged)

Hover Effects (can be disabled)

Draggable Element (test Drag Alternatives)

Drag me
Cognitive

Cognitive Support

Test timeout warning, consistent help, simplify text, reading mask, and line focus.

Session Timeout Demo

Your session expires in:60 seconds

Timeout Warning feature should alert before session expires

Complex Text (for Simplify Text)

The implementation of accessibility guidelines necessitates the comprehensive utilization of semantic HTML elements in conjunction with ARIA attributes to facilitate optimal user experience for individuals utilizing assistive technologies.

Long Reading Content (for Reading Mask & Line Focus)

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the Web.

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.

Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.

Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.

Motion

Motion & Animations

Test pause animations, flash guard, and block motion actuation.

Bouncing animation

Spinning animation

Pulsing animation

Charts

Charts & Graphs

Test chart accessibility — makes inaccessible charts readable by extracting data automatically.

These charts are intentionally inaccessible— no ARIA labels, no descriptions, no alt text. EnableChart Accessibilityin the widget to see how A11yCore extracts and presents the data automatically.

Monthly Sales

Revenue in thousands

No A11y
JanFebMarAprMayJun02000400060008000

Screen reader sees: Nothing meaningful — just "graphics"

Weekly Visitors

Daily visitor count

No A11y
MonTueWedThuFriSatSun0800160024003200

Screen reader sees: Nothing meaningful — just "graphics"

Device Usage

Traffic by device type

No A11y
Desktop
Mobile
Tablet

Screen reader sees: Nothing meaningful — just "graphics"

Performance Metrics

Multiple data series

No A11y
Q1Q2Q3Q405500110001650022000
Revenue
Costs
Profit

Screen reader sees: Nothing meaningful — just "graphics"

How to Test

  1. Open the A11yCore widget (bottom-right corner)
  2. Enable"Chart Accessibility"feature
  3. A"View Data"button will appear on each chart
  4. Click it to see the extracted data in an accessible table format
  5. A11yCore reads Y-axis scales and bar/line positions to estimate values
Language

Language

Test language assist, foreign text detection, and page title validation.

Mixed Language Content

This is English text with some foreign words:

The French say"C'est la vie"which means "that's life".

In Spanish, we say"Buenos dias"for "good morning".

The German word"Schadenfreude"has no English equivalent.

Foreign Language Block

アクセシビリティは重要です

Japanese text that should be detected

Structure

Content Structure

Test heading validation, reflow assist, and orientation override.

FeatureCategoryWCAGStatus
Text SizeContent1.4.4Active
High ContrastDisplay1.4.11Active
Keyboard NavNavigation2.1.1Active

Test All Features

Open the accessibility widget and try each feature on this page. The widget maintains its own styling so you can always control it even when features like high contrast or dark mode are enabled.

ARIA

ARIA Enhancement

Test automatic ARIA injection, duplicate ID fixes, role validation, and state mismatch correction (WCAG 4.1.2).

This section has deliberate ARIA issues.Enable"ARIA Enhancement"in the widget to see them auto-fixed.

Duplicate IDs

These two elements share the same ID — breaks label/reference associations.

Missing ARIA & Invalid Roles

Elements with missing required ARIA attributes and questionable roles.

Custom switch (no aria-checked)

State Mismatches

Focusable elements with aria-hidden, disabled inputs without native disabled.

Unlabeled Elements

Interactive elements with no accessible name — ARIA injection should label them.

What ARIA Enhancement Fixes

  • Renames duplicate IDs and updates aria-labelledby/describedby references
  • Adds missingaria-checked,aria-selected,aria-expanded
  • Removes aria-hidden from visible focusable elements
  • Adds nativedisabledto matcharia-disabled
  • Injects ARIA labels for unlabeled interactive elements
Tab Order

Tab Order Fix

Test tabindex normalization, keyboard trap detection, escape handler injection, and roving tabindex (WCAG 2.1.1, 2.1.2, 2.4.3).

This section has deliberate keyboard navigation issues.Enable"Tab Order Fix"in the widget, then try tabbing through the elements below.

Broken Tab Order

These buttons use positive tabindex — tab order jumps unpredictably instead of following DOM order.

Tab order fix normalizes all to tabindex="0" so DOM order is followed.

Keyboard Trap (Modal)

This modal has no close button and no escape handler — a keyboard trap.

Custom Widget (Roving Tabindex)

These menus and tablists should support arrow key navigation. Tab Order Fix adds roving tabindex automatically.

Horizontal Tablist

Arrow Left/Right should navigate between tabs.

Vertical Menu

Arrow Up/Down should navigate between items.

What Tab Order Fix Does

  • Normalizes positive tabindex values to 0 so tab order follows DOM order
  • Detects keyboard traps and injects Escape key handlers
  • Adds roving tabindex to menus, tablists, and other widgets (arrow key navigation)
  • Monitors focus patterns to detect traps in real-time
DOM Order

Reading Order Check

Test detection of visual vs. DOM order mismatches from CSS order, positioning, and tabindex (WCAG 1.3.2).

Enable "Reading Order Check"in the widget. Elements with visual/DOM order mismatches will be outlined with severity-colored dashes.

CSS Flex Order Mismatch

These items use CSSorderto reorder visually, but DOM order differs. Screen readers read them in DOM order.

order: 3

DOM 1st

order: 1

DOM 2nd

order: 2

DOM 3rd

Visual: 2nd → 3rd → 1st. DOM/Screen reader: 1st → 2nd → 3rd.

Tabindex Order Issues

Positive tabindex values that force a non-sequential tab order.

Reading Order Check flags these; Tab Order Fix auto-corrects them.

CSS Grid Order Mismatch

Grid items reordered with CSS order — visual layout doesn't match DOM reading order.

order: 4

A

DOM 1st

order: 2

B

DOM 2nd

order: 1

C

DOM 3rd

order: 3

D

DOM 4th

Visual: C → B → D → A. DOM/Screen reader: A → B → C → D.

What Reading Order Check Does

  • Detects CSSorderon flex/grid items that break reading sequence
  • Flags positivetabindexvalues that disrupt tab navigation
  • Detectsposition: absolute/fixedthat may misplace elements visually
  • Highlights issues with color-coded severity outlines (red = high, amber = medium, blue = low)
  • Adds hover tooltips with WCAG 1.3.2 references
  • Auto-fixes positive tabindex values by resetting to 0