-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change title to aria-label cache jquery
- Loading branch information
Tiago Porto
committed
Aug 22, 2014
1 parent
41c402f
commit cd6f9f9
Showing
11 changed files
with
135 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <button title="" id="accessibility-font" class="js-acessibility"></button> | ||
| <button title="" id="accessibility-contrast" class="js-acessibility"></button> | ||
| <button aria-label="" id="accessibility-font" class="js-acessibility"></button> | ||
| <button aria-label="" id="accessibility-contrast" class="js-acessibility"></button> | ||
| ``` | ||
|
|
||
| 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) | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,18 @@ | ||
| /* | ||
| Accessibility Buttons | ||
| Version: 2.0.0 | ||
| Author: Tiago Porto - http://www.tiagoporto.com | ||
| https://github.com/tiagoporto | ||
| Contact: [email protected] | ||
| */ | ||
|
|
||
| /* 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; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,29 @@ | ||
| //Main Scripts | ||
| /* | ||
| Accessibility Buttons | ||
| Version: 2.0.0 | ||
| Author: Tiago Porto - http://www.tiagoporto.com | ||
| https://github.com/tiagoporto | ||
| Contact: [email protected] | ||
| */ | ||
|
|
||
| $(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); | ||
| }; | ||
| } | ||
| }); | ||
|
|
||
| }); | ||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,9 @@ | ||
| //Main Scripts | ||
| /* | ||
| Accessibility Buttons | ||
| Version: 2.0.0 | ||
| Author: Tiago Porto - http://www.tiagoporto.com | ||
| https://github.com/tiagoporto | ||
| Contact: [email protected] | ||
| */ | ||
|
|
||
| $(document).ready(function(){ |
Oops, something went wrong.