all-contributors/cli

Inaccessible HTML table code generated due to extra alt text

AnandChowdhary opened this issue · 2 comments

AnandChowdhary commented

Describe the bug
The HTML markup of a typical table cell generated by All Contributors looks like this:

<td align="center">
    <a href="https://anandchowdhary.com/?utm_source=github&utm_campaign=about-link"><img src="https://avatars3.githubusercontent.com/u/2841780?v=4" width="100px;" alt="Anand Chowdhary" />
        <br /><sub><b>Anand Chowdhary</b></sub></a>
    <br /><a href="https://github.com/staart/api/commits?author=AnandChowdhary" title="Code">💻</a> <a href="https://github.com/staart/api/commits?author=AnandChowdhary" title="Documentation">📖</a> <a href="#design-AnandChowdhary" title="Design">🎨</a></td>

As you'll notice, the <img> has alternate text with the user's name, which is then repeated below in the <sub><b> tag.

The problem is that a screen reader would read this is "Anand Chowdhary Anand Chowdhary", when it should actually read it as "Anand Chowdhary". The solution is for the image to be <img alt="">. Empty alternate text means a screen reader should not read this image out, and is perfectly valid markup.

AnandChowdhary commented

According to the decorative images section of the WCAG:

Image with adjacent text alternative: This picture of a sleeping dog is already sufficiently described by the adjacent text. There is no need to repeat this information, and a null (empty) alt value can be used for this image.

<p>
  <img src="sleepingdog.jpg" alt="">
  <strong>The sleeping dog:</strong> ...
</p>
all-contributors-release-bot commented

🎉 This issue has been resolved in version 6.11.1 🎉

The release is available on:

Your semantic-release bot 📦🚀