Screen Reader Preview

WHAT IT DOES

Screen Reader Preview is a browser extension that simulates how a screen reader would read the content of a webpage. It extracts text in reading order and displays it in a structured format with visual indicators for heading levels, links, buttons, form inputs, and ARIA roles and landmarks. The tool highlights the text that would be read, shows ARIA labels, and provides an audio preview using speech synthesis with adjustable speech rate. You can also copy the extracted content to your clipboard. The tool is ideal for web developers, accessibility testers, designers, and anyone who wants to understand how their content is perceived by screen reader users.

WHERE IT RUNS

Screen Reader Preview runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, using DOM traversal and the Web Speech API. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the preview. Click the "Scan Page" button to extract and display the content in reading order. The preview shows each element with its type (Heading, Link, Button, Input, or ARIA role) and the text that would be read. Click the "Speak" button to hear the content read aloud using speech synthesis with the current speech rate. Use the "Stop" button to stop speaking. Click the "Copy" button to copy the extracted content to your clipboard. Adjust the speech rate using the slider. All settings are saved per website.

REAL MECHANISM — WHY THIS WORKS

Most accessibility testing tools require running complex audits or external services to analyze page content. Screen Reader Preview uses a lightweight, in-browser approach that extracts content in DOM order using a TreeWalker traversal. The tool traverses the DOM starting from the body, collecting text content from visible elements while skipping script and style tags. For each element, the tool identifies its semantic meaning: heading level (H1-H6) from tag name, links from anchor tags with href, buttons from button tags, inputs from form elements, and ARIA roles and labels from attributes. The content is displayed in a structured list with color-coded indicators for each element type. The audio preview uses the Web Speech API (SpeechSynthesis) to convert the extracted text to speech, with the utterance's rate property controlled by the user's setting. The speech synthesis is cancellable and supports error handling. The tool also uses a MutationObserver to detect dynamic content changes and re-scan automatically. This approach ensures accurate, fast, and fully private screen reader simulation without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view the extracted content. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and speech rate—are saved per domain for a seamless experience.

PLEASE NOTE

Screen Reader Preview requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The speech synthesis uses the Web Speech API, which may not be available in all browsers or may require user interaction to activate. The extracted content is based on visible text in the DOM and may not perfectly match a real screen reader, which may have different handling of CSS-generated content, images, and dynamic content. The tool does not include screen reader-specific navigation features (like headings list or landmark navigation). All settings are stored locally in your browser using GM_setValue. No page content, extracted text, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only scans and reads content locally at your request.