RSS icons have the same Alt tag. Lighthouse is failing these elements. How do I display different alt tags for each icon?

I am making my websites accessible by mostly using Lighthouse in Chrome Devtools. I have fixed everything but this one issue. Lighthouse is failing these elements because the alt tags need discernible names:

a class="rsswidget" href="https://blog.mysite.org/formative-assessment/feed"img class="rss-widget-icon" style="border:0" width="14" height="14" src="https://blog.mysite.org/wp-includes/images/rss.png" alt="RSS"/a

a class="rsswidget" href="https://blog.mysite.org/technology/feed/"img class="rss-widget-icon" style="border:0" width="14" height="14" src="https://blog.mysite.org/wp-includes/images/rss.png" alt="RSS"/a

a class="rsswidget" href="https://blog.mysite.org/licensure/feed/"img class="rss-widget-icon" style="border:0" width="14" height="14" src="https://blog.mysite.org/wp-includes/images/rss.png" alt="RSS"/a

How do I change the alt text for the image to reflect which feed it is related to? I am not very familiar with wordpress, most of the sites I work on are drupal. Any thoughts?

Topic accessibility rss plugins Wordpress

Category Web

1
answered at

Well I am a complete fool. It wasn't the use of the alt tags at all, it was the fact that the icons were set to display:none, yet the code was still there which seems to confuse a screen reader. I just hid the element in a theme file and made it appear when it was focused or active and it seemed to clear the error....

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.