Accessibility Lawsuit - California Parks

https://trelegal.com/posts/cfca-unruh-settlement/

It's been a while since I stopped at responsive_classic when installing Zen Cart.

One of the major problems with responsive_classic "out of the box" is the heading structure. A screen reader for a visually impaired person is more concerned with structure than color. The reader first looks for "labels", "landmarks", then "Structural Elements". Labels are important and the The Structural Elements are the headings in the text. They should go in order like h1, h2, h3, h4. Other combinations are acceptable such as h1, h2, h2, h3, h4, h4 but h1, h3, h2, h4 are confusing to the reader.

A standard test of responsive_classic using the WebAIM WAVE tester after first load will show no errors BUT, if you look under structural elements, you'll find that it doesn't "see" the h1 until the entire left-hand column is propagated. Thus, the reader sees h5, h4, h4, etc until it finally gets to the Congratulations!'s h1 tag.

The workaround is to add an h1, h2, and h3 tag in front of the existing h4 in includes/templates/YOUR_TEMPLATE/common/tpl_box_default_left.php. Something like```
<h1 class="visually-hidden">Main Column Heading</h1> <h2 class="visually-hidden">Section 1</h2>
<h3 class="visually-hidden">Box Headings 1</h3>

Then, you will need to add the following to your CSS:

.visually-hidden { position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

This same problem is found when using bootstrap as the template.

The color problem "out of the box" can be solved by adding the following to the CSS:

#siteinfoIP, #siteinfoLegal, #bannerSix { background: #585857;
}

Last, but not least is that some of the p and h tags do not use the proper syntax for responsiveness.  Without getting knee-deep in the subject, the best example is the tagline of a new product. > This product was added to our catalog on Wednesday 06 December, 2023.The CSS lists that the text font-size is 1 em which bases it on a particular font setting.  While this works most of the time and em is better than px, 1 rem is a better setting as it is based on the font-size being currently used by the browser.  The rem setting is less likely to have a "text too small" error.

The world of accessibility can be daunting and there is no "magic wand" for a fix.

I've tested hundreds of sites and I'm glad to say the best out of the box is Zen Cart.:bigups: