Aria Labels Needed for Centerbox Items and common header

[dbltoe]

Along with the arial label for the tpl_header.....

In includes/modules/bootstrap/centerboxes, the files also_purchased_products.php, featured_products.php, new_products.php, and specials_index.php all have images for the link to the product separate from the link that is the product's name.

All those have an opening a tag with an image, then a second a tag with the item's name as the title. The title tag needs to be in the first a tag versus the second in order to meet Accessibility standards. In the case of featured products, lines 80 and 81 would become if (!($featured_products->fields['products_image'] === '' && PRODUCTS_IMAGE_NO_IMAGE_STATUS === '0')) { $featured_products_image = '<a href="' . $featured_products_link . '" title="' . $featured_products_name . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br>';

A similar situation exists in includes/modules/bootstrap/product_listing with the fix being the changing of line 387 $lc_text .= '<a href="' . $href . '">'; to $lc_text .= '<a href="' . $href . '" title="' . $listing_product_name . '">';

I have the files done up already if you'd prefer a PR

[lat9]

As mentioned in your previous PR, I'll take the opportunity to re-factor the tpl_header.php and add those extra language constants for the aria-labels.

[lat9]

In includes/modules/bootstrap/centerboxes, the files also_purchased_products.php, featured_products.php, new_products.php, and specials_index.php all have images for the link to the product separate from the link that is the product's name.

All those have an opening a tag with an image, then a second a tag with the item's name as the title. The title tag needs to be in the first a tag versus the second in order to meet Accessibility standards. In the case of featured products, lines 80 and 81 would become if (!($featured_products->fields['products_image'] === '' && PRODUCTS_IMAGE_NO_IMAGE_STATUS === '0')) { $featured_products_image = '<a href="' . $featured_products_link . '" title="' . $featured_products_name . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br>';

Why would you not not also add the `title=" attribute to the anchor tag that's always present in the list_box_contents:

        $list_box_contents[$row][$col] = [
            'params' => ' class="centerBoxContentsFeatured centerBoxContents card mb-3 p-3 text-center"',
            'text' => $featured_products_image . '<a href="' . $featured_products_link . '">' . $featured_products_name . '</a><br>' . $products_price
        ];

[torvista]

related? https://github.com/zencart/zencart/issues/4382

[dbltoe]

if you're speaking of lines 83 - 85 of featured_products.php, that anchor has "discenrable text" already in place. Where accessibility balks is if only an image or (in the case of the banner_manager) only a i tag with fa-something is located inside the tags.

<a href="' . $featured_products_link . '">' . $featured_products_name . '</a> Here, the "discernable text" is the variable being filled with the product's name.

Even alt tags and titles placed in the img tag will not stop the errors.

ADA/WCAG can get picky 😃

[lat9]

Thanks, @dbltoe. That helps me to understand the requirements.

[lat9]

Noting that various sideboxes that display products require this update as well.

[dbltoe]

I'm not really seeing what is the ADA/WCAG rationale but none of the sideboxes with the alt role of presentation are showing as any level violation with ANIDI, AIM, Siteimprove, and AXE dev tools.

I'm not able to find their reasoning as to what makes a centerbox item not pass while sidebox items all pass.

Did I say something about picky? 😃

[lat9]

Who the heck knows! I figured it was better to be consistent.