Admin/Catalog, missing Icon Names for Category and Product Pages

[jsquared]

Version: 1.5.6A
Under Admin/Catalog, text descriptions are missing for edit/copy/move icons on category and product pages. Was working in 1.5.5A.

Go to a category product page. The item title/model are displayed along with the preview link. The links past this for each product/category do not have any alt text attached.

Happy to provide further details to help troubleshoot.

[DrByte]

In the prior version those icons were actual image gifs on which the HTML "alt" text was set for compliance with usual HTML markup standards.
But in v156 those are font-icons, not image gifs, so there's not "alt" tags for them in the HTML, thus they were not specified.

Are you finding the icons aren't displaying properly?
Are the icons themselves not meaningful?
Are you just pointing out a pattern difference?
Or is there another reason?

[jsquared]

Thanks for the quick reply and clarification.
I am using a screen reader, so since these are not rendered as text, the screen reader does not speak any values for them, just blank links. When you have icons with Alt text, the screen reader will speak the alt text so that works fine. If you want to keep the font icons, here's one page I found with a solution to retain the text alternatives for assistive technolo
https://www.w3.org/WAI/GL/wiki/Icon_...xt_Alternative

[Design75]

Good point imho. Willing adding a title to the link work for you?

[jsquared]

Good point imho. Willing adding a title to the link work for you?

Not a bad idea. Looks like this will work for some screen readers but not all, especially on mobile. I'll do some more research and try to come up with a fix. I assume edit/delete/copy/move are all still in the language files somewhere as they are used on other pages?

[jsquared]

Looks like the simple fix is to use aria-label.

For example, change line 911 of category_product_listing.php to

<a href="<?php echo zen_href_link(FILENAME_CATEGORY_PRODUCT_LISTING, 'cPath=' . $cPath . '&product_type=' . $product['products_type'] . '&pID=' . $product['products_id'] . '&action=move_product' . (isset($_GET['page']) ? '&page=' . $_GET['page'] : '')); ?>" style="text-decoration: none" aria-label="<? echo ICON_MOVE; ?>">

This will have no effect visually but label the link as Move for screen reader users.

More is explained on the Accessibility page for Font Awesome
https://fontawesome.com/how-to-use/o.../accessibility

If it would help expedite,, I can go through this file and add the necessary code

[mc12345678]

May also suggest looking over other somewhat similarly edited pages. I think at least ezpages and manufacturers were both touched in a similar way... if I'm wrong, I'm wrong, but would recommend looking at other pages that offer multiple "buttons" to ensure that the determined fix be applied there as well. Jsquared, you will possibly provide the most help in identifying that aspect.

I say good catch!

[Design75]

May also suggest looking over other somewhat similarly edited pages. I think at least ezpages and manufacturers were both touched in a similar way... if I'm wrong, I'm wrong, but would recommend looking at other pages that offer multiple "buttons" to ensure that the determined fix be applied there as well. Jsquared, you will possibly provide the most help in identifying that aspect.

I say good catch!

No you're right, chances are there are more missing elements like this.

[jsquared]

Sure no problem, once it's confirmed that the proposed fix is the preferred method, I can go ahead and edit the affected files. Thanks for your help with this.

[DrByte]

Yes, aria-label is probably the best way forward. Thanks for the feedback on this!