A web javascript to help blind to make html web pages more accessible


If you are hurry, click the link below to directly download this web script in your web browser

Install or update the 1.3 version of the WebAccessibilizer in your web browser

Or you can choose to comeback to the previous version

Make a donation

You can support our work by making a donation to stsolution.org

Our bank to share parameter files

Access our page of accessibility shared parameter files.

Purposes of the WebAccessibilizer

When imported into your web browser, the WebAccessibilizer have essentially four goals:

1. To allow you to personnalize web site you visit.

The WebAccessibilizer adds several configuration forms into your web browser to help blind user to personnalize web sites by for example attaching labels, saying text by the vocal synthesis, creating shortcut to read/execute/focus element, changing the layout, etc.

2. To allow you to share configuration/personnalization files with other users.

Via the online bank of shared file, you can submit or download configuration files for a large range of web sites.

This allows to the community to progressively make accessible all the web.

3. To allow you to easily handle video and audio on web pages.

The WebAccessibilizer embed an alternative and accessible multimedia player, allowing by key shortcut to handle audio and video objects presents in web pages.

According to web sites, you can allow that the multimedia reader appears automatically or be called by shortcut.

You will find those options in the quick parameters dialog box.

4. To help blind web developer to studdy the layout of web pages they visit.

The WebAccessibilizer can be quite useful to blind web developpers by allowing them to study the layout of pages they create or visit. Notably by the use of: * the treeview of exploring and getting informations on each element of the dom; * the form to visualize CSS code related to the current web page; * the form to visualize javascript codes related to the current web page.

How to install the WebAccessibilizer

You should import the file WebAccessibilizer.user.js into your web browser by extensions as grease monkey for firefox or tamper monkey for google chrome.

If you don't have those extensions installed on your web browser, look at the end of this page:

main key Shortcut

You should make ctrl+shift+f2 to open the main accessibilization form.

Before executing this shortcut, if you want to customize a element of the current page, you should place the cursor on it in order this element be selected in the dom explorer of the accessibilisation form when it opens.

description of the accessibilization form

On the accessibilization form, you will find these fields:

the treeview of dom explorer

You move between the hierarchy of the elements of the current page with arrow keys.

The purpose of the treeview is to select an element of the page you want to customize.

However on that treeview, note that a context menu is available with more than 20 action to perform on the currently selected element.

Note also that you can directly force the vocal synthesis to say somme informations on the dom explorer by pressing some shortcut keys:.

There are the following:

Also note that you can move quickly between the nodes of the treeview by pressing these keys:

As you can see, a blind web developper can quite well use this fields to study a web page.

the button to add a new configuration parameter

When pressed, it opens the parameter form in order to create an accessibilization parameter for the current selected element in the dom explorer. This form will be describe below.

The listview of existing parameters

It is the list of parameters you've already configured.

Note that in this list you can press:

The button to modify the current selected parameter

When pressed, it opens the parameter form in order to modify the configuration for the parameter currently selected in the list of existing parameters.

The button to delete a parameter

When pressed, it delete the current selected parameter in the list of existing parameters. Of course after a confirmation.

The button to access the quick parameters form

It opens a form in whick are present quick accessibility parameters features for the current web site. There will essentially be found checkboxes and textboxes. For some of them for example, will be ask to type the shortcut that will activate their related feature.

Remember that it will be in this quick parameters form that you will be able to activate and make available the personalized multimedia player of the WebAccessibilizer. This one is a perfectly accessible alternative reader, of multimedia objects (video and audio) present on web pages. All its actions will be made with the keyboard, and informations will be read by the current vocal synthesis.

the button to import parameters

This button opens a classical openDialog in order to select on your computer a .wap file that contains configurations parameters. When the parameters to import has not been made for the current web site, it will ask you to confirm the importation.

The button to import parameter by pasting the code

This button opens an input textbox where you can paste the internal code of a parameter file in order to import it.

the button to export parameters

This button opens a classical saveDialog in order to choose where to save on your computer the current web site configuration parameters. When the web browser is configured to automatically start downloading, it will not show you this dialog again. The accessibility parameters of WebAccessibilizer are stored in files with extensions like .wap or .wap.txt.

The button to access the global storage where all parameter files are saved

It will display the interface where all parameter files you saved will be listed. At the bottom, some buttons will allow you to export or import all at once. The shortcut to open this commun storage page is Ctrl+shift+s.

The button to visualize All CSS code of the current page

This button will open a new form where all CSS codes related to the current web page will be listed, and where will be proposed a text field where will be displayed the CSS content of those files.

The button to visualize All JS code of the current page

This button will open a new form where all javascript codes related to the current web page will be listed, and where will be proposed a text field where will be displayed the JS content of those files.

The button to access our web site

This button opens our web site where you can review the documentation, update your version of WebAccessibilizer, or be aware of changes version to version.

The button to share the current parameter file with the world

This button send the current parameter file toward our shared bank of parameters on our web site. To work, the current parameter file should be made or modified by you.

The button to access our bank of shared parameters

It opens the web page of shared parameter files made by other users. This page allows you: * To search accessibility parameter files from many criterias * To submit new parameter files

The button to directly update WebAccessibilizer

This button allow you to directly update the WebAccessibilizer from the last version of our web site.

the button close

To close the accessibilization form.

Some other shortcuts

To globally save your parameter files

In the accessibilization form, you can also do:

Note that in the common local storage page, you can save all parameter files at once on you hard drive by a button at the bottom.

to force a non focussable element to be foccused in the dom treeview

Before entering the accessibilization form, in order to solve the problem of elements of the page that are not automatically selected in the dom treeview of the accessibilization form, you can make: Shift+f2; This will give the ability to be focussed to all elements of the current web page. So that, when you will call the accessibilization form with Ctrl+Shift+f2, the last element you were on will then be automatically selected when the dom treeview will appeare. Even this element is a paragraph, an image, a title or something else traditionnaly not focussable.

But also be warned that you should deactivate the auto-select of form field with NVDA or jaws before trying to do Shift+f2. Otherwice, the form mode will be activated each time you move the arrow keys.

Description of the parameter form

This form is used to add a new or to modify an existing parameter of accessibility.

Its fields are the following:

the textbox to describe the purpose of the parameter

Type here in one line the text that describe the roll of the parameter. If there is a shortcut that will be attached, we advise you to write it at the end of the description, so that you can directly see it when parameters are listed.

The checkbox to activate or deactivate the parameter

Always checked by default, you can uncheck it if you don't want that the current parameter is been executed anymore.

the textbox of the date of creation

This field doesn't allow modifications.

The combobox to choose the type of reference

This combobox serv to precise if the reference that will be typed should find an unique and precise element or either a group of elements.

When the value is absolute in this field, the reference to be given should indicate a only one element;

and when the value is "relative" in this field, all elements matching the reference will be collected.

the textbox to type the reference of the dom element

In this field should be typed the reference to identify the element on wich the action would be performed. In a way of speaking it is the path to find the element.

When you opens the parameter form, by default this textbox is automatically fill with the absolute reference of the selected element.

If in the combobox of type of reference you chose "Relative reference", you must modify the content of the current textbox But don't be afraid because it's simple.

You will notice that the referencement system look like the one in the css. But however it has its particularities.

Some examples:

Note that the character "\" (backslash) indicates that the text after will indicate the children of the previous one. In the classical css referencement system it is the space character that do the same thing.

The combobox of action to apply

Here, you should Choose the action to be executed on the html element.

Available actions for the moment are the following:

When some of these action are chosen, it will trigger the apearance of additional field in wich some other argument will be asked to be fill.

Here you can note that: * in the js code to execute you can use some integrated function like - waSayString(text, blInterrupt=false): to say a text by the current vocal synthesis; - waPlaySound(url): to play a sound file; - waShowMultimediaPlayer(): to display the multimedia player of the WebAccessibilizer; - waIsSameKeys(): to get the number of times a shortcut combination have been pressed quickly; - waRandomizeBetween(lDown, lUp): to get a random number between lDown and lUp; - waClipboardCopyText(s, returnFunction=null, saymessage=true): to copy a text in the clipboard.

Additional fields

They apeare or dis apeare according to the currently selected action in the combobox of actions.

They can be:

the button OK

To validate all the changes, close the parameter form, and come back to the main accessibilization form.

the button cancel

To cancel the changes, close the parameter form, and come back to the main accessibilization form.

list of keys accepted in shortcut combinations by the WebAccessibilizer

The following keys can be use to write shortcut combinations you indicate to WebAccessibilizer:

Reminber for those key that the cass is not important.

The symbole + will be the concatainer to create combinations of keys. Example: ctrl+f1

How to install tamper monkey or grease monkey extension on the web browser

How to install tamper monkey on google chrome

We can divide this procedure in two steps: the proper installation, and the activation of tamper monkey.

The proper installation of tamper monkey

You can use the following link to reach the download page of tamper monkey on the google chrome web store:

tamper monkey

But if that link doesn't work, you can follow these steps to search for it directly in the chrome web store:

1- Open a page in google chrome

2- Press alt to go on the menu bar, then go down until the item "more tools"

3- Open its sub menu and go down until the item "extensions" and press enter.

4- In the page for managing extensions that will open should be listed extensions already installed in your web browser. But logically tamper monkey is not yet there. We have to search it on the google web store. So, at the beginning of this page to manage extensions you will find a button named "main menu". Click on it.

5- The main menu scroll down and within its items it will be proposed "open the chrome web store". Click on it.

6- In the chrome web store there is a search textbox that will normally directly get the focus, in which we invite you to type "tamper monkey" and press enter.

7- Within the results that will apeare on the page, the first result that will propose you the button "add to chrome" should normally be the good one. However, read it description til the end before clicking on it.

8- After this procedure, it will be displayed the message that tamper monkey has been correctely installed in your chrome.

The activation of tamper monkey

It is now necessary to insure that tamper monkey is activated and get enough right to execute the WebAccessibilizer.

Let's follow the steps below:

1- We should come back on the page to manage extension that is, let us remind it, is in: menu bar, more tools, extensions.

2- In the extension managing page, you will see that tamper monkey will apeare this time. Read it description, and insure yourself that its button activated is pressed down.

3- After, come back on its button details and click on it.

4- You will then access the configuration window of tamper monkey in which you will insure that the following element are activated:

5- And with all that it will be OK However, know that in this current page you have the button named "extension options". That opens a page where you can configure precisely tamper monkey. For example: activating or deactivating scripts.

How to install grease monkey on firefox

You can use the following link to reach the download page of grease monkey on your firefox:

grease monkey

But if that link doesn't work, you must follow these steps:

1- Open firefox

2- Go in menu bar, menu "tools", menu "complementary modules"

3- In the complementary modules management page that will apeare make tabulation until you will ear "extensions list" If it is not extension that is selected in this list, modify until you ear "extensions"

4- Make tabulation until you will ear "find new extensions" edition. In this textbox, you will type "grease monkey" and press enter.

5- In the result page that will apeare, normally the first result will propose you a link to go on the grease monkey page. Click on it.

6- In the grease monkey's page, you should have a link or a button to install it in your web browser. Click on it.

7- When grease monkey is installed, you should insure yourself that he is activated You go back to : menu bar, menu "tools", menu "complementary modules".

8- In the complementary modules management page that apeares you make tabulation until you reach the list of available extensions. You will find in it the newly installed "grease monkey".

9- In this list, on grease monkey, call the context menu. If in the context menu it apeare an item to activate grease monkey, click on it. Warning ! in some computer, it is necessary to close and restart firefox so that this activation is effective.

information on The autor

The autor of this script is:

log informations

As required by my friend Stefan Moisei, these are the changes by versions applyed to this script:

v 1.3 of the 2022-04-29

in the WebAccessibilizer's main window:

in the dom treeview of the WebAccessibilizer's main window

In the window to create or modify a parameter

In the quick parameter window

General new features

In the presentation page of the WebAccessibilizer on thes web site.

There are now two link to install or update the WebAccessibilizer.

v 1.2

  1. In the vocal synthesis tab:

- The choice to activate the reading by the vocal synthesis of the web browser on the current web site; - The ability to tune parameters of the web browser's vocal synthesis for the current web site; - The assignment of a key shortcut to open the dialog box to tune parameters of the vocal synthesis for the current web site; - The assignment of a key shortcut to refresh the text in the current web page before making it be read by the vocal synthesis; - The assignment of a key shortcut to make read from the cursor until the end of the page; - The assignment of a key shortcut to make read the next paragraph; - The assignment of a key shortcut to make read the previous paragraph;

v 1.1

v 1.0

v 0.9

v 0.8

v 0.7

v 0.6

v 0.5

v 0.4

v 0.3

My other projects

See my other projects at: