diff --git a/README.md b/README.md index 863431c..59d890c 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,76 @@ # Accessibility Buttons -Accessibility functions +Version: 2.0.0 -* Contrast +**Accessibility functions** +* Contrast * Font Size - [Example Page](http://tiagoporto.github.io/accessibility-buttons/) ## Usage * Requires [Jquery](http://jquery.com/download/). -* Include `main.js` or `main.min.js` and `styles.css`. +* Include `accessibility-buttons.js` or `accessibility-buttons.min.js` and `accessibility-buttons.css`. * Insert the buttons in HTML ```html - - + + ``` -To `font-size` works it's necessary work with `em` unit. +**Note:** To `font-size` works, it's necessary work with `em` unit. ##Configure -To setup names and buttons titles, change the variables in the `main.js` or `main.min.js` at the initial lines. +To setup names and buttons aria-labels, change the variables in the `accessibility-buttons.js` or `accessibility-buttons.min.js` at the initial lines. ```javascript //Font Button - var nameButtonIncreaseFont = "+A"; - var nameTitleButtonIncreaseFont = "Increase Font"; - - var nameButtonDecreaseFont = "-A"; - var nameTitleButtonDecreaseFont = "Decrease Font"; - + var nameButtonIncreaseFont = "+A", + ariaLabelButtonIncreaseFont = "Increase Font", + nameButtonDecreaseFont = "-A", + ariaLabelButtonDecreaseFont = "Decrease Font", //Contrast Button - var nameButtonAddContrast = "Add Contrast"; - var nameTitleButtonAddContrast = "Add Contrast"; - - var nameButtonRemoveContrast = "Remove Contrast"; - var nameTitleButtonRemoveContrast = "Remove Contrast"; + nameButtonAddContrast = "Add Contrast", + ariaLabelButtonAddContrast = "Add Contrast", + nameButtonRemoveContrast = "Remove Contrast", + ariaLabelButtonRemoveContrast = "Remove Contrast", ``` -To change font-size and contrast colors change the values in the `styles.css`. +To change font-size and contrast colors change the values in the `accessibility-buttons.css`. ```css /* Accessibility */ .accessibility-font { - font-size: 1.125em; + font-size: 1.125em; } .accessibility-contrast { - color: white; - background: black; + color: white; + background: black; } ``` +##Bower + +To download with [Bower](http://bower.io/) + +```sh + $ bower install accessibility-buttons --save +``` + +##Credit + +Accessibility `arial-label` tip - [brunopulis](https://github.com/brunopulis) + +##License +[MIT License](http://opensource.org/licenses/MIT) + + + diff --git a/bower.json b/bower.json index 7404051..0ca122a 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,12 @@ { "name": "accessibility-buttons", - "version": "1.0.0", + "version": "2.0.0", "main": "public/accessibility-buttons.js", "license": "MIT", "ignore": [ "**/.*", "src", + "bower.json", "config.rb", "gulpfile.js", "package.json" diff --git a/public/css/accessibility-buttons.css b/public/css/accessibility-buttons.css index 2021a11..42e22bf 100644 --- a/public/css/accessibility-buttons.css +++ b/public/css/accessibility-buttons.css @@ -1,18 +1,18 @@ +/* + Accessibility Buttons + Version: 2.0.0 + Author: Tiago Porto - http://www.tiagoporto.com + https://github.com/tiagoporto + Contact: me@tiagoporto.com +*/ + /* Typography */ body { - font: normal normal 1em/1.1875em Helvetica, Arial, sans-serif; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -moz-font-feature-settings: "frac", "liga"; - -moz-font-feature-settings: "frac=1, liga=1"; - -ms-font-feature-settings: "frac", "liga"; - -o-font-feature-settings: "frac", "liga"; - -webkit-font-feature-settings: "frac", "liga"; - font-feature-settings: "frac", "liga"; + font-size: 1em; + line-height: 1.1875em; } -/* Main */ +/* Transition */ body { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; diff --git a/public/index.html b/public/index.html index e52c2fb..dd0fc56 100644 --- a/public/index.html +++ b/public/index.html @@ -16,8 +16,8 @@
- - + +
diff --git a/public/js/accessibility-buttons.js b/public/js/accessibility-buttons.js index 9876698..13411df 100644 --- a/public/js/accessibility-buttons.js +++ b/public/js/accessibility-buttons.js @@ -1,18 +1,29 @@ -//Main Scripts +/* + Accessibility Buttons + Version: 2.0.0 + Author: Tiago Porto - http://www.tiagoporto.com + https://github.com/tiagoporto + Contact: me@tiagoporto.com +*/ + $(document).ready(function(){ //Font Button - var nameButtonIncreaseFont = "+A"; - var nameTitleButtonIncreaseFont = "Increase Font"; - - var nameButtonDecreaseFont = "-A"; - var nameTitleButtonDecreaseFont = "Decrease Font"; - + var nameButtonIncreaseFont = "+A", + ariaLabelButtonIncreaseFont = "Increase Font", + nameButtonDecreaseFont = "-A", + ariaLabelButtonDecreaseFont = "Decrease Font", //Contrast Button - var nameButtonAddContrast = "Add Contrast"; - var nameTitleButtonAddContrast = "Add Contrast"; - - var nameButtonRemoveContrast = "Remove Contrast"; - var nameTitleButtonRemoveContrast = "Remove Contrast"; + nameButtonAddContrast = "Add Contrast", + ariaLabelButtonAddContrast = "Add Contrast", + nameButtonRemoveContrast = "Remove Contrast", + ariaLabelButtonRemoveContrast = "Remove Contrast", + //Cache jQuery Elements + $_body = $('body'), + $_fontButton = $("#accessibility-font"), + $_contrastButton = $("#accessibility-contrast"), + //Cookies + cookieFont = getCookie("accessibility_font"), + cookieContrast = getCookie("accessibility_contrast"); function getCookie(cname){ @@ -25,62 +36,57 @@ $(document).ready(function(){ return ""; } - var body = $('body'); - - var cookieFont = getCookie("accessibility_font"); - - var cookieContrast = getCookie("accessibility_contrast"); - - if (cookieFont) { - body.addClass('accessibility-font'); + $_body.addClass('accessibility-font'); - $("#accessibility-font").html(nameButtonDecreaseFont).attr('title', nameTitleButtonDecreaseFont); + $_fontButton.html(nameButtonDecreaseFont).attr('aria-label', ariaLabelButtonDecreaseFont); }else{ - $("#accessibility-font").html(nameButtonIncreaseFont).attr('title', nameTitleButtonIncreaseFont); + $_fontButton.html(nameButtonIncreaseFont).attr('aria-label', ariaLabelButtonIncreaseFont); }; if (cookieContrast) { - body.addClass('accessibility-contrast'); + $_body.addClass('accessibility-contrast'); - $("#accessibility-contrast").html(nameButtonRemoveContrast).attr('title', nameTitleButtonRemoveContrast); + $_contrastButton.html(nameButtonRemoveContrast).attr('aria-label', ariaLabelButtonRemoveContrast); }else{ - $("#accessibility-contrast").html(nameButtonAddContrast).attr('title', nameTitleButtonAddContrast); + $_contrastButton.html(nameButtonAddContrast).attr('aria-label', ariaLabelButtonAddContrast); }; $('.js-acessibility').click(function(event) { - if(body.hasClass($(this).attr('id'))){ + var $_this = $(this); - body.removeClass($(this).attr('id')); + if($_body.hasClass($_this.attr('id'))){ - if ($(this).attr('id') == 'accessibility-font') { + $_body.removeClass($_this.attr('id')); - $(this).html(nameButtonIncreaseFont).attr('title', nameTitleButtonIncreaseFont); + if ($_this.attr('id') == 'accessibility-font') { - document.cookie = "accessibility_font=True; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + $_this.html(nameButtonIncreaseFont).attr('aria-label', ariaLabelButtonIncreaseFont); + document.cookie = "accessibility_font=True; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }else{ - $(this).html(nameButtonAddContrast).attr('title', nameTitleButtonAddContrast); + $_this.html(nameButtonAddContrast).attr('aria-label', ariaLabelButtonAddContrast); document.cookie = "accessibility_contrast=True; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }; }else{ - body.addClass($(this).attr('id')); + $_body.addClass($_this.attr('id')); - if ($(this).attr('id') == 'accessibility-font') { + if ($_this.attr('id') == 'accessibility-font') { if (!cookieFont) { document.cookie = "accessibility_font=True; path=/"; }; - $(this).html(nameButtonDecreaseFont).attr('title', nameTitleButtonDecreaseFont); + $_this.html(nameButtonDecreaseFont).attr('aria-label', ariaLabelButtonDecreaseFont); }else{ if (!cookieContrast) { document.cookie = "accessibility_contrast=True; path=/"; }; - $(this).html(nameButtonRemoveContrast).attr('title', nameTitleButtonRemoveContrast); + $_this.html(nameButtonRemoveContrast).attr('aria-label', ariaLabelButtonRemoveContrast); }; } }); + }); \ No newline at end of file diff --git a/public/js/accessibility-buttons.min.js b/public/js/accessibility-buttons.min.js index c7c585a..c1f92c1 100644 --- a/public/js/accessibility-buttons.min.js +++ b/public/js/accessibility-buttons.min.js @@ -1 +1 @@ -$(document).ready(function(){function t(t){for(var i=t+"=",s=document.cookie.split(";"),e=0;e