lat9 / ZCA-Bootstrap-Template

A Bootstrap-4 template for Zen Cart versions 1.5.8 through 2.1.0. Forked from https://github.com/zcadditions/ZCA-Bootstrap-Template-for-1.5.6-v2.0.0c. See the demo site, below, for additional information.
https://zc158.vinosdefrutastropicales.com/zc158/index.php?main_page=index
GNU General Public License v3.0
4 stars 14 forks source link

Template Contrast Accessibility #95

Closed dbltoe closed 1 year ago

dbltoe commented 2 years ago

We've (business) just started working on this template for a customer, I noticed that there are 156 accessibility hits on the main page. Of course, we will be working to eliminate those. The question is whether we should take the first step of adjusting the current YOUR_ADMIN/includes/init_includes/init_bc_config.php for this repository or use some other process.

Of course, I would like to have the customer at least see a problem-free example whenever possible. Options are:

  1. Adjust the existing default colors to meet minimum contrast.
  2. Adjust the existing default colors to meet full contrast.
  3. Change sectional default colors (a la template_default) to better delineate the area being worked then, adjust the colors to meet the minimum or full contrast.
  4. Just leave it be and let the customer set their colors.

The template is currently ranking 100 in Chrome's Lighthouse for all other sections but shows 90 on desktop and 89 on mobile. Mobile is slightly lower in Performance and Best Practices but, still, better than most.

I'm leaning towards option 3 as a guide hoping to not use something like #33B5E5 fourteen times. The customer may actually wind up with the same color but, IMHO is hindered in finding the correct area's color by having breadcrumbs, button colors, button border colors, pagination active buttons, Cat Tabs background colors, sidebox link colors, etc, all be the same. The downside is, like template_default, one would not want to just turn in on for public view without changes.

Perhaps just matching the layout of the spreadsheet in setting colors for the following lines:

It's already aligned in a way that should make "color-coded" areas easier to manage. Utilizing swapping background and color when hovering would help as well. Contrast on several buttons currently changes dramatically with hover.l

We are able to take the time to set this up before finalizing colors for the customer. I just want to poll those concerned as to whether or not to touch the file for inclusion here or just adjust for the customer. The goal is to help those who will never know the white has every color and don't know the navbar from the add-to-cart button.

If I should submit a change, should it be "color-coded" for clarification of areas affected by the colors themselves?

Thoughts on the matter are appreciated.

lat9 commented 2 years ago

I'd be in favor of having the initial "coloring" provided by the template fully support accessibility. Are you suggesting re-organizing (i.e. re-defining the sort-orders) of the various color settings in the template's admin tool?

barco57 commented 2 years ago

"If I should submit a change, should it be "color-coded" for clarification of areas affected by the colors themselves?" I think I understand but need clarification on this statement

lat9 commented 2 years ago

@dbltoe, should I wait to release v5.2.0 of the template until you've finished your changes?

dbltoe commented 2 years ago

Sorry, I'm just getting back from family and health issues and have not seen any of the info on this issue. I'm only allowed a few hours a day at the computer until a venal stint in my groin can be evaluated. Too much sitting caused a collapse. I have loaded the newest version and hope to have some info tomorrow.

dbltoe commented 1 year ago

I think the current version far surpasses the items in this request.