DEV Community: Parthi

Building an Accessible Voice Login Page with React and Web Speech API

Parthi — Wed, 30 Jul 2025 14:37:18 +0000

Empowering Blind Users with Voice-First Authentication

After successfully building our Accessible Voice Login Page, I want to share the full journey, learnings, and next steps with the community. This project demonstrates how React and the Web Speech API can be combined to create an inclusive, voice-first login experience designed for blind and visually impaired users.

🌟 Project Vision: Voice-First Accessibility

The goal was simple but impactful:

Enable blind users to log in to a web application independently and intuitively, using only their voice.

Traditional login forms rely heavily on visual cues, requiring screen readers or complex keyboard navigation. Our voice-first approach changes that by letting users:

Speak commands like “login”, “username demo”, or “password password”

Receive real-time audio feedback through text-to-speech

Navigate and log in without touching the keyboard or mouse

⚙️ Core Technologies

We built the project on web-native and accessible-friendly technologies:

React

Component-based UI for clean state management

Fast updates for dynamic voice interactions

Web Speech API

SpeechRecognition: Listens to and interprets user voice commands

SpeechSynthesis: Reads out prompts and feedback for an interactive experience

✨ Key Features

1. Voice-Controlled Login & Logout

Start listening by saying “start listening” or pressing a big button

Voice-based login flow:

Say “login”

Say “username demo”

Say “password password”

Voice-based logout: Just say “logout”

2. Multi-Language Support

Supports English + 7 Indian languages: Hindi, Tamil, Telugu, Kannada, Malayalam, Bengali, Marathi

Language dropdown updates both UI and voice prompts dynamically

The app selects native speech synthesis voices for natural feedback

3. Accessibility-First UI Design

Large, bold buttons for touch and keyboard access

ARIA roles and labels for screen reader compatibility

aria-live regions to announce login success/failure in real-time

Semantic HTML for a strong accessible foundation

🛠 Development Journey

React Setup Started with a simple React app to structure:

Components: VoiceLogin, LanguageSelector, VoiceFeedback

Context: For global language state and voice settings

Web Speech API Integration Challenges faced:

Browser Compatibility: Best in Chrome, limited in Safari/Firefox

Microphone Permissions: Added prompts with fallbacks

Async Flow: Speech recognition events (onresult, onend, onerror) required state-driven callbacks to handle voice command sequences

3. Localization & Voice Matching

Centralized messages object for all translations

Dynamically updated:

js
Copy
Edit
recognition.lang = selectedLanguageCode;
speechSynthesisVoice.lang = selectedLanguageCode;
Matched voices by iterating through speechSynthesis.getVoices() to find language-specific ones

4. Accessibility Enhancements

ARIA attributes for all buttons and feedback

Keyboard navigability ensured for all interactive elements

Focus management on login/logout transitions for better screen reader flow

🚀 Future Roadmap

The project is functional, but the community can expand and improve it:

Real Authentication

Replace demo credentials with Firebase Auth, OAuth, or a secure backend

Account Creation Flow

Voice-guided sign-up and password reset

Flexible Voice Commands

Understand phrases like “log me in” or “sign out”

User Customization

Save preferred voice, speed, and language

Voice Biometrics

Explore speaker recognition for secure voice-only login

💡 Community Takeaways

Accessibility by Design

Building voice-first apps changes how visually impaired users interact with the web

Integrate ARIA, semantic HTML, and voice feedback early in the process

Leverage Web Speech API

Combining SpeechRecognition + SpeechSynthesis creates an intuitive feedback loop

Handle asynchronous recognition events carefully for multi-step flows

Localization is Crucial

Full voice and UI translation make apps feel native and increase adoption

📢 Contribute & Collaborate

I’ve open-sourced the project (or you can share a GitHub link if available). Developers and accessibility advocates are invited to:

Test the app with different devices, languages, and screen readers

Suggest voice commands that feel natural in multiple languages

Extend authentication to real-world use cases

Together, we can make voice-first accessibility a standard for web applications.

🤖 AI Research Digest — Automating Research Summaries and Social Sharing with Runner H

Parthi — Fri, 06 Jun 2025 07:05:52 +0000

🧠 What I Built

I built an autonomous AI Research Digest Agent using Runner H to automate the process of:

Fetching trending AI research papers from arXiv

Summarizing each paper into digestible insights

Selecting the most impactful paper

Generating a polished LinkedIn post

This workflow eliminates the need to manually browse research feeds, summarize academic content, or spend time crafting posts — perfect for students, researchers, and professionals who want to stay up-to-date and build their thought leadership.

🎥 Demo

📄 Click here to download the full PDF summary

If you'd like to see a short walkthrough video (coming soon!), stay tuned or comment below and I’ll update.

📄 Top 3 AI Papers Summarized
Control Tax: The Price of Keeping AI in Check

Introduces the idea of a “Control Tax” for AI oversight.

Builds a model to quantify trade-offs between safety and cost.

Empirical results show feasible safety mechanisms without high expenses.

Just Enough Thinking: Adaptive Length Penalties in RL

Introduces Adaptive Length Penalty (ALP) to improve token efficiency.

Allocates computational power based on task complexity.

Results show reduced waste and better model scaling.

LLM-First Search: Self-Guided Exploration

Proposes LLM-First Search (LFS), a self-guided reasoning approach.

Uses internal evaluation over static rules.

Demonstrates superior flexibility and efficiency in problem-solving.

📢 LinkedIn Post (Runner H Drafted)

"Just explored the latest breakthroughs in AI research: From optimizing control measures to enhancing reasoning efficiency! One standout is our ability to autonomously navigate complex problems with LLM-First Search, reducing the need for predefined strategies.
Imagine what this means for AI's adaptability across diverse domains! The future is exciting, and these innovations pave the way forward."

🔗 #AI #LLM #MachineLearning #AIResearch #RunnerH

Bonus: 20 AI Research Prompt Ideas
These prompts were also generated to inspire follow-up investigations and projects:

Explore the impact of Control Tax on AI system design.
Investigate adaptive reasoning mechanisms to optimize efficiency.
Design self-guided AI algorithms for unknown data spaces.
Evaluate the cost-benefit of oversight mechanisms in enterprise AI.
Tailor reinforcement strategies for LLMs based on task feedback.
Scale LLM-First techniques to multi-agent environments.
Apply self-guided logic to autonomous robotics.
Analyze penalty adaptation methods across AI domains.
Embed control-tax-aware policies into real-time AI systems.
Build models to optimize AI under strict cost constraints.
Study adaptive length methods in multi-agent cooperation.
Benchmark LLM-First Search versus classical planning.
Assess startup viability under safety compliance rules.
Develop resilient AI prediction frameworks for uncertainty.
Propose affordable pipelines for critical AI services (e.g., health).
Train AI via unsupervised, self-guided exploration methods.
Measure training benefits from adaptive reasoning penalties.
Use LLM-First Search to tackle environmental modeling.
Simulate economic outcomes of AI Control Tax policies.
Explore industrial-scale rollout of self-guided AI systems. ##🌍 Use Case & Impact Who It’s For:

AI Researchers who need daily summaries.

Tech Enthusiasts building a personal brand via research content.

Students who want simplified summaries of new work.

Product Managers who need to stay aware of emerging tech trends.

Why It Matters:

This automation turns a complex, multi-step intellectual task into a single-prompt solution — saving time, increasing reach, and bridging the gap between deep research and public knowledge.

❤️ Social Love

Shared on LinkedIn!
👉 Connect with me on LinkedIn

(Once shared, you can paste the LinkedIn or Twitter embed here for consideration in the Community Champion prize category.)

🙏 Credits

Special thanks to H Company for creating Runner H, a powerful no-code AI automation platform that enables anyone to build intelligent, multi-step agents with just a single prompt.

Big shoutout to the DEV community for organizing the Runner H "AI Agent Prompting" Challenge and giving creators and builders a platform to showcase their ideas.

This challenge highlights the incredible potential of prompt-driven AI workflows — and I'm excited to see what others create too!

🙌 Special Thanks

Huge thanks to the Runner H team for making prompt-based workflows so accessible. Looking forward to building more advanced autonomous agents!

challenges ?

Parthi — Wed, 07 May 2025 08:32:18 +0000