FriendlyUse Widget Test Page

Comprehensive testing for all accessibility features

Testing Instructions

How to Test Each Feature:

Click the accessibility bubble (bottom-right) to open the widget panel. Test each feature and observe the changes on this page. Use the checklist below to track what's working.

Feature Checklist

1. Text & Typography

This section tests font size, letter spacing, word spacing, line height, and text alignment features.

Different Text Sizes

Small text (12px): The quick brown fox jumps over the lazy dog. This text should scale with the font size control.
Medium text (16px): The quick brown fox jumps over the lazy dog. This text should scale with the font size control.
Large text (24px): The quick brown fox jumps over the lazy dog. This text should scale with the font size control.

Long Paragraph (Line Height Test)

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Letter & Word Spacing Test

Standard text: ACCESSIBILITY MAKES THE WEB BETTER FOR EVERYONE

Mixed case: FriendlyUse Widget provides comprehensive accessibility tools

Numbers: 1234567890 - Testing numeric spacing

Lists (Spacing Test)

Unordered List

  • First item in the list
  • Second item with more text
  • Third item for testing
  • Fourth and final item

Ordered List

  1. Step one of the process
  2. Step two continues here
  3. Step three is important
  4. Final step number four

2. Colors & Contrast

Test high contrast, dark mode, invert colors, grayscale, and color blindness modes.

Color Palette

Red
Orange
Yellow
Green
Cyan
Blue
Purple
Pink
Gray
Dark

Color Blindness Test Patterns

These color combinations are commonly confused by people with color vision deficiency:

Red/Green
Blue/Purple
Yellow/Green

Buttons (Contrast Test)

Text on Different Backgrounds

White text on dark background
Brown text on yellow background
Blue text on light blue background

3. Navigation & Links

Test highlight links, large cursor, and reading mask features.

Link Styles

Standard Link External Link Anchor Link Email Link

Navigation Menu Simulation

Inline Links in Text

This paragraph contains several inline links that should be highlighted when the "Highlight Links" feature is enabled. You can also test another link here and see how they stand out from the surrounding text. The third link helps verify consistent highlighting.

4. Media & Content

Test hide images, mute sounds, and stop animations features.

Images

Random image 1 Random image 2 Random image 3

Background Image

Text over background image

SVG Icon

SVG

Video (Mute Test)

Audio (Mute Test)

Animations

These boxes should stop moving when "Stop Animations" is enabled:

Bounce

Spin

Pulse

5. Reading Assistance

Test dyslexia font, text-to-speech, and reading mask features.

Dyslexia-Friendly Text

Sample paragraph for dyslexia font test:

The OpenDyslexic font is designed to help readers with dyslexia. It uses heavy weighted bottoms to indicate direction and unique letter shapes to prevent confusion between similar characters like b, d, p, and q.

Letters that might be confused: b d p q | Numbers: 6 9 | Similar: I l 1 | O 0

Text-to-Speech Test

Click on any text below to hear it read aloud (when TTS is enabled):

Hello, this is a test of the text-to-speech feature.

The quick brown fox jumps over the lazy dog.

FriendlyUse makes websites more accessible for everyone.

Reading Mask Test Area

This area is perfect for testing the reading mask feature. When enabled, a mask will follow your cursor to help you focus on one line at a time.

Line two of the reading test. Keep your eyes focused here.

Line three continues the paragraph. The mask helps reduce visual noise.

Line four is another line to read. Notice how the mask isolates text.

Line five concludes this section. Reading masks are helpful for many users.

6. Form Elements

Test how accessibility features affect form inputs.

7. Data Table

Test how accessibility features affect tabular data.

Feature Category Status Description
Font Size Text Working Adjusts text size across the page
Letter Spacing Text Working Increases space between characters
Dark Mode Visual Working Inverts colors for dark theme
Highlight Links Navigation Working Makes links visually prominent
Reading Mask Reading Working Helps focus on single lines

8. Code & Technical Content

Test how features affect code blocks and technical text.

Inline Code

Use the document.getElementById() method to select elements. The console.log() function outputs to the browser console.

Code Block

// FriendlyUse Widget Integration
const widget = document.createElement('script');
widget.src = 'https://your-domain.com/widget/widget.js';
widget.setAttribute('data-token', 'fu_your_token_here');
widget.async = true;
document.body.appendChild(widget);

Quote

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
— Tim Berners-Lee, W3C Director

9. Widget Isolation Test

The widget panel should NOT be affected by these accessibility features (except when intentionally double-inverted for dark mode):