Jump to content

accessibility issues complained by Google


volteq

Recommended Posts

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
<button class="button postfix nomarg nopad" type="submit" value="Search">
 
Form elements do not have associated labels:
form.panel > div.row > div.small-3 > input.quantity
<input type="number" name="quantity" maxlength="3" value="1" min="1" class="quantity required text-center">

I wonder what can be done to solve the problem?

Link to comment
Share on other sites

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

 

Shop by Category
<a href="">
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
Link to comment
Share on other sites

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 by bsmither
Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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).

 

Link to comment
Share on other sites

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 by bsmither
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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".
 

Link to comment
Share on other sites

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 by volteq
Link to comment
Share on other sites

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 by bsmither
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...