Zen Colorbox

[mc12345678]

It looks as if you have the problems identified in WebAIM solved.

It should be noted that the problem was identified as an empty button which is not fixed by adding a title. The lack of title or label would probably be identified when/if the button had some text. Having an ID for each MAY have eliminated the need for a title or label.

<button type="button" id="cboxPrevious"></button>

is one example and should probably, as a minimum, be

<button type="button" id="cboxPrevious">Previous</button>

The reason they were not seen in the text of the page and were seen by the tool is that the surrounding div was display:none.

display:none does NOT keep some accessibility tools or Search Engines from "seeing the code" that is hidden in the background of your browser.

What I have found interesting is that the browser being used to run the WAVE check makes a difference.

When using microsoft edge no problem is reported in this area, so far when using Google Chrome, the error was identified but also the title content wasn't carried over. In part not sure if there is some caching involved through the process. As to an ID being present, thus far all cases of a problem "empty button" have included an ID, so I would say that particular theory doesn't apply in WAVE's evaluation.

Continuing to look into ways to modify the js code to produce more globally acceptable accessibility results.

[dbltoe]

Continuing to look into ways to modify the js code to produce more globally acceptable accessibility results.

Thanx for that MC.

I appreciate your taking the time to make it better for others.

I've learned to use the WebAIM as an initial look. The tool we(myZenCartHost.com) have is pretty accurate. It's the one that doesn't like the way the lang and dir are done in ZC.

There are a couple of commercial versions that are slightly more accurate but, they have a lot of false positives.

I use a Grammarly plugin with chrome and it's always listed as a problem with one of the commercial ones. Don't know why a browser extension should cause an issue but, it does.

[strelitzia]

I've come across an issue where the "help" content on the shopping cart page doesn't load correctly after installing colorbox.

Tested on the following configuration.
ZC 1.5.7c using responsive classic template

Content correctly displayed in a new window before installing colorbox. Now the colorbox opens but the white content area is only around 30px in height and is empty.

If I inspect element I see

<div id="cboxContent" style="float: left; width: 508px; height: 28px;"><div id="cboxLoadedContent" style="width: 508px; overflow: auto; height: 0px;">

  
  <meta charset="utf-8">
  <title>Zen Cart!, The Art of E-commerce</title>
  <meta name="keywords" content="ecommerce, open source, shop, online shopping, store ">
  <meta name="description" content="Zen Cart! ecommerce, open source, shop, online shopping, store">
  <meta name="author" content="Test Site">
  <meta name="generator" content="shopping cart program by Zen Cart®, https://www.zen-cart.com eCommerce">
  <meta name="robots" content="noindex, nofollow">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">


  <base href="https://testsite.localhost/">
  <link rel="canonical" href="https://testsite.localhost/index.php?main_page=info_shopping_cart">

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/responsive_classic/jscript/jquery.min.js"%3E%3C/script%3E'));</script>
<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/template_default/jscript/jquery.min.js"%3E%3C/script%3E'));</script>

<link rel="stylesheet" type="text/css" media="print" href="includes/templates/responsive_classic/css/print_stylesheet.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/style_imagehover.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_colors.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_css_buttons.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/stylesheet_zen_colorbox.css">
<link rel="stylesheet" type="text/css" href="/includes/templates/responsive_classic/css/info_shopping_cart.css">

<link rel="stylesheet" type="text/css" href="includes/templates/responsive_classic/css/responsive.css"><link rel="stylesheet" type="text/css" href="includes/templates/responsive_classic/css/responsive_default.css">  <script type="text/javascript">document.documentElement.className = 'no-fouc';</script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">




<div>
<h1>Visitors Cart / Members Cart</h1>
<h2>Visitors Cart</h2>
<p>Every visitor to our online shop will be given a 'Visitors Cart'. This allows the visitor to store their products in a temporary shopping cart. Once the visitor leaves the online shop, so will the contents of their shopping cart.</p>
<h2>Members Cart</h2>
<p>Every member to our online shop that logs in is given a 'Members Cart'. This allows the member to add products to their shopping cart, and come back at a later date to finalize their checkout. All products remain in their shopping cart until the member has  checked them out, or removed the products themselves.</p>
<h2>Info</h2>
<p>If a member adds products to their 'Visitors Cart' and decides to log in to the online shop to use their 'Members Cart', the contents of their 'Visitors Cart' will merge with their 'Members Cart' contents automatically.</p>
<p style="display: none;"><a href="javascript:window.close();">[ Close Window ]</a></p>
</div>

</div><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left; display: none;"></div><button type="button" id="cboxPrevious" style="display: none;"></button><button type="button" id="cboxNext" style="display: none;"></button><button type="button" id="cboxSlideshow" style="display: none;"></button><div id="cboxLoadingOverlay" style="float: left; display: none;"></div><div id="cboxLoadingGraphic" style="float: left; display: none;"></div><button type="button" id="cboxClose">close</button></div>

so clearly the content is there, but for some reason it isn't being made visible.

Has anyone else had this problem, and any suggestions on how to resolve it?

[strelitzia]

I would assume the lack of content is because of the height being 0px in the first line of the snippet posted above.
I'm guessing that height should be set by the jquery controlling volorbox, but for some reason it isn't happening.