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

WordPress site

A tailor-made Orange Confort+ for WordPress plugin is available. Thanks to @RavanH.

N.B: This plugin is not directly maintained by the Confort+ core team, in case of issues please use the plugin support from wordpress

On your own 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, or define them in your own script before Confort+ scripts inclusion:

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.