Making the Web Accessible: TTS, Dyslexia Fonts, and More

The web was designed to be accessible to everyone. In practice, it often is not. Tiny fonts, low-contrast text, cluttered layouts, walls of unbroken paragraphs, and interfaces that assume perfect vision, hearing, and motor control exclude millions of people every day. Browser accessibility features have historically been afterthoughts: buried in settings menus, inconsistently implemented, and rarely integrated with each other. Tensor makes accessibility a first-class feature, available with a single shortcut and designed to work together as a cohesive system.

Text-to-Speech That Actually Works

Most browsers have built-in text-to-speech, and most of it sounds robotic and awkward. Tensor's TTS uses modern neural speech synthesis to read web content in natural-sounding voices. But the technology is only part of the story. What makes Tensor's TTS useful is its intelligence about what to read and how to read it.

When you activate TTS on a page, Tensor does not simply dump every text node into the speech engine. It identifies the main article content, strips navigation, ads, sidebars, and boilerplate, and reads only the meaningful text. It understands document structure: headings are read with slightly different emphasis, lists are read with natural pausing between items, and code blocks are identified and either skipped or read with technical pronunciation rules.

The reader includes visual tracking: as the voice reads, the current sentence is highlighted on the page, making it easy to follow along or jump to a specific section. You can adjust speed from 0.5x to 3x, change the voice, and set the reading to pause at section breaks so you can digest information at your own pace.

• Smart content extraction — reads the article, not the chrome around it
• Visual tracking — highlights the current sentence as it reads
• Speed control — 0.5x to 3x with natural prosody preservation
• Section navigation — skip forward/backward by paragraph or heading
• Language detection — automatically switches voice for multilingual pages
• Background reading — continues reading even when you switch tabs

Hover Translate

Hover Translate is a deceptively simple feature with profound impact. Hold the Alt key and hover over any word or sentence, and Tensor instantly displays a translation in your preferred language. Unlike traditional translation tools that translate the entire page and often mangle the layout, Hover Translate works on individual elements, leaving the rest of the page untouched.

This is invaluable for multilingual users who can read a foreign language at an intermediate level but occasionally need help with unfamiliar vocabulary. Rather than translating the entire page and losing the ability to practice reading in the original language, Hover Translate provides just-in-time assistance exactly where you need it.

The translation popup includes the translated text, pronunciation guide (romanization for non-Latin scripts), part of speech, and for single words, alternative translations with usage context. For technical documents, it can be configured to preserve technical terms untranslated, since translating "API endpoint" into another language is rarely helpful.

// Hover Translate configuration
{
  targetLanguage: "en",
  triggerKey: "Alt",
  showPronunciation: true,
  showAlternatives: true,
  preserveTechnicalTerms: true,
  technicalDomains: ["programming", "science", "medicine"],
  fontSize: "16px",
  position: "above-cursor"
}

Dyslexia-Friendly Font Mode

Approximately 10% of the population has some form of dyslexia. For these users, the standard fonts used on most websites create unnecessary reading difficulty. Letters like b and d, p and q, and m and w are easily confused in symmetric typefaces. Tensor's dyslexia font mode addresses this by replacing page fonts with OpenDyslexic or a similar weighted-bottom font that makes each letter more visually distinct.

The font replacement is not a simple CSS override that breaks page layouts. Tensor carefully remaps font sizes, line heights, and spacing to maintain the page's visual structure while substituting the typeface. It accounts for the fact that dyslexia-friendly fonts typically have wider character widths, adjusting container sizes and text wrapping to prevent overflow and maintain readability.

Beyond font replacement, the dyslexia mode includes several complementary adjustments:

• Increased letter spacing — adds space between characters to reduce visual crowding
• Increased word spacing — widens gaps between words for clearer word boundaries
• Increased line height — more vertical space between lines to prevent line-skipping
• Left alignment — removes justified text, which creates uneven word spacing that disrupts reading flow
• Shortened line length — constrains text width to approximately 60-70 characters per line, the optimal range for comfortable reading

Users can enable all of these adjustments together or individually, finding the combination that works best for their specific needs. The settings persist across sessions, so every website automatically loads with the user's preferred configuration.

Line Focus and Reading Ruler

Line Focus is one of Tensor's most popular accessibility features, and it is used by many people who do not have any diagnosed reading difficulty. When activated, it dims all content on the page except a horizontal band around the line you are currently reading. As you scroll or move your cursor, the focused band follows, keeping your attention on exactly one line of text.

The reading ruler variant adds a semi-transparent overlay above and below the focused line, simulating the physical reading rulers that many students use. The width and opacity of the focused band are adjustable, and you can choose between a moving focus that follows your cursor and a fixed focus that advances line-by-line with keyboard controls.

Line Focus is particularly valuable for dense technical documentation, legal text, financial reports, and any content where losing your place mid-paragraph is frustrating. It works seamlessly with TTS: when text-to-speech is active, the line focus automatically tracks the currently spoken sentence.

Text Spacing Controls

WCAG 2.1 Success Criterion 1.4.12 requires that users be able to adjust text spacing without loss of content or functionality. Many websites fail this criterion. Tensor provides a text spacing panel that lets you independently control four spacing parameters: line height, paragraph spacing, letter spacing, and word spacing. Adjustments are applied via CSS custom properties that override page styles without breaking layouts.

// Text spacing adjustments
{
  lineHeight: 1.8,        // default: page value
  paragraphSpacing: 2.0,  // multiplier of font size
  letterSpacing: 0.12,    // em units
  wordSpacing: 0.16       // em units
}

// Applied via CSS custom properties
// --tensor-line-height: 1.8;
// --tensor-paragraph-spacing: 2em;
// --tensor-letter-spacing: 0.12em;
// --tensor-word-spacing: 0.16em;

The spacing controls include presets for common needs: "Comfortable" increases all spacings by 25%, "Spacious" increases them by 50%, and "Maximum" applies the WCAG-recommended maximum values. Each preset can be further customized, and your preferred settings are saved per-domain, because the right spacing for a text-heavy news site might be different from what works on a dashboard.

High Contrast and Color Adjustments

Tensor offers several color adjustment modes beyond the standard browser high-contrast feature. The color overlay mode adds a semi-transparent tint to the entire page, which some users with Irlen Syndrome or photosensitivity find reduces visual stress. Available colors include amber, blue, green, rose, and gray, each with adjustable opacity.

The contrast enhancement mode selectively increases the contrast between text and its background without changing the overall page appearance. It analyzes each text element's computed color and background color, calculates the contrast ratio, and if the ratio falls below the WCAG AA threshold of 4.5:1, adjusts either the text or background color to meet the standard. This is subtler than a full high-contrast mode and preserves more of the page's design intent.

Why Accessibility Is a Core Feature

We made a deliberate choice to include accessibility tools in Tensor's core feature set, not as an add-on or an optional module. This decision is both principled and practical.

The principled argument is straightforward. If we are building a tool that makes the browser smarter, it should make the browser smarter for everyone. A browser AI that only works for users with perfect vision and standard cognitive processing is not actually smart; it is just narrowly optimized for a subset of users.

The practical argument is equally compelling. Accessibility features benefit everyone, not just users with diagnosed disabilities. TTS is useful for anyone who wants to listen to articles during a commute. Line Focus helps anyone reading dense text. Increased spacing improves comfort during long reading sessions. Hover Translate serves anyone encountering foreign-language content. By treating these as core features, we have found that they are used by a far broader audience than the disability community alone, which in turn justifies continued investment and improvement.

The web should work for everyone. Tensor is doing its part to make that a reality, one feature at a time.