accessibility issues complained by Google

volteq · May 27

we recently upgraded to Cubecart 6, and really like it.

when checking on core vitals of our website, we noticed that google consistently complained about some accessibility issues. Here are list some from our website, but I suspect it's universal:

Buttons do not have an accessible name:

form.search_form > div.row > div.small-2 > button.button

Form elements do not have associated labels:

form.panel > div.row > div.small-3 > input.quantity

I wonder what can be done to solve the problem?

volteq · May 28

also one issue related to SEO is Links are not crawlable:

Shop by Category

div#review_stars > span.star-rating-control > div.rating-cancel > a

<a>

1

<a>

2

<a>

3

<a>

4

<a>

5

<a>

can someone please tell me where this code is located?

thanks in advance

bsmither · May 28

The "Shop by Category" phrase is strange. I am not sure where in Foundation that is used.

But the Review Stars is controlled by the jQuery plugin found at Foundation's /js/vendor/jquery.rating.min.js file. There is no attribution, but it appears to be this one:

https://github.com/fyneworks/star-rating

This plugin is implemented in the Foundation template element.product_reviews.php, starting near line 70.

Edited May 28 by bsmither

bsmither · May 28

I have identified six files that could be tweaked based on your comments above regarding labels and accessible names.

I will post an issue in the Github.

volteq · May 29

thanks! look forward to that...

I did make some tweaks with the add to basket thingy, adding Qty: to the left of the number box as the label. however, it did not work for mobile device in the vertical mode. Cubecart automatically switches to the special mode for mobile device in vertical direction, and I have not found the code that does the switch yet.

also google complained at lot about the accessibility issues related to contrast, which I am trying to solve as well. It will help me a lot if you can point me to where the code is controlling the path on top the product descriptions, something like this:

bsmither · May 29

I used the guidelines at:

https://dequeuniversity.com/rules/axe/4.4/button-name
https://dequeuniversity.com/rules/axe/4.4/label

to suggest changes in the issue I posted in the Github:

https://github.com/cubecart/v6/issues/3312

"Cubecart automatically switches to the special mode for mobile device."

If you mean the Category page that shows product panels in a grid, then it is javascript that shows/hides each of two separate sections: product_list_view and product_grid_view.

If it is the grid view being shown, the javascript tests if the screen is at medium width or wider, and if so will add a CSS class to the list to make a three-across grid. If not at medium width or wider, the existing one-across grid stays in force.

The 'path' elements are "breadcrumbs". Search through foundation.css to find everything related to breadcrumbs. You should overrule those CSS rules by adding your custom rules in cubecart.default.css, including its color.

The 'path' is the sequence of Home through the category hierarchy to the name of the product. Constructing this chain is enabled by addBreadcrumb() in the GUI class file. Here, data is collected into an array. The data comes from everywhere - related to what is being shown.

Finally, the displayCommon() function in the GUI class file gives the array to the template rendering engine (Smarty).

volteq · May 29

thanks for the information. what is this for? In main.checkout.php (38, bars)

bsmither · May 29

The Foundation template file main.checkout.php, near line 38, there is:

Note: Line split for readability:

<div class="right text-center show-for-small">
  <a class="left-off-canvas-toggle button trans tiny" href="#">
    <svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg>
  </a>
</div>

This shows only the 'hamburger bars' (a "menu" icon), but offers no discernable text or label for accessibility (screen readers).

Edited May 29 by bsmither

volteq · June 1

On 5/28/2023 at 10:01 AM, bsmither said:

This plugin is implemented in the Foundation template element.product_reviews.php, starting near line 70.

can you take a second look at this? I somehow feel this is not the location for the issue. when I delete the code, it does nothing to the problem. here is what google complained about:

div#review_stars > span.star-rating-control > div.rating-cancel > a

bsmither · June 1

The path of div blocks (an 'xpath') mentioned by Google is created and put in place under javascript control via the jQuery 'Rating' plugin. Which is to say, you won't find these div's in the Foundation templates.

If you can live without reviews, in admin, Store Settings, Features tab, disable "Product Reviews".

volteq · June 1

Thanks for your explanation. I guess we will have to live with this issue then.

volteq · June 4

On 5/31/2023 at 7:01 PM, bsmither said:

The path of div blocks (an 'xpath') mentioned by Google is created and put in place under javascript control via the jQuery 'Rating' plugin. Which is to say, you won't find these div's in the Foundation templates.

If you can live without reviews, in admin, Store Settings, Features tab, disable "Product Reviews".

I did find the file, or I thought. it's located in the js>plugins folder, however, by adding href="#" there worked for my https://mastechpowersupply.com/ website (google stopped complaining about it), but not the https://volteq.com/ website. the prior is, as you know, stuck at 5..2.16 while the latter has migrated to 6.5.1.

the weird thing is that both versions of Cubecart have the exact same file located at the exact same folder, and I did exactly the same modification. I even took the working file and uploaded to the newer version, and google still complained. I have included the file if you are interested in taking a look.

jquery.rating.min.js

Edited June 4 by volteq

bsmither · June 4

Volteq is using Foundation, which has its own set of vendor jQuery plugins in the skins' /js/ folder.

Mastech is using Kurouto, which uses CubeCart's generally available set of vendor jQuery plugins in CubeCart's /js/ folder. The generally available javascript files in CubeCart's /js/ folder allows for all CC5 skins to use the same files and keeping those files updated is easier.

CC6's skins can be radically so different that it makes no sense to fixate on one set of javascript files.

Edited June 4 by bsmither

volteq · June 5

thanks! I took care of it the same way, and now the SEO score is 100.

I have one small issue with best practice that is still not solved. it has something to do with the stars, but despite my tweak, it persists. it initially complained that the stars are at 16 by 16, and expectation is 24 by 24. so I replaced the stars with 24 by 24 picture, and now it wants 36 by 36. I am not sure if I understood it correct?

below is the complaint from google:

Serves images with low resolution

Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity. Learn how to provide responsive images.

	URL	Displayed size	Actual size	Expected size
volteq.com 1st Party
star <img src="https://volteq.com/skins/foundation/images/star.png" alt="star">	…images/star.png (volteq.com)	24 x 24	24 x 24	36 x 36

bsmither · June 5

This is how I read it...

If the visitor needs to have the browser make everything bigger (the browser's internal zoom feature), the image, being displayed at its 'natural' dimensions (16x16 or 24x24, or whatever), zooming in will only make the image blurry. (Browsers generally suck at enlarging images.)

However, if the image is larger than what is required, 64x64 for example, but the screen real-estate (or the specific attributes in the <img> tag or CSS) only gives it 16x16 space to display it, then there is plenty of extra definition available to the browser when it needs to enlarge the image - keeping it nice and sharp.