Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

Definition of Public Accommodation from the ADA website:

**
A public accommodation is a private entity that owns, operates, leases, or leases to, a place of public accommodation. Places of public accommodation include a wide range of entities, such as restaurants, hotels, theaters, doctors' offices, pharmacies, retail stores, museums, libraries, amusement parks, private schools, and day care centers. Private clubs and religious organizations are exempt from the ADA's title III requirements for public accommodations.**

I wonder if the ADA website complies.....https://adata.org

dbltoe:

Text readers are confused when the h tags are incorrect. Without the h1, you technically meet AA standards. You cannot meet AAA standards without a logical progression. https://www.tpgi.com/headings-accessibility/

It's one of the things I want to address in 1.5.8 before it gets out. We've gotten in such a habit of just blowing away the h1 text that it's not used as it should be. Several options can be done but, with the "just drop it" method currently advised........

Note that this discussion is not based on US 508 accessibiltiy but are from WCAG. https://www.w3.org/WAI/standards-guidelines/wcag/

lot of good information here. thank you.

i would like to point out a few things (none of which are related to any pending supreme court rulings):

• i am not seeing anything that specifically states "standards". it seems like they are all guidelines.
• the site that you pointed me to is a blog post from a commercial provider of accessibility products.
• they do have a lot of good information there and in previous blog posts.
• not including an h1 heading does not automatically constitute a failure.
• from this blog post on the site you pointed to:
• Missing <h1>
  On a similar note, although beginning a heading hierarchy with an <h1> is a logical and common approach to structuring web content, it’s not a requirement of either WCAG or the HTML 5.2 specification. While such a heading hierarchy may be unusual, the absence of an <h1> does not represent a WCAG failure.
• i completely support incorporating as much of these guidelines as possible into v158.
• i applaud all of your efforts to make that happen.

best.

dbltoe:

You're in Florida. You may publish a book but I doubt it. Books and websites are totally different form of "Public Accomodation". Here's what happened in your state. https://www.wtsp.com/article/news/investigations/10-investigates/10investigates-ada-disability-website-lawsuits/67-9db9805b-5d09-440a-b4af-bd36d2fefe15

BTW, your site has two contrast errors and, of course, the missing H1 on the main page. If you have $1000-4000 a pop, go for it.

Anyone losing in a court case in USA is losing because they are not offering locational accommodations for the disabled on their websites. (i.e. rooms with special features like brail, desks with proper heights for wheel chairs etc etc). That's very different than having contrast issues or text size issues on websites. If you think website contrast is discriminating against individuals with vision impairments then every business is going to have to comply with office lighting to appease a minority. Don't see that happening either.

What I see today are companies that are offering protection thru their services. This is nothing more than exploiting peoples fears of litigation and is destined for total failure. Sort of like protection money for the mob. Pay them or your business may burn down. Can you imagine is big law firms were selling these services and the moment you stopped paying they filed a lawsuit for non compliance. This is really making a mountain out of a mole hill. We shouldnt even be having this discussion.

Here's a good one...how about forcing the high contrast on currency with large print etc etc.

pixelpadre:

What I see today are companies that are offering protection thru their services.... Sort of like protection money for the mob.... We shouldnt even be having this discussion.

i could not agree more.

unfortunately, the lawyers are winning these cases.

a few articles on the topic:

https://www.digitalcommerce360.com/2021/03/30/web-accessibility-lawsuits-grow-and-retailers-are-the-main-targets/

https://www.jdsupra.com/legalnews/surfin-usa-website-accessibility-9470297/

https://www.wsj.com/articles/lawsuits-over-digital-accessibility-for-people-with-disabilities-are-rising-11626369056

from one of the articles:

“I don’t want to in any way diminish the value of ADA compliance. I think it makes a lot of sense,” Overstreet says. But he adds that the plaintiffs’ law firms in digital accessibility cases are “vermin” that actively seek out companies to sue and file numerous lawsuits at once.

rlexyd:

Stumbled on this website recently (www eapresto com).
Looked at the view source and it shows they are using the (Responsive_Classic) template?!
I have this template and it's a whole lot different than that.
Can anyone help to identify it? or what other templates they might be using? I couldn't find anything and I've emailed them asking and no response.
Is my above post in the wrong thread??
Just want to see if anyone can help me identify the template/plugins used on that website wether they are available on the plugins page or where a private work?

you're in the correct thread, but the conversation has been partially derailed (you know who you are...)
The site in question has a pile of customizations on it. Seems a fair bit is hard-coded into the template versus a plugin to manage it, such as the header and footer.

rlexyd:

Is my above post in the wrong thread??
Just want to see if anyone can help me identify the template/plugins used on that website wether they are available on the plugins page or where a private work?There's no better source than the folks themselves. BUT

The thing to bear in mind is that the site ranks low in most tests. Lighthouse has it at 82, 89, 67, 83 for the main page. Your site is 98, 100, 93, 100 and your main page loads 20% faster! Your Best Practices of 93 will be 100 when you fix the hanging < in your Google Analytics.

Some of the portions you like are what make the site a lower rank. Most of the "glitz" lacks alt tags so the SEs have no idea what's going on.

The site is not secure and uses no less than four vulnerabilities through outdated jquery. It's more than likely that the bad jquery resides in the "glitx".

I haven't see a Best Practices rating of 67 in a long time.:dontgetit

I wonder why you have the logo so prominent on each page that it takes away from presenting product.

Be careful on things like the 30cm Cupcake. The color used to let folks know it's pink is not a proper contrast. Perhaps it would be best to have pink in the product title which would add it to the alt tag.

Your large image for that item is larger than the screen which hinders the customer's being able to tell what the item is. I would combine the other two cupcakes and use something like Magic Thumb to swap out the images as the customer selects Pink or Blue. Something like the tin selection at https://allpecans.com/index.php?main_page=product_info&cPath=31&products_id=126

Lastly, I would add lat9's scrolling sideboxes to randomly "show off" your products, change your width to 100%, and move them to the right-hand column along with reviews.

barco57:

you're in the correct thread, but the conversation has been partially derailed (you know who you are...)
The site in question has a pile of customizations on it. Seems a fair bit is hard-coded into the template versus a plugin to manage it, such as the header and footer.
Thanks for your reply.
It’s a real shame as I really like that website and was hoping they did it with available plugins :) (especially the gallery image slider and nicely designed footer).

dbltoe:

There's no better source than the folks themselves. BUT

The thing to bear in mind is that the site ranks low in most tests. Lighthouse has it at 82, 89, 67, 83 for the main page. Your site is 98, 100, 93, 100 and your main page loads 20% faster! Your Best Practices of 93 will be 100 when you fix the hanging < in your Google Analytics.

Some of the portions you like are what make the site a lower rank. Most of the "glitz" lacks alt tags so the SEs have no idea what's going on.

The site is not secure and uses no less than four vulnerabilities through outdated jquery. It's more than likely that the bad jquery resides in the "glitx".

I haven't see a Best Practices rating of 67 in a long time.:dontgetit

I wonder why you have the logo so prominent on each page that it takes away from presenting product.

Be careful on things like the 30cm Cupcake. The color used to let folks know it's pink is not a proper contrast. Perhaps it would be best to have pink in the product title which would add it to the alt tag.

Your large image for that item is larger than the screen which hinders the customer's being able to tell what the item is. I would combine the other two cupcakes and use something like Magic Thumb to swap out the images as the customer selects Pink or Blue. Something like the tin selection at https://allpecans.com/index.php?main_page=product_info&cPath=31&products_id=126

Lastly, I would add lat9's scrolling sideboxes to randomly "show off" your products, change your width to 100%, and move them to the right-hand column along with reviews.

Thank you J,
Especially for taking the time to view my site and make an actual assessment in real time, will definitely work on your suggestions!
I'm in the middle of getting the website logo finalized and it will be a smaller rectangle size, the lady working on it is almost done.
I know this isn't the right thread to talk about this but will do this once, what do you mean hanging < in google analytics?
I pasted the exact code from google and can't seem to see a < that doesn't belong?!

dbltoe:

Chrome's Web Developer Tools uses an accessibility tool (WAVE) powered by WebAIM. It's not perfect and needs to be done for every view a page can give. It is a good start for an overall idea for your site.

Just re-added the text "Welcome to MYSHOP" back into the includes/languages/english/MYTEMPLATE/index.php in both HEADING_TITLE, so they are not blank and it no longer shows a H1 Error on WAVE, thanks again J :)
With thanks to Simon's solution of adding display:none to indexDefaultHeading into the .css, it's not displaying the above text on my site and the headers are aligned, so all good :)

Looking at a couple of changes if anyone can help.
I'm on zen cart 1.5.7c with this responsive_classic template.

1. I would like to change the color of the background of the Categories Dropdown via mobile view, currently it goes a little lighter than the main category black color, but would like to change it.
   Please view snapshot link: https://i.imgur.com/rxCZLk9.png

2. I would like to add a space/padding only between the LAST of the category names & the New Products Link in the category box in desktop view.
   I was able to achieve this by adding a category name but did not add any text to the name, however that blank space has the active link for that category link, so obviously not the way to do it.
   Please view snapshot link: https://i.imgur.com/kgxna9Q.png

The category fly-out color is on line 1329 of jquery.menu.all.css. I would do an override in something like stylesheet.zcustom.css. That way, it's easier to find later.

A quick way to add the space is to create a blank cat. No name, description, nothing. Put the sort order last of your cats.

I recently installed lat9's jQuery Scrolling Sideboxes on my test website.
The above awesome plugin works perfectly with this amazing template.

Now, I really wanted to add a scrolling REVIEW box and after a Lot of trial & error (one of my favourite movies) and finishing touches from Cindy (thank you), I managed to finally clone one of the scrolling boxes and merge it with the random reviews sidebox :)
The php code for the created scrolling review sidebox can be found here..
https://www.zen-cart.com/showthread.php?214591-jQuery-Scrolling-Sideboxes-Support-Thread&p=1383881#post1383881

It works great except one tiny visual problem.
As you can see here (https://i.imgur.com/sPZZ5cK.png), the sideboxes on mobile view are not center aligned, they are displaying to the right.
BTW, I did not change my sideboxes to display on mobile view, they just started showing up automatically after installing the plugin. The only sidebox that seems to be Centered correctly in mobile view is the Scrolling Featured sidebox, the Scrolling Bestsellers & Reviews Sideboxes are Not centering.

Any suggestions on how to center the scrolling sideboxes correctly please?
Thanking you in advance.

Just noticed if I move the sideboxes in Layout Boxes Controller to the LEFT Column, they all center correctly.
However, I want them to show at the bottom of the website, not the top in mobile view.
The right column shows them at the bottom but they are Not centered.

Just bumping this up, could really use the help.

rlexyd:

Just noticed if I move the sideboxes in Layout Boxes Controller to the LEFT Column, they all center correctly.
However, I want them to show at the bottom of the website, not the top in mobile view.
The right column shows them at the bottom but they are Not centered.

I'm afraid when it comes to changing the layout of side columns with css I know just enough to be dangerous. As a starting point you could try adding this code to your responsive_default.css, responsive_mobile.css & responsive_tablet.css - checking of course that it has no ill effects elsewhere:

@media (max-width:767px) {
.onerow-fluid>[class*="col"]:nth-child(3){float:none;}
}

simon1066:

I'm afraid when it comes to changing the layout of side columns with css I know just enough to be dangerous. As a starting point you could try adding this code to your responsive_default.css, responsive_mobile.css & responsive_tablet.css - checking of course that it has no ill effects elsewhere:

@media (max-width:767px) {
.onerow-fluid>[class*="col"]:nth-child(3){float:none;}
}

Thank you Simon, you did it :)
It looks good and from what I can see, it doesn't seem to have any side effects.

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

dbltoe:

Remember that mobile phones can be looked at in Portrait AND Landscape. Two of those stylesheets have Portrait AND Landscape sections.

Thank You for making sure I get it right :)
Yes, I placed that code in both sections mentioned.

dbltoe:

The category fly-out color is on line 1329 of jquery.menu.all.css. I would do an override in something like stylesheet.zcustom.css. That way, it's easier to find later.
A quick way to add the space is to create a blank cat. No name, description, nothing. Put the sort order last of your cats.

Just realised I haven't actually replied to your helpful post, sorry.
Thank you, I managed to get it to work as per Your advice (NO WAY I could have done that without you narrowing it down for me).
It was very tricky to be honest as I also wanted to change the colour when you actually click on the category links, there was so many options and it wasn't as easy/clear as I thought it would be, especially having to keep clearing my browsers cache to force the new css to download on every change I made. I probably will attempt a few more colour changes in the near future as well.