Accessibility Rule: Image links must have an accessible name
Closed this issue · 0 comments
aubreyquinn commented
Accessibility Rule: Image links must have an accessible name
See if this can be handled by jsx-eslint/eslint-plugin-jsx-a11y
configuration, if not, write a new lint rule.
You can use this repo to see if the existing rules work: https://github.com/aubreyquinn/eslint-plugin-a11y-test
Good
<a href="https://twitter.com/KittyGiraudel">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
>
…
</svg>
<span class="sr-only">Twitter</span>
</a>
<a href="https://twitter.com/KittyGiraudel">
Twitter
</a>
<a href="https://twitter.com/KittyGiraudel" aria-label="Twitter">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
>
…
</svg>
</a>
Bad - no accessible name
<a href="https://twitter.com/KittyGiraudel">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 16 16"
>
…
</svg>
</a>