Second Zen Cart Wide Banner Causes WCAG Fail

[dbltoe]

The second "Zen Cart" Wide Banner uses the following script to generate the ad in the footer of a basic 1.5.8 install.

<script><!--//<![CDATA[ var loc = '//pan.zen-cart.com/display/group/1/'; var rd = Math.floor(Math.random()*99999999999); document.write ("<scr"+"ipt src='"+loc); document.write ('?rd=' + rd); document.write ("'></scr"+"ipt>"); //]]>--></script>

This script does not propagate an alt tag or height/width settings for the ad. Height and width can be handled by the CSS if all ads are a standard size but, some other method needs to be used to try to get alt tags to the images.

With this banner deactivated and the changes to .home-image in the stylesheet and define_main_page (current PRs), 1.5.8 desktop scores all 100s with Chrome's Lighthouse.

More work to come on the Lighthouse scores for mobile and tablet.

[scottcwilson]

Appreciate these fixes. Please work with @lat9 to be sure the Bootstrap template has these violations fixed too.

[dbltoe]

Didn't think bootstrap touched the banners but will check.

[lat9]

Appreciate these fixes. Please work with @lat9 to be sure the Bootstrap template has these violations fixed too.

The banner script is a default database element; nothing to be done for Bootstrap.

[dbltoe]

The real problem here is that ads for Scott, Mike, myself, Square, and other affiliates will break accessibility when they load without an alt tag.

[scottcwilson]

Remember that most folks will turn this stuff off. You don't have to knock yourself out making a test installation perfect.

[dbltoe]

Sure would look good on the Zen Cart resume and it is what kills the across-the-board 100s in Lighthouse. We wind up with a 91% performance rating with them turned on. 😦

That's something anyone with Chrome can test. And an easy place we can point to when we want to boast.

[scottcwilson]

Can you stick in a static alt tag that says something like "advertisment" ?

[dbltoe]

The script appears to reside on the ZC server. I was looking at https://www.geeksforgeeks.org/how-to-create-an-image-element-dynamically-using-javascript/ but was not making sense of it.

[scottcwilson]

It's here: zc_install/sql/install/mysql_zencart.sql:

INSERT INTO banners (banners_title, banners_url, banners_image, banners_group, banners_html_text, expires_impressions, expires_date, date_scheduled, date_added, date_status_change, status, banners_open_new_windows, banners_on_ssl, banners_sort_order) VALUES ('Zen Cart', 'https://www.zen-cart.com', '', 'Wide-Banners', '<script><!--//<![CDATA[\r\n   var loc = \'//pan.zen-cart.com/display/group/1/\';\r\n   var rd = Math.floor(Math.random()*99999999999);\r\n   document.write (\"<scr\"+\"ipt src=\'\"+loc);\r\n   document.write (\'?rd=\' + rd);\r\n   document.write (\"\'></scr\"+\"ipt>\");\r\n//]]>--></script>', 0, NULL, NULL, '2004-01-11 20:59:12', NULL, 1, 1, 1, 0);

diddle your database to fix it, then put the fix into the database creation script.

[dbltoe]

Please click on the link to all the great banners in question.

Clearing the cache acts just as it would with clearing it for the store.

There's no way any coding on the store can anticipate which ad is coming next and, there's no better way to add or remove ads from showing than having them come from the server.

As you will note, the server is sending an empty title and alt tag for all and none have the currently required noreferrer info.

Thus, what you are asking me to "fix" in the database is going to take access to the Big DB in the sky.

In the words of the little guy, "It not from this database comes."

[scottcwilson]

REAL Stores are not going to run these ads. This is just for a demo install with demo data. If you make the change I suggested and create a fresh new store with a new database, it's going to pass the test.

[dbltoe]

Maybe someone else can tell the tale better.

I for one had to accomplish certain things to become a certified host and thus be one of those ads, as are you.

There is no way I could hope to get my ad (or yours) in front of the general public UNLESS it is included in the files obtained when clicking on the download zip button at Zen-Cart.com, they happen to look at our sig, OR they manage to stick around long enough to go to the services link.

I have tried to make it where folks are using those links to benefit ZC through the affiliate program.

I hate to give up ANY "free" clicks.

If we're not going to have the server "serve up" the proper data, then the whole banner should be removed for proper compliance.

[zcwilt]

Working on this now. DO you want the noreferrer tag as well as the noopener that is already there

[dbltoe]

Thanx Ian

Three options are available

Remove target="_blank" which removes the need for either noopener or noreferrer.

Leave target="_blank" and noopener as is.

Add noreferrer to the existing. 👍

While adding noreferrer to the link is not "required", it is considered best practice.

All the links show both and the alt tags. Tests show compliance.

I will add a pr to change the second Zen Cart to Zen Cart Certified Services. I think that would help with exposure.

THANX for all you do.

[dbltoe]

All is working correctly.

Closed as completed.

[barco57]

Can you stick in a static alt tag that says something like "advertisement" ?

That is a quick way to get the banner hidden by anyone with an ad blocker installed. I have seen a couple of sites where they named the banner images ad1.jpg, ad2.jpg, etc... and they didn't show up in my browser when I went to troubleshoot something on their site.

[dbltoe]

Ian fixed all the alt tags and the noopener/noreferrrer in the pan.zen-cart.com database so all is working as needed.

Go to https://pan.zen-cart.com/display/group/1 and keep hitting refresh. You'll see it cycle through the current services. If it were kept on site, you'd have no way of removing or adding from the "mother ship".