WebAccessibilizer

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

Download

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

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

Make a donation

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

Our bank of shared parameter files

Access our page of accessibility shared parameter files.

Purpose

When imported into grease monkey or tamper monkey, this script add configuration forms to help blind user to attach labels, create shortcut to read/execute/focus element in web pages he visits.

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.

Select the one you want to customize before doing tab to go to the next field.

However, note that you can force the vocal synthesis to say somme informations on the dom explorer by pressing these keys::

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 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 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 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:

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.

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:

indicate elements with the id "bt_close";

indicate elements with the class "minuscule";

indicate elements with the name "txt_town"

simply indicate div elements

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:

Assign the following key shortcut to execute the following JS code;

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:

Additional fields

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

They can be:

For example: ctrl+shift+s, shift+3, alt+shift+z will be recognized.

See below the of key codes accepted by the WebAccessibilizer.

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.

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

How to install tamper monkey on google chrome

You must follow the following steps:

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 beginin 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.

However, the installation process is not finish because it is still necessary to insure oneself that tamper monkey is activated and get enough right to execute our script.

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

10- 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.

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

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

13- 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 must follow the following 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:

mailtoloco2011@gmail.com

from Cameroon, in central Africa

log informations

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

v 0.7

v 0.6

v 0.5

v 0.4

v 0.3

My other projects

See my other projects at:

https://www.stsolution.org/home.php