I'm cleaning up our site to be easier to use with the ultimate goal to be in compliance with The Americans with Disabilities Act (ADA) for websites.


I've come up against two hurdles so far.

#1, The "onchange" dropdown for prodoptions looks to just miss the contrast threshold. How do I change or over ride the background-color? Normally I'd go into my css style and change it, but it looks like the style is script generated.

An example of the captured code is below...

<select data-optgroup="137" class="prodoption detailprodoption" onchange="updateoptimage(0,0)" name="optn0" id="optn0x0" size="1">
Very low contrast<option value="" style="color: rgb(255, 255, 255); background-color: rgb(0, 120, 215);">
Please Select...
</option>
<option value="560" class="">
Small......


#2, Is there a way to add alt text to linked prod images? Even if there were a way to add a universal generic alt-text, that would be better than none at all.

I'm using Magic zoom and it generates no alt text on the small thumbnail / toggle images.


Here is an example page https://athenscyclepath.com/proddetail.php?prod=c_750_2019_Giant_Talon_29_2

Thanks

John

Hi John
That's a good point about the Alt image text and I've added that now. If you get a new copy of the updater and copy the incproddetail.php script to your site it should sort this out.

For the select menu contrast . . . maybe you've already changed this but what I see is the browser default I believe. You can add styles to your style sheet to override this though. More details here...
https://stackoverflow.com/questions/12836227/change-select-box-option-background-color

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince,

Thanks for the quick response.

I can change the style of the initial "Please Select" box and the subsequent font sizes, but I can't change the onchange colors as my pointer goes over the size choices.

My ADA debugger shows the background color of the mouse over as "background-color: rgb(0, 120, 215) / #0078D7", but searching for this specific color, it's no where to be found on my style sheets.

I have a work around in that when I bump up the font size from 1.0 em to 1.2 em, it passes, but still curious where access to that background color comes from...


John

Hi John
You're talking about the light blue background color and white text when you have the mouse over the different select menu options, no? If that's the case then I tried the suggestion in that stackoverflow post and it didn't change it, but after investigating a few more, none of the suggestions seemed to work. To tell the truth I'm not sure it's possible to change but it is the browser default and that's why you can't find it in a style sheet. Saying that, being the browser default it's very unlikely it wouldn't comply with ADA guidelines, no?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince,

The ADA guidelines are based on a ratio between size and contrast and a few other criteria, so if the size is set too small with an almost but not quite dark color, it can get flagged.

Normally I'd be pragmatic and say close enough is close enough, but there are lawsuits being filed against web based businesses on behalf of the visually impaired in the federal courts here in the states (some rightfully so and some a bit frivolous).

I can live with the text being larger to pass.

Once I get my contrast and alt text issues fixed, I'll be taking aim at the cart and search pages. I'm getting dinged on missing form labels. The form controls don't always have a properly associated text label.

More info on compliance at these links.

https://webaim.org/articles/contrast/

https://wave.webaim.org/

Thanks for all you do.

John

Hi Vince,

I found a few contrast errors in the cart pages.


Here are some minor suggested future fixes

line 62 in the incminicart.php file

Change the pure red font color to a crimson to get the right contrast ratio.

Before:

if($shipping==0) $showshipping=' style="color:#FF0000;font-weight:bold">'.$GLOBALS['xxFree'].'</span>'; else $showshipping='>'.FormatEuroCurrency($shipping); ?>

After:

if($shipping==0) $showshipping=' style="color:#B30000;font-weight:bold">'.$GLOBALS['xxFree'].'</span>'; else $showshipping='>'.FormatEuroCurrency($shipping); ?>




Line 43 and 44 in the incfunctions.php file to fix the red asterisks

From:

$GLOBALS['redasterix']='<span style="color:#FF0000">*</span>';
$GLOBALS['redstar']='<span class="redstar" style="color:#FF1010">*</span>';


To:


$GLOBALS['redasterix']='<span style="color:#B30000">*</span>';
$GLOBALS['redstar']='<span class="redstar" style="color:#B30000">*</span>';



Thanks for all you do.

John