UpBrowser

UpBrowser

• UpBrowser is an enhanced browsing context that provides the non-visual browsing of a webpage with the following core functions
  • keyboard navigation of the webpage contents, i.e. next/previous sentence, next/previous header, move up/down header level
    • NVDA provides examples of these kind of keyboard shortcuts. Note that NVDA does not recognise phrases as such, but lines (I haven't tested this myself, just going on the shortcuts)
    • Here a ChromeVox examples of keyboard shortcuts. Again, sentence level navigation does not seem to exist
    • JAWS, $900 from Freedom Scientific, also allows navigation by headings
    • Opera Browser has keyboard navigation built-in Note, I haven't been able to get the heading navigation to work
    • Windows 10 Narrator has a Scan Mode which allows the keyboard navigation of a webpage apparently (can't get it to work) but not the TTS of the content.
  • highlighting of the current sentence
  • TTS of the current sentence
    • Highlight that TTS is native to Web Speech API, do a simple demo
    • http://codesamplez.com/programming/html5-web-speech-api
  • Allows a user to set preferences such as font, font-size, color scheme
• The rules for the semantic structure of the webpage/document are described by WebAIM here

Accessibility enhancements

• Font size/color, background color adapted per student
• Text-highlighting as student moves through text
• Text-To-Speech with highlighting
• Enhanced navigation by keyboard (and other enhanced accessibility input devices)
• A user can define a profile that will be applied to all documents read in UpBrowser

Implementation

• It is crucial that sentence by sentence navigation is provided.
  • This will involve parsing the original html to provide some kind of markup that identifies sentences.
  • QUESTION : If it's so crucial, then why hasn't ChromeVox or NVDA implemented it ??
    • Because "Sentence Boundary Detection" is damn hard. (All About NLP Natural Language Processing and tokenizing)
      • https://github.com/Tessmore/sbd
      • https://github.com/fwonkas/highlight
      • http://www.aclweb.org/anthology/C12-2096 (Academic paper)
      • http://stackoverflow.com/questions/11655175/sentence-boundary-detection-in-html
  • Note that sentence (boundary) detection is already implemented in DAISY http://www.daisy.org/comment/1682
  • https://github.com/daisy/pipeline-mod-nlp : The Daisy Pipeline 2 NLP module which provides sentence/word detection
• Implementation will be similar to ChromeVox, which I have never been able to get working
• An intitial implementation could function only with headings, perhaps by generating a TOC automatically at the beginning which could then be traversed by UP/DOWN ??
• See existing Firefox addons which deliver TTS , some with sentence highlighting
  • The missing feature in the addons is to implement use of the keyboard, iE.. most of them seem to need to have a paragraph selected
    • TTSFox https://addons.mozilla.org/en-US/firefox/addon/ttsfox/?src=search
      • No keyboard navigation, you need to select the TTS voice to use
      • Select text, click on add-on icon, select voice, click on speak
    • Native Text To Speech https://addons.mozilla.org/en-US/firefox/addon/native-tts/?src=search
      • Select text, right click, select add-on option
      • NOTE : This does not offer sentence/phrase highlighting
    • Text-to-Speech Google™ & HTML5
      • This does a form of highlighting, it only seems to work on paragraph blocks. If there is a paragraph with multiple sentences then it will highlight individually. Not sure if this will do the job. That's why I'm writing all these separate sentence. Doesn't make much sense otherwise, does it ?

References

• Reader View
  • We could take inspiration from Firefox Reader View mode or the Google Chrome Reader function.
  • The actual JS code used by Firefox Reader View is Readability.js
  • There is a good discussion on how the readibility.js rules are applied here.
  • The discussion seems to indicate that a para element must have at least 516 characters in 7 words inside the text which will pose problems for the using Reader View (this may be the dealbreaker that obliges to make an extension that provides alot of the functionality of Reader)
  • NOTE : Firefox Reader View TTS implements
• Zen Mode in Le Monde articles, very similar to Readability.js

Using UpBrowser

• UpBrowser can either be activated in the following ways
  1. When browsing any html page from upscribers
  2. On any webpage once the corresponding Firefox extension is installed

Potential Technical components

• Mousetrap.js for handling keyboard shortcuts

Spec pour CodeFest

• Navigation par clavier/manette
  • Par phrase, par P/LI/H1/H2/H3/H4/H5
    • NVDA provides examples of these kind of keyboard shortcuts. Note that NVDA does not recognise phrases as such, but lines (I haven't tested this myself, just going on the shortcuts)
    • Here a ChromeVox examples of keyboard shortcuts. Again, sentence level navigation does not seem to exist
    • JAWS, $900 from Freedom Scientific, also allows navigation by headings
    • Opera Browser has keyboard navigation built-in Note, I haven't been able to get the heading navigation to work
    • Windows 10 Narrator has a Scan Mode which allows the keyboard navigation of a webpage apparently (can't get it to work) but not the TTS of the content.
• TTS
  • De préference avec TTS local sinon Google Translate etc.
• Surlignage de phrase en cours de lecture
• Modifier/sauvegarder profil de consultation (police/couleurs/taille)
• Géneration automatique de TOC

AMIS

• AMIS reader