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?

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....

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.