j2commerce/j2cart

Shipping Icon

Opened this issue · 0 comments

brianteeman commented

As you can see in the screenshot below the same icon is used for both shipping enabled and shipping disabled. The only difference is the colour being red or green. As 8% of the male population cannot differentiate between red and green colours this is clearly not accessible.

image

Protanopia

image

Deuteranopia

image

Golden rule is to always have two visual clues.

I would suggest changing the shipping enabled icon to something like fa-truck

image

Screen Reader

Additionally for users of screen readers it is also non accessible as there is no non-image representation of the image. So for those users they have no clue if it is shippable or not.

I would suggest the following solution

<?php echo (isset($variant->shipping) && ($variant->shipping)) ? '<span class="fa-solid fa-truck text-success aria-hidden="true"></span><span class="visually-hidden">' . Text::_('J2STORE_PRODUCT_SHIPPING_ENABLED_YES') . '</span>' : '<span class="fa-solid fa-box text-danger" aria-hidden="true"></span><span class="visually-hidden">' . Text::_('J2STORE_PRODUCT_SHIPPING_ENABLED_NO') . '</span>'; ?>