orange-opensource/orange-confort-plus

The target of Orange Confort+ functionalities is to enhance user experience on web sites, which are already accessible, or still accessible. Orange Confort+ provides these services : Typography - user may change: font size, space between words, characters and lines, font-face to Open Dislexic Layout: cancel layout, text align left, numbering list items, modify navigation links appereance, disply a reading ruler Colors : Modify foreground/background colors Behavior: direct access to main content on page load, automatic selection of page clickable elements with a user defined delay, page scrolling on simple user on hover. Be careful, Orange Confort+ does not improve the accessibility level of a web site: blocking points still stay blocking points, with or without Orange Confort+.

Orange-Confort-plus

Orange Confort+ aims to enhance user experience on websites. It works best when said websites are fully accessible.

Features

• Typography:
  • font size,
  • word-spacing,
  • letter-spacing,
  • line-height,
  • font-face, among Arial, Luciole, Open Sans, Open Dyslexic and Accessible DfA.
• Layout:
  • cancel layout,
  • force left-aligned text,
  • number list items,
  • customize links appearance,
  • display a reading mask.
• Colors: modify foreground and background colors.
• Behavior:
  • direct access to main content on page load,
  • automatic selection of page clickable elements with a user defined delay,
  • page scrolling on simple user on hover.

Caution

Orange Confort+ does not improve website accessibility: blocking points still stay blocking points, with or without Orange Confort+.

Table of contents

• Browser extension
• Deploying Orange Confort+ on your website
• Contribute
• Bugs and feature requests
• Copyright and license

Browser extension

• Firefox
• Chrome

Deploying Orange Confort+ on your website

To deploy Orange Confort+ onto your domain, a prepackaged version is available: simply add the dist/serveur folder to your website.

Customize path

Important

If dist/serveur/ content is placed at your website root, you do not need the following action.

Edit JavaScript files to change the following variables:

var hebergementDomaine = 'https://example.com'; // Your website origin
var hebergementFullPath = hebergementDomaine + '/myconfortplus/'; // Path to Confort+ folder

Tip

Pay attention to the protocol you are using, HTTPS or HTTP.

Call Confort+

To initialize Confort+, call it before the body closing tag using the correct path:

<script type="text/javascript" src="https://example.com/myconfortplus/js/toolbar.min.js"></script>

Note

User settings are saved onto your domain and are never shared with other websites, or extension.

Branding

If the button doesn't comply with your brand, you can create a link that will trigger Confort+. To do so, just include those scripts along with the aforementioned:

<script type="text/javascript">
	accessibilitytoolbar_custom = {
		// MANDATORY
		// ID of the target container which will include the link. If not null, activate the display in link mode. The link will be added as the last element of the target container.
		idLinkModeContainer : "id_target_container",

		// OPTIONAL
		// CSS class applied on the link to unify its appearance with the site.
		cssLinkModeClassName : "linkClass",

		// OPTIONAL
		// When the service is displayed as a link in the page, a skip link is automatically added at the top of the page. If you already have a group of skip links, you can specify the target container where the skip link will be added. The link will be added as the last element of the target container.
		idSkipLinkIdLinkMode : "",

		// OPTIONAL
		// CSS class applied on the skip link
		cssSkipLinkClassName : ""
	};
</script>

Contribute

Clone

git clone https://github.com/Orange-OpenSource/Orange-Confort-plus.git

Install dependencies

npm ci

Start local server

npm start

It should build all the things and open your browser to http://localhost:9010.

You're ready to update files in /src: any changes will trigger a build and reload your browser.

For mor specific needs, take a look at existing scripts in our package.json.

Build all the things

To build HTML, CSS, JS and static assets for both the docs and the extension, run:

npm run build

Extension-specific scripts

We're using Mozilla's web-ext to ease our development workflow.

Package extension

A packaging script based on web-ext build exists for both Firefox and chromium, taking care of their specific manifest.json using npm pre-hook.

npm run zip

Lint extension

Based on web-ext lint (using addons-linter under the hood), we're linting the Firefox package.

npm run lint:ext

Load extension

web-ext run is used to load extension. There's a separate script for Firefox and Chrome.

npm run load:firefox
npm run load:chrome

Warning

As of today, those scripts are quite buggy on Ubuntu if you use Firefox through snap. See #108 for more context.

Work on Confort+ website

If you need to work on Confort+ very own website, there's a specific script:

npm run start:docs

Modify Confort+ icon-font

A custom icon-font is used in Confort+ toolbar. If you need to modify it, you're encouraged to use IcoMoon app and import existing IcoMoon settings.

You can find a detailed workflow in Boosted v4.6 documentation for icons.

Bugs and feature requests

Have a bug or a feature request? Please first check the issues and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Copyright and license

Code copyright 2014 - 2023 Orange. Code released under the GPLV2 license.

Third party assets

Luciole Font Family © Laurent Bourcellier & Jonathan Perez, CC-BY.

orange-confort-plus's Issues

Uncaught TypeError: Cannot read property 'appendChild' of undefined

i got the following error on my console when deploying Confort+ on my website and the website doesn't show anything

toolbar-min.js:4 Uncaught TypeError: Cannot read property 'appendChild' of undefined
at new UciStorage (toolbar-min.js:4)
at Object.start (toolbar-min.js:20)
at toolbar-min.js:20

PS: I'v inserted toolbar-min.js file in functions.php of my child theme like this :

function my_theme_scripts_function() {
    wp_enqueue_script( 'myscript', get_stylesheet_directory_uri().'/myconfortplus/js/toolbar-min.js');
}
add_action('wp_enqueue_scripts','my_theme_scripts_function');

lien vers le script

Bonjour, je reviens vers la discussion#39 où il est écrit ceci 👍

<script type="text/javascript"> accessibilitytoolbar_custom = { // MANDATORY : ID of the target container which will include the link. If not null, activate the display in link mode. The link will be added as the last element of the target container. idLinkModeContainer : "id_target_container", // OPTIONAL (put it as comments if useless) CSS class applied on the link to unify its appearance with the site. cssLinkModeClassName : "linkClass", // OPTIONAL (put it as comments if useless) When the service is displayed as a link in the page, a skip link is automatically added at the top of the page. If you already have a group of skip links, you can specify the target container where the skip link will be added. The link will be added as the last element of the target container. //idSkipLinkIdLinkMode : "", // OPTIONAL (put it as comments if useless) CSS class applied on the skip link //cssSkipLinkClassName : "" }; </script>

Je ne sais pas comment l'utiliser. Mon script à moi est 👍

<script type="text/javascript" src="http://aciah.accessdvlinux.fr/confortplus/js/toolbar.js"></script>

comment faire pour avoir un lien à peu près comme ça 👍 confort+
je vous rappelle que je ne suis que pifo-bidouilleuse mais je voudrais bien y arriver quand même.
Ce lien, avec une tabulation, permettrait d'atteindre Confot+ sans utiliser la souris.
merci

Installation sur Windows 7 32 bits, IE 11

Après installation sans erreur, l'icone apparaît bien dans la barre de commandes, le module est bien activé, mais Confort+ ne charge jamais dans la page.

release 4.2.0
9d30c49

configuration option - allow to disable all option individually easily

Following this question : #18

Need to check howto propose a configuration input file allowing to quickly enable/disable option of the toolbar

color panel setting display update

Hide custom colors panels behind a button "my custom colors" which display colors panel and activate the option
Also use flex to set each predefined color option the same size

reading mask opacity is quite oppressive

Reduce the default mask opacity value from .9 to .5, and add a transition effect when apply it

Also add a setting option, allow the user to define opacity value (light = 25%, medium = 50%, dark = 90%)

reading mask - add a shortcut to close it

Add a shortcut "ESC" key to disable the reading mask when it's activate
Also add a close icon on the right of the reading mask, this icon is display only when the mouse is over it, or when the user focus it
When the user activate the reading mask also add a text into it to explain "how to close it" (described the use of shortcut, and the close icon on hover)

Migrate from Grunt to npm

Replace gruntfile.js by node task in package.json

Personnalisation du bouton

Bonjour,

Chouette module d'accessibilité ! Bravo à vous.
Une petite question cependant, il y a t'il un moyen d'ajouter plus tard la personnalisation de l'emplacement du bouton ? Il s'ajoute par défaut en haut du body mais j'aurais aimé le mettre autre part.

Merci par avance,

Adding analytics

Adding Google analytics into C+.

Taille du texte

Bonjour

Tout d'abord merci pour votre travail.

Nous sommes en cours d'intégration de votre outil dans notre portail (www.toutatice.fr).
Nous ne parvenons pas à faire fonctionner les changements de taille du texte (alors que CTRL+/- fonctionne bien). Le souci provient vraisemblablement de notre portail, aussi pouvez-vous nous rappeler le pré-requis pour pouvoir obtenir cette fonctionnalité svp ?

Merci

Doc - Add specification for link mode

Following question #38 I think there's a need to add a section in readme to explain how to customize button/link position in server mode

Paramètre de CDU : avoir un séparateur vertical pour identifier les autres options.

Bonjour,
Dans les paramètres du CDU on retrouve dans les onglets "Typography", "Layout" et "Color" plus d'une colonne de paramètre. L'espacement entre chaque colonne est trop grand.
Le problème peut-être génant pour des personnes utilisant CDU en complément d'une loupe d'écran; En général cette population utilise les loupes d'écran (loupe Windows, ZoomText ou SuperNova) à un niveau de zoom très faible. Il n'en reste pas moins que l'espacement entre les 2 colonnes est plus prononcé.
L'idée pour ne pas cassé ce design serai d'ajouter des barres de séparations vertical pour les onglets "Typography" et "Layout" afin d'indiqué à l'utilisateur qu'il y a encore des trucs derrières.
Cdt,

Zougane

wording - replace default color by initial color

Users are not aware with "default" wording, so replace it by "initial"

focus auto moved to "on/off" button after each option update

By using keyboard or mouse to update option in advanced panel, after each update for example font-size normal -> big the focus is moved to "on/off" switch button.
-> Can be reproduced on the latest Chrome and Firefox official extension.
And also on the master branch code

Adding the Luciole typeface

Hi,

Did you heard about the Luciole typeface designed specifically for visually impaired people?

This typeface considerably improves the readability of the text and is also appreciated by some dyslexic people (or non dyslexic too!). It could be very useful to add it to the possible typefaces in the Confort+ toolbar.

What do you think?

Thank you

Functionality to stop animated images (GIFs and others)

Hello,

In recent years, animated GIFs have become fashionable again and pose real readability problems when websites have not set up a system to stop them.

Recently, I came across this Stack Overflow topic where I found a beginning of a solution and I made it a bookmarklet. The proposed code only covers cases where GIF images have a .gif extension. However, on the web, there are sometimes GIFs where the URL of the image has no extension, or they can be .webp format. You can also sometimes find animated SVG images...

On the same Stack Overflow topic, there is another answer with another piece of code, however, if I enable it, it hides non-animated images and therefore does not really have the expected effect.

In short, I think that a feature to pause animated images would have a place in the Confort+ toolbar to make it easier to read web pages. The top of the top would be that it automatically stops them and adds an individual button on each one to launch them and then stop them again (play / pause). A Firefox extension did this before Firefox completely changed the way it worked; unfortunately it no longer exists.

I hope you can add this option.

Thank you for what you are doing.

add option all in caps

For text case option, add the all in caps option in complement of First Caracter To Upper and to lower option

Keyboard shortcut

Add a keyboard shortcut (the best would be if we can choose/change it) to activate/deactivate Confort+

wording "text case" update

As user doesn't understand "Text Case" in french replace it by "Majuscule / minuscule" label (in French only at time)

Path-based XSS when using distant script

Hi there,

While working on a project, security audit informed me about this: on a page calling //SERVEUR/js/toolbar-min.js (then requesting http://SERVEUR/cookie.php), adding script on request origin — like example.com/?"><script>alert('check!');</script> — will execute script in Comfort+ response…

In my example an alert will be displayed by comfort.orange.com on example.com.

The response contains the following:

  sendBackData();
  function sendBackData()
		{  
			if(window && window.parent && window.parent.postMessage)
			{
window.parent.postMessage('00006510006506506500000000000000000065000000000', 'http://example.com/?"><script>alert('check!');</script>');
			}
		}
    function redirect()
    {
      document.location.href="cookie2.php?origin=http://example.com/?"><script>alert('check!');</script>&hostname=example.com";
    }

I'll try to use a standalone version but maybe I did something wrong? Please let me know :)

Changing language does not work

Hi,
When I click on the language switcher under Mozilla Firefox, I got these errors:

TypeError: b is null
    accessibilitytoolbar.reloadToolbar() toolbar-min.js:13
    UciIhm.changement_langue() toolbar-min.js:11
    accessibilitytoolbar.createObjectBehaviour/<() toolbar-min.js:12

and

TypeError: b is null
    accessibilitytoolbar.reloadToolbar() toolbar-min.js:13
    UciStorage/this.receiveMessage() toolbar-min.js:4

Then I must reload the page to see the language changes,

"confort +" button position

is it possible to move "confort +" button to a div element ?
actually the button is created after the body element, i want to create it into a menu
thanks a lot !

Does not init on XHTML page

It seems that Orange + extention for Firefox does not init on XHTML pages.
Console output :
not well-formed(unknown)
mismatched tag. Expected: .

Upgrade reading mask size

Update reading mask size, set the size as fixed to 90px, remove the height option for the user

[Documentation] "Build your dist"

Hi,

In README.md you say:

• Clone the repo: git clone https://github.com/Orange-OpenSource/Orange-Confort-plus.git.
• Configure your protocol, domain and deployment path into config.json file.
• Build your dist, deploy and look at the testpage.html

Can you provide a full build procedure?

custom max and min font size

How we can provide custom values for maximum and minimum font size in confort+?

ShortCut usability/a11y tests

@liyokuna

• change text: Edit the keyboard shortcut value --> Keyboard shortcut value

• the button to choose the key: <button class="ucibtn ucibtn-sm ucibtn-secondary uci_bton_menu cdu_c uci_dropdown" aria-haspopup="true" aria-expanded="false" id="uci_shortcut_menu_button" type="button">Q</button> , you must add:

1. an aria-labelledby pointing on the id of html element containing "keyboard shortcut value" and add the chosen key in this text (like "keyboard shortcut value (currently Q)") and this key value must be dynamic (user choice)
2. an title attribute, with exactly the same text as for the aria-labelledby (like "keyboard shortcut value (currently Q)")

• don't forget to modify the submenu nav
  Good luck !

Dysfonctionnements Confort +

Bonjour,

Utilisateurs de votre outil sur notre site (www.lesmediatheques-rennesmetropole.fr), nous constatons des dysfonctionnements depuis quelques semaines. En effet, deux options ne sont plus effectives, alors que l'outil fonctionnait encore intégralement récemment.

Les options ciblées sont l'agrandissement de la taille de la police ainsi que la couleur du texte :

• L'agrandissement de la taille de la police n'effectue plus aucun changement sur nos pages,

• La bascule du texte en couleur vers le noir sur fond blanc fonctionne partiellement.

Nous souhaitons mettre en avant prochainement votre service dans un article dédié, mais nous ne pouvons actuellement assurer cette promotion si toutes les options ne sont pas à ce jour fonctionnelles.

Merci par avance pour votre retour,

Activer Confort+ sur mobile en désactivant les aides motrices

Bonjour,

Pour quelle raison la barre d'outil n'est pas affichée sur les supports mobiles ?

Cf dans le fichier toolbar.js généré (ligne 6608) : if(!accessibilitytoolbar.isTouchDevice(navigator.userAgent || navigator.vendor || window.opera) && !accessibilitytoolbar.inIframe())

Par avance merci pour votre réponse

navigation link appearance - update the default setting and position

move Navigation link appearance from layout panel to color one
Remove emphasis option (bold, underlined, box) set all link underlined when option is activated
Don't set default color to black, set it to default web links value, but let the user choose the better color for him
standard link - #0000FF //blue
visited link - #FF007F //purple
active link - #FF0000 //red
Also don't hide the sub-option, let it as disabled when the option is not activated

add new font-family

Add 2 new font-family : open sans and DFA font :
https://fonts.google.com/specimen/Open+Sans
https://github.com/Orange-OpenSource/font-accessible-dfa

Replace the actual button option by a select element in the following order :

1. Arial
2. Open sans
3. DFA
   4 OpenDyslexic

possibilité de configurer confort plus

Bonjour,

existe-t-il des paramètres de configuration permettant de désactiver certaines options ou d'avoir la toolbar ouverte par défaut ?

Merci

remove on/off button for extension mode

As it can be usefull for server mode, the user can quickly disable confort+ with the extension button in the browser.

Also, at the first extension use, the quick setting bar is displayed, until the user closed it with the close icon

Uncaught TypeError: Cannot read property 'style' of null

Hi,

After having cliked on the + icon once in order to show the Comfort toolbar, when I click a second time (in order to hide the comfort toolbar as I would expect it to work), I get this error:

• Uncaught TypeError: Cannot read property 'style' of null
• Trace:

UciIhm.close_menu   @   toolbar-min.js:11
accessibilitytoolbar.hide   @   toolbar-min.js:13
accessibilitytoolbar.toggle @   toolbar-min.js:13

Invisible

Bonjour, j'ai mis Confort plus sur mon site mais il y a deux personnes qui disen t ne pas le voir, alors que je le vois, moi. Que peut-il se passer ? Voir le site ici : aciah.accessdvlinux.fr
merci !

Installation de la toolbar en local

Bonjour,

J'essaie d'installer la toolbar sur un site WordPress vierge. Pour cela, j'ai modifié dans le fichier "toolbar.js" (du dossier dist/serveur/js) les variables "hebergementDomaine" et "hebergementFullPath" :
var hebergementDomaine = 'http://localhost/confort-plus';
var hebergementFullPath = hebergementDomaine + '/wp-content/themes/confort-plus/';

Le fichier "toolbar.js" est bien chargé et l'iframe pour le cookie est bien créé. Cependant les CSS et les images ne sont pas appelés, alors qu'ils sont placés dans le bon répertoire ("/wp-content/themes/confort-plus/images", "/wp-content/themes/confort-plus/css"), aussi le bouton "Confort +" n’apparaît pas.
Les dossiers contenant les assets de la toolbar ont les droits d'écriture nécessaires et il n'y a pas d'erreur dans la console du navigateur, je ne vois donc vraiment pas d'où peut venir le soucis...

Je vous remercie !

Langue par défaut

Bonjour

Existe-t-il un moyen de changer la langue par défaut svp ?
EN -> FR par exemple.

Faut-il modifier locale ou defaultLocale dans toolbar.js ou est-il possible de faire l'équivalent via accessibilitytoolbar_custom ?

Merci

erreur 406

Bonjour,

J'essaie d'installer "Orange Confort Plus" sur un site WordPress, mais cela ne fonctionne pas. J'ai bien effectué les étapes suivantes :
1 - Transférer le contenu du dossier "dist/serveur" dans un dossier interne à mon site internet "myconfortplus".
2 - Modifier "hebergementDomaine" et "hebergementFullPath"
3 - Créer le lien "<script>" vers le fichier "toolbar.js.

Le lien est fonctionnel, mais le bouton ne s'affiche pas. A la place, dans l'inspecteur Web de Chrome, cela m'affiche une erreur "406 (Not Acceptable)", pour la ligne 700 du fichier "toolbar.js" : document.getElementsByTagName('body')[0].appendChild(oNewNode);

Pouvez-vous m'éclairer ?

Cordialement,

Les profils créées disparaissent après fermeture du navigateur

Bonjour,

Lorsque l'on crée et sauvegarde un ou plusieurs profils, ces derniers restent en mémoire tant que le navigateur reste ouvert. Il est possible de fermer la fenêtre, d'en ouvrir une autre et de les retrouver.

Cependant lorsque l'on ferme entièrement le navigateur, qu'il s'agisse de Chrome, Firefox, IE ou Edge, les profils ne sont plus retrouvables.

Merci à vous !

Replace font-size zoom buttons by A- A+ and improve the size range

A- is disable when user is at the lower range, A+ is disable when user reach the max
Range values : 25, 33, 50, 67, 75, 80, 90, 110, 125, 150, 175, 200

motor help - don't hide options by default

show option as disabled in the panel, but never hide them

remove letter-spacing option

THis option is not usefull for any users

First Letter To Upper - wording update

Reduce the wording to "First Letter", as issue #25 add a new option wich clarify the context

Indication de disponibilité du service ConfortPlus sur un site.

Bonjour,
Bonne année et tous mes voeux.
Le service est super pratique mais comment l'utilisateur ayant installer son extention Chrome ou Firefox va être informé de la disponibilité du service ConfortPlus sur le site ou il se trovue ?

Pouvons-nous imaginer que l'icône du CDU affiche une notification ou aune autre action afin d'avertir l'utilisateur ?
Zougane

Plugin

Bonjour,
Je suis en train de créer un site avec le thème DIVI (wordpress). Je souhaiterais utiliser Orange Confort + mais je ne suis pas développeur.
J'aimerais savoir s'il existe un plugin Orange confort+ qui me permettrait d'en disposer sur mon site.
D'avance merci pour votre réponse,
Cordialement

Keyboard shortcut for server side

Hello

I will upgrade Confort + by adding a shortcut keyboard.
The purpose of it, it's to open Confort + toolbar using a shortcut keyboard. That shortcut will have a default value editable by the user for convenient reasons.
This is quite related to this enhancement #15

Regards

installer orange confort plus

Bonjour, j'ai bien regardé les explications, mais je butte sur l'installation. J'ai bien vu les fichiers dist/serveur/js/toolbar.js et dist/serveur/toolbar-min.js et j'ai compris comment les modifier. Mais il me manque l'essentiel : les fichiers de base.
Chez mon hébergeur j'ai créé un dossier confort-plus, je voudrais y installer les fichiers nécessaires, mais je ne ais où les trouver. J'ai cliqué sur dis/serveur et j'ai fait : enregistrer la cible du lien sous. Cela me donne un fichier "serveur" dans mon dossier Téléchargements. Mais ensuite ?
Pouvez-vous m'aider s'il vous plaît ? Merci

Improvement - Keep only one color shortcut button in the quick settings toolbar

Replace the actual 2 buttons :

By a single one, wich will work as a toggle: if the user don't change the default colors, the button is

If the user have change the default color, the button will have font-color inside and for border, and background color as set by the user :

put back the reading ruler

To complete the reading mask, put back the reading ruler, but reduce the option.
Set line width to 3px all time, and set the color to font-color value
The user can choose between vertical or horizontal ruler