Skip to content

Instantly share code, notes, and snippets.

@amandavisconti

amandavisconti/WP Accessibility Plugin Firefox Grayscale Menu Button Fix

Created January 16, 2014 14:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amandavisconti/8455507 to your computer and use it in GitHub Desktop.
Save amandavisconti/8455507 to your computer and use it in GitHub Desktop.
Download ZIP
Fixing the Firefox Grayscale Menu Button Issue in the WP Accessibility Plugin
Raw
WP Accessibility Plugin Firefox Grayscale Menu Button Fix
* The Issue
The WP Accessibility is an amazing plugin; you can download it here (http://wordpress.org/plugins/wp-accessibility/) or read more about its many features here (http://make.wordpress.org/accessibility/wp-accessibility-plugin/). Unfortunately, its menu for toggling high contrast/grayscale/font size has a browser-caused issue: the grayscale filter doesn't work in current Firefox (I'm using Mac Firefox 26.0). The plugin admin settings give you the option to turn off the grayscale button from that menu, but that means people using browsers other than Firefox don't get to use it.
* Solution Overview
My current solution is to use a media query to hide the grayscale button just on Firefox browsers. display:none is often a bad choice for accessibility because of how it interacts with screenreaders, but in this case the function in question (making a webpage appear in grayscale) is probably not needed by screenreading users. I didn't make the styling change to the plugin so that it isn't overwritten by plugin updates, but it would probably be good to submit such a fix to the plugin's svn repo at some point so that it's just a part of the plugin. It would also be nice to allow toggling grayscale-except-for-Firefox on the plugin's admin settings, and look into tracking how the latest releases of Firefox are treating filter: grayscale, which is the piece of the CSS on which the browser's currently failing.
You can see the CSS controlling the grayscale toggling option by looking at wp-accessibility/toolbar/css/a11y-desaturate.css if you're interested in how the button's supposed to work.
* Add the following to your .css stylesheet
@-moz-document url-prefix() {
.a11y-toggle-grayscale {
display:none !important;
}
.a11y-toggle-fontsize { margin-top: -25px; }
}
* The CSS above explained
@-moz-document url-prefix() makes the bracketed CSS only apply to Firefox browsers.
.a11y-toggle-grayscale selects the grayscale button, and display:none makes it not display (i.e. be hidden).
Because that leaves a gap between the high contrast and font size buttons, I use .a11y-toggle-fontsize with margin-top to scoot the font size button up to right below the high contrast button
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment