Code Monkey home page Code Monkey logo

acc_toolbar's Introduction

Accessibility Toolbar Plugin

Accessibility Toolbar Plugin Poster

Accessibility Toolbar Plugin is a simple accessibility component without dependencies (clean javascript), including a variety of tools. This component allows users with disabilities easy and convenient way to browse most websites.

Language Support

Accessibility Toolbar Plugin may work with as many languages as you need. For now, it supports out of the box English by default, Hebrew, Russian, and French. The plugin tries to detect current language in page by schema like "ru-RU", "he-IL", "fr_FR" (Wordpress like CMS locales). If your website uses these locale schemas you need do nothing, otherwise, you probably can force locale by adding property "forcelang" to additional init (see below). You always can edit app/js/language.json file for adding or change language strings(see "For Developers" section below).

How to use Accessibility Toolbar (acc toolbox)

CDN

Add this script to your website


<script src="https://cdn.jsdelivr.net/gh/mickidum/acc_toolbar/acctoolbar/acctoolbar.min.js"></script>
<script>
// optional init
  window.onload = function() {
    window.micAccessTool = new MicAccessTool({
      link: 'http://your-awesome-website.com/your-accessibility-declaration.pdf',
      contact: 'mailto:[email protected]',
      buttonPosition: 'right', // default is 'left'
      forceLang: 'ru-RU' // default is 'en' may be 'he-IL', 'ru-RU', or 'fr_FR'
    });
  }
</script>

Download

  1. Download(Right click and save) Accessibility Toolbar Plugin
  2. Store this file in your website directory (i.e. /public_html)
  3. Add script to website

    
    <script src="path/to/script/where/stored/acctoolbar.min.js"></script>
    // optional init
    <script>
      window.onload = function() {
        window.micAccessTool = new MicAccessTool({
          link: 'http://your-awesome-website.com/your-accessibility-declaration.pdf',
          contact: 'mailto:[email protected]',
          buttonPosition: 'right', // default is 'left'
          forceLang: 'ru-RU' // default is 'en' may be 'he-IL', 'ru-RU', or 'fr_FR'
        });
      }
    </script>
    
    
  4. That's all

For Developers

  1. Clone or download this repo
  2. Install gulp.js - write in terminal "npm install gulp -g"
  3. cd [installed repo folder]
  4. Write in terminal - "npm install"
  5. Write in terminal - "gulp" to run app
  6. Now you can change it.

acc_toolbar's People

Contributors

candideu avatar dependabot[bot] avatar mickidum avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

acc_toolbar's Issues

French Translation

Hi! I translated the plugin to French, but I'm unable to create a pull request. Here is the text I wanted to contribute to language.json:

  "fr": {
    "btn_open": "menu d'accessibilité",
    "btn_close": "fermer",
    "keyboard_root": "navigation au clavier",
    "disable_animattions": "désactiver les animations",
    "access_declaration": "déclaration d'accessibilité",
    "debug_contacts": "signaler un problème d'accessibilité",
    "reset_all_settings": "réinitialiser les paramètres",
    "image_without_alt": "image sans texte",
    "contrast_block": {
      "header": "contraste des couleurs",
      "btn_monochrome": "affichage<br>sans couleur",
      "btn_bright": "contraste<br>lumineux",
      "btn_invert": "couleurs<br>inversées"
    },
    "text_block": {
      "header": "taille de police",
      "btn_font_up": "augmenter<br>la taille",
      "btn_font_down": "diminuer<br>la taille",
      "btn_font_readable": "texte<br>lisible"
    },
    "content_block": {
      "header": "mettre en évidence le contenu",
      "btn_underline_links": "souligner<br>les liens",
      "btn_underline_headers": "souligner<br>les en-têtes",
      "btn_images_titles": "titres<br>d'images"
    },
    "zoom_block": {
      "header": "zoomer",
      "btn_cursor_white": "gros curseur<br>blanc",
      "btn_cursor_black": "gros curseur<br>noir",
      "btn_zoom_in": "élargir<br>l'écran"
    }
  }

Thanks so much for making this toolbar plugin!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.