All Work

I built the OCR, text-to-speech, and translation tool flow

READABLE

An accessibility utility that combines OCR, text-to-speech, and translation to make difficult text easier to read, hear, and understand.

READABLE project visual

Project Type

Accessibility utility

Stack

JavaScript, APIs, HTML, CSS

Core Work

OCR, text-to-speech, translation

Timeline

Built in 2026

Case Study

Engineering Notes

01

Project Overview

ReadAble is an accessibility utility that uses OCR, text-to-speech, and translation to make text easier to access. It is built for users who struggle with visual text, dense pages, unfamiliar language, or reading-heavy workflows.

02

Problem / Motivation

A lot of information is technically available but practically hard to use. Text inside images cannot be copied, long passages can be tiring to read, and language differences add friction. Accessibility is not a bonus feature; it is the difference between usable and decorative.

03

Architecture / System Design

The tool uses a JavaScript-based frontend flow with API integrations for OCR, text-to-speech, and translation. The user provides visual or written input, the OCR layer extracts text where needed, and the result can be read aloud or translated based on the selected workflow.

The state model is kept simple: input, extracted text, transformed output, and user action. This keeps the UI understandable and avoids turning a utility into a settings museum.

04

Key Features

ReadAble is built around practical accessibility operations.

  • OCR extraction from visual text.
  • Text-to-speech playback for listening workflows.
  • Translation support for easier comprehension.
  • Simple input-to-output interface.
  • Utility-first design for students and general users.

05

Technical Challenges

The difficult part is keeping the extracted text clean enough for the next step. OCR mistakes affect speech and translation quality, so each layer depends on the previous one behaving reasonably well. Pipeline discipline matters even in a small tool.

06

Solutions / Engineering Decisions

I kept the product focused on a small number of transformations instead of adding unrelated features. OCR, speech, and translation were chosen because they solve the same accessibility problem from different angles: seeing, hearing, and understanding.

07

Outcome / Final State

The prototype provides a clear accessibility workflow and a base for future improvements like better OCR cleanup, saved outputs, language presets, and mobile-first capture support.

AccessibilityOCRText-to-SpeechTranslationJavaScript

Key Capabilities

Used OCR to extract text from visual input.

Added text-to-speech support for users who prefer listening.

Included translation to make extracted content easier to understand across languages.

© 2026 Piyush Ratan. All Rights Reserved.