Building a Communication Tool for People with Disabilities Using JavaScript and AI

Communication is one of the basics of human needs, but for many people with disabilities, speaking can be a huge challenge. I wanted to create a simple tool that anyone can use and lets people communicate using just one finger, tapping directions (arrows) to form Morse code, then combining letters to make them into words spoken aloud.

The best part. I built this entirely with basic web technologies (HTML, CSS, and JavaScript), with no fancy installs or complicated setups. With the help of AI, I was able to translate my Python-based idea into a mobile-friendly web app that works on phones and laptops alike.

Why Build This?

This project is proof that anyone, even without deep coding expertise, can create helpful tools using freely available resources. It’s about giving people who struggle to communicate a way of expressing themselves.

How It Works

The page uses 4 directions: left, right, up, and down, just like on a keyboard’s arrow keys:

Left arrow = Dot (.)
Right arrow = Dash (-)
Up arrow = End Letter (tap once)
Down arrow = Speak the phrase aloud

You can input Morse code by tapping or pressing left/right arrows, end letters and words with up arrows, and speak your word with the down arrow. There’s also a Delete button to erase the last dot or dash before completing a letter.

The Code

Here’s a breakdown of the foundational parts of the HTML/JS code powering the app:

Morse Code Dictionary

Using simple object to map dot/dash sequences to letters and numbers:

const morseDict = { ".-": "A", "-...": "B", "-.-.": "C", /* ... */, "----.": "9" };

Variables to Track State

Keeping track of:

currentMorse: the dots and dashes for the current letter

currentWord: the letters forming the current word

phrase: the full phrase composed so far

lastUpTime: to detect single vs double tap on the up arrow

Updating the Display

Updating the UI to show the current Morse code, word, and phrase:

function updateDisplay() { morseCodeEl.textContent = currentMorse; currentWordEl.textContent = currentWord; fullPhraseEl.textContent = phrase; }

Handling Input (Keyboard & Buttons)

The app listens for arrow key presses and button clicks, translating them into Morse code signals:

window.addEventListener("keydown", (event) => { switch(event.key) { case "ArrowLeft": currentMorse += "."; break; case "ArrowRight": currentMorse += "-"; break; // ... handle Up, Down, Space keys } updateDisplay(); });

And for mobile or users who prefer tapping, the UI provides big buttons for each control with the same logic.

Speaking the Phrase

Using the browser’s built-in SpeechSynthesis API, the app reads out the phrase aloud:

function speak(text) { if (!text) return; const utterance = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(utterance); }

Try It Yourself!

You can use this tool directly in any modern browser, no downloads required. It works on laptops, desktops, tablets, and smartphones.

Here’s the page if you are interested in seeing it live.

Why This Matters

We need tools like this because these tools help facilitate communication for people who have difficulty speaking or typing. By combining the two together (simple directional inputs with Morse code), users can form words, which then, in turn, the app could say out loud.

Thanks to AI, I was able to build this web app, proving that technology can work to empower everyone.