ReadAble | Devpost

ReadAble homepage allowing users to upload documents and transform them into reading cards.
Documents are broken into flashcards and presented in a scrollable reading flow with a set of supportive features.

Inspiration

In recent years, reading literacy in Canada has been declining, especially among young people. At the same time, many of us noticed a change in our own reading habits. In the past, we were able to read long and complex books regularly. Today, the frequency of deep reading has dropped significantly, and reading is often replaced by short, fast content.

One possible reason is the rise of social media. Constant exposure to short content and instant feedback has changed how people process information. Attention becomes fragmented, and sustained focus becomes more difficult. This may help explain why more children and adults struggle with reading comprehension and concentration.

These observations motivated us to explore how design and technology could support reading literacy for all ages in Canada.

What it does

ReadAble lets users upload PDF documents, which are then split into sections and processed by Gemini AI. Each section appears as a card, and users can click a helper button to see a simplified explanation or a summary of the text. ReadAble also uses ElevenLabs to read the text aloud, which makes reading accessible for people with visual impairments or reading difficulties. Users can toggle OpenDyslexia font, which improves readability for dyslexic readers, and use a magnifier that follows the cursor to help people with low vision focus on specific text. These features make reading easier, more inclusive, and stress-free for everyone.

How we built it

We built ReadAble as a web application using JavaScript for the frontend and integrated Gemini AI to process and simplify the text. Each PDF is parsed and divided into interactive cards. ElevenLabs’ text-to-speech API provides narration for each section. We implemented an OpenDyslexia font toggle and a magnifier that follows the cursor to improve accessibility. Users can interact with the cards to view summaries, simplified explanations, or listen to the text, all in a smooth, accessible interface.

Challenges we ran into

One of the main challenges was ensuring the PDFs were parsed accurately into sections, especially with complex layouts or images. Integrating Gemini AI to generate reliable summaries and simplified explanations for a variety of texts also required careful testing. Lastly, syncing the narration from ElevenLabs with the correct sections while keeping the UI responsive was tricky.

Accomplishments that we're proud of

We’re proud that ReadAble can take any PDF, break it down into understandable sections, and provide both summaries and narration in a single interface. Creating a tool that truly improves accessibility for users with different needs and learning styles was a major achievement. We also managed to make the user experience intuitive, with interactive cards that make reading less overwhelming.

What we learned

We learned how to integrate AI and text-to-speech technologies into a single workflow, and the importance of designing with accessibility in mind from the start. We also gained experience in handling diverse PDF formats, creating responsive UI components, and balancing functionality with simplicity for users of all ages and abilities.

What's next for ReadAble

In the future, we hope to expand ReadAble’s reach to more students, educators, and individuals with attention or reading difficulties to help improve reading ability. We plan to add more personalization options based on different preferences, support additional file types, and enhance our educational features to further promote reading literacy for all ages in Canada.