Accessibility Extension

Inspiration

This project was inspired by the need to make web content more accessible to individuals with different learning disabilities, such as dyslexia and attention deficit disorders. Many users find it challenging to process large blocks of text, especially on complex websites. By providing features like content summarization and quiz generation, I could improve users' ability to learn and educate themselves on the web, lowering one of many educational barriers.

What I Learned

Throughout the development of this project, I gained experience in:

• Web Scraping: Using BeautifulSoup to effectively extract text content from various web pages.
• Flask: Built a backend server to process requests and communicate with external APIs.
• API Integration: Leveraging the Magic Loops API for text summarization and quiz generation.
• JavaScript: Enhancing user interactions within the browser extension, including dynamic content updates and loading indicators.
• Accessibility Design: Learned how to make accessible design in making web content usable for everyone.

How I Built the Project

1. Backend: I built a Flask server that handles scraping web content using BeautifulSoup and communicates with the Magic Loops API for quiz generation and summarization. The server processes incoming requests from the browser extension, scrapes the content, sends it to the API, and returns the generated output.
2. Browser Extension: The front end of this project is built as a browser extension using HTML, CSS, and JavaScript. It allows for the extension to:
   • Generate quizzes to test comprehension.
   • Summarize the webpage content to simplify learning.
3. APIs: Integrated the Magic Loops API to handle LLM tasks like quiz creation and content summarization.

Challenges I Faced

• Cross-Origin Restrictions: One of the main challenges was dealing with cross-origin restrictions while trying to scrape content from different web pages. This issue was handled by using Flask-CORS to allow cross-origin requests between the Flask server and the front-end extension. This project was my first time making something "full stack," so I learned much about communicating between files.
• Dynamic Content Scraping: Extracting meaningful text from a wide range of websites was difficult due to the varied HTML structures. I targeted specific tags (p, h1, h2, and h3) to capture the most relevant content.
• API Response Handling: Sending and receiving API responses without sending insufficient data.
• User Interface Design: Crafting a user-friendly interface for individuals with learning disabilities required thoughtful design choices, such as incorporating a dyslexia-friendly font and ensuring a clean, uncluttered layout.

Future Enhancements

I plan to improve the extension by:

• Allowing users to adjust the complexity of the generated summaries.
• Add Generative UI
• Add a speech-to-text feature to allow words to be highlighted while the user reads
• Add visual aids to enhance comprehension

Built With

• chromedev
• css
• flask
• html
• javascript
• magicloopsapi
• python