feat: update README for #292

README.md

@@ -6,9 +6,46 @@ Pronounced *Alix*. Because it’s simpler.
 [![GitHub version](https://badge.fury.io/gh/ffoodd%2Fa11y.css.svg)](https://badge.fury.io/gh/ffoodd%2Fa11y.css)
 [![Build Status](https://travis-ci.org/ffoodd/a11y.css.svg?branch=master)](https://travis-ci.org/ffoodd/a11y.css)
 
-**The whole presentation lives in the [wiki](https://github.com/ffoodd/a11y.css/wiki).**
-Please note that a substantial work has been accomplished to *document* the whole project, from the Sass layer to each test explanations through CSS selectors and tricks. I suggest you make a tour on [a11y.css documentation website](https://ffoodd.github.io/a11y.css/).
+## Introduction
 
-## Version française
-Le wiki présentant le projet existe également [en Français](https://github.com/ffoodd/a11y.css/wiki/Introduction) !
-Veuillez noter qu'un travail conséquent a été fourni pour *documenter* l'ensemble du projet, de la couche Sass aux explications de chaque test en passant par les sélecteurs et astuces CSS. Je vous recommande de faire un tour sur [le site de documentation d'a11y.css (en anglais)](https://ffoodd.github.io/a11y.css/).
+Pronounced "Alix".
+
+This CSS file intends to warn developers about *possible risks and mistakes* that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
+
+When activating the stylesheet, a tip should appear beside each incriminated elements, displaying what’s going on.
+
+*This file is not a replacement to a complete tool such as [aXe](https://www.deque.com/products/axe/), [Tanaguru](http://www.tanaguru.com/en/) or [Tenon](http://tenon.io/). It only intends to show possible weaknesses. You should obviously do some manual check by hand to know whether the code should or should not be fixed.*
+
+
+## How to use?
+
+### WebExtension
+
+Either you're using [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/) or [Chrome](https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=en), you're invited to install and use a11y.css's webextension.
+
+It provides some nice features not included in the main CSS file (for now), such as:
+
+* force focus visibility;
+* show lang attributes;
+* check images' alternatives by displaying them;
+* increase text spacings.
+
+As a WebExtension, it also enables to:
+
+* toggle CSS and change level on the fly, 
+* remember settings for each tab,
+* automatically update in the background.
+
+### Bookmarklet
+
+You can also use the form on the left sidebar to define the minimum level and language, in order to generate a custom bookmarklet. Then simply drag the green button to your bookmarks, and you're done! You're now able to use a11y.css on every page you visit by simply clicking on this bookmark.
+
+#### Bookmarklet's caveats
+
+The main caveat consists of CSP HTTP headers blocking unsafe / external script — mostly due to browsers bugs and inconsistencies. But many CORS policies might prevent a bookmarklet from working…
+
+But also note that the bookmarklet might take a couple of seconds to load since it basically injects the `a11y.css` stylesheet within the DOM of the page you're browsing. It might be a bit slow at first because it is being downloaded from GitHub, but it's the price to pay to keep it *up-to-date*.
+
+## Contribution & customisation
+
+If you want to get involved in this project, be sure to [take a look at its wiki](https://github.com/ffoodd/a11y.css/wiki) (also [available in French](https://github.com/ffoodd/a11y.css/wiki/Introduction)). I'll be pleased to read your issues or pull requests!