In the continuing saga of Accessibility, we (JEANDRET) have recently discovered the Site Improve Accessibility Checker. This extension is available for both Chrome and Firefox. It might be available for other browsers as well. One of the most comprehensive checkers we have found.
Its comprehenive evaluation is causing us to reevaluate bootstrap colors. Some of the other checkers are not properly vetting all the colors based on both size and whether or not they are "operational".
For example, we originally proposed the existing #007faf as the default background color and white for the text color for the catTabs menu, buttons, pagination, etc. While the colors do well for the size of the text, the newer testing states that, since these buttons perform an operation, they should have a minimum contrast ratio of 7:1 instead of 4.5:1 if it were just text. It makes sense that you would want the "Action" information as legible as posssible. The solution for this is to change all of the #007faf bootstrap color settings to #13607c for the default color. There will probably be more changes but, for now, I wanted to bring up disabled buttons as it is going to be more of a project.
In changing/testing background colors, we noticed on the test site with demo items that the "Go" buttons for Manufacturers, Music Genres, and Record Companies are disabled (due to no selection having been made in the drop-down). The bootstrap.min.css turns on an opacity setting and drops the opacity for the button to 0.65 which results in a color contrast problem by dropping the ratio to ~3.2:1 when using the new #13607c as the background. It should be 7:1 as a minimum. Incidentally, https://www.siegemedia.com/contrast-ratio is a great tool in testing this as it can assess contrast using HEX, RGBA, RGB, HSLA, etc. I have not found another tester that does this.
The good news is that, being disabled, the button is no longer considered an actionable item and does not "technically" require the 7:1 of an 'active' button. Still, 3.2:1 is not a good contrast for anything.
Also, looking at the disabled button gives not only the impression that something CAN be accomplished but, even if it's hard to read.
CSS Tricks discusses using a tooltip when hovering over the button to let the user know they need to make a selection to enable the button. This may be a solution to the contrast problem but not for the "why doesn't this go button work" problem. In addition, the Send Now button should be considered for this treatment IF there is an entry in admin >> Email >> Set "Contact Us" Email Dropdown List
Another way of dealing with this is to add colors to the .btn.disabled, .btn:disabled call in the CSS. Making the background- and border-colors the same as the text color for the button will result in the button "disappearing" until a selection is made by the customer. This is what we are using temporarily by utilizing the site_specific_styles.php for the color additions. Again, background and text only match when the button is disabled, the ADA/WCAG checkers may recognize the odd contrast but, if they do, they report something like "Disabled elements do not require sufficient contrast."
In using the ZCA Bootstrap Colors, The "Button Text Color" could be "Button Text/Disabled Color" since that color would be used for the button color AND the new button background- and border-color settings under .btn.disabled, .btn:disabled.
test1DOTjeandretDOTcom shows the buttons with the background- and button-colors set to match the active button's text color. You can view the original "look" by disabling the two colors when inspecting the buttons.
Comments on this are appreciated.
Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com
