Web visibility helper


Published on

Presentation regarding a small extension for Google Chrome I made as a project for my CLIW class.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web visibility helper

  1. 1. Largu C. Dragos Constantin An 3 Semian B Grupa 1
  2. 2. Lots of people have problems viewing web content due to health problems that affect vision and hearing Accessibility options come to provide a suitable experience so that people can experience web pages without problems Hearing can be aided by using visual enhancements, and vision can be aided by audio enhancements
  3. 3. Obviously, a good solution would be to provide some sort of application which would combine audio and visual enhancements A good idea would be to create a small lightweight web browser extension Some basic principles that need to be followed: Flawless experience Enhance visual clarity Aid hearing
  4. 4. I propose a lightweight browser extension for Google Chrome (because of how easy it is to create and maintain an extension) My extension will allow the user to • Zoom in to the page • Speak a selected portion of text • Restyle page contents for easier reading Basically the extension is divided into these 3 parts
  5. 5. The interface is very simple There is a button with the icon of a small magnifying glass, on the Chrome tool bar Once this button is clicked, a small pop-up appears which allows the user to zoom in to the text Once the icon is clicked, the page contents automatically restyle
  6. 6. In order to restyle the contents, I used a free Java Script and CSS library called ReadabilityRedux Using this library, I inject the necessary CSS code into the web page when the Magnifying Glass button is pushed Basically this function makes the font size bigger, sets a large margin on the sides, and applies an easy to read font type
  7. 7. The zoom function basically injects CSS code in each page and sets the dimensions of the contents Inside the small extension pop-up, there are PLUS and MINUS buttons for adjusting zoom level Alongside the small Magnifier Icon, there is an even smaller zoom level indicator (generated number with a colored background) Settings are stored and loaded via cookies
  8. 8. Using the Google API for speaking text, and Chrome’s TTS engine, I can “speak” a selected portion of text I’ve added an element to the context menu, which appears when you right-click a selected portion of text After selecting, the text will be sent to Google and an audio will be rendered The text is filtered and a phrase of maximum 90 words is constructed
  9. 9. Many people ignore accessibility issues, which is not a good thing, since this can result in many lost users A great idea would be to combine as many of the existing solutions as possible My ideas are not original, I’m not the first one to think of an extension which can speak text, but I am the first one to think of combining these ideas into a single extension, which of course, can be extended and improved