An open-source tool for previewing how text sounds when spoken aloud. Detects ASCII tables, maps, art, and decorative borders that create accessibility barriers in text games such as MUDs.
Live tool: writing-games.org/screen-reader-preview
- Paste text to hear how a screen reader would read it
- Detects problematic ASCII art, tables, maps, and decorative borders and makes recommendations
- Simulates behavior of popular screen readers (NVDA, JAWS, VoiceOver)
- Runs entirely in the browser using the Web Speech API
Open index.html in a browser or visit the live site. Paste your text into the input area and click Analyze & Read Aloud to hear how it sounds. Any detected issues and recommendations will be shown below.
This is a single-file tool - just index.html - so hosting your own copy is straightforward. Drop it on any web server or embed it in your game's website. Here's what you'll want to customize:
The <script> tag near the end of <head> loads Litlyx analytics for the original site. Litlyx is a privacy-respecting, cookieless analytics tool. Leaving the script in won't hurt anything, but you might as well remove it or replace it with your own.
The CSP meta tag near the top of <head> controls which external resources the page is allowed to load. Update it for your own domain:
script-src- removehttps://static.cloudflareinsights.comif you use cloudflare and want to block it; removehttps://cdn.jsdelivr.net(only needed for the Litlyx script you just removed)img-src- changehttps://writing-games.orgto your domain (or'self'if images are local)style-srcandfont-src- keep the Google Fonts entries if you use the same fonts, or adjust for your own
<title>- update the page title<link rel="canonical">- change to your URL- Open Graph tags - update
og:url,og:site_name, andog:imageto your own (search forog:in<head>) - Twitter card tags - update title, description, and image (search for
twitter:in<head>) <meta name="description">and<meta name="keywords">- adjust if needed
og:image- replace with your own icon/logo- Footer icon - the
<img>in the footer points to the Writing Games logo; replace or remove it - Footer links - update the site name, URL, and contact link to your own
The styles are all inline in index.html. Key things you might want to change:
- Color variables (search for
background,color,border-color) - Font choices (currently uses Atkinson Hyperlegible via Google Fonts)
- Layout widths and spacing
The FAQ section includes a link to the GitHub Issues page and Discord. Point these to your own support channels, or remove them.
The <head> contains a <script type="application/ld+json"> block with structured data for the FAQ section. If you change any FAQ text, links, or questions, update the schema to match -- AI search engines and answer engines (ChatGPT, Perplexity, Google AI Overviews) actively crawl and cite FAQ structured data.
Or you can take the entire FAQSchema out for easier maintainability. Your choice.
This project is licensed under the MIT License. See LICENSE for details.