Rule: img tags must have alt attributes
See original GitHub issueHello! Please let me know if this is the way I should do it. If this issue is cool, I’ll add more rule proposals.
Bad:
<img src="hello.jpg">
<img src="//cdn.verylongurl.com/1234/bucket/hello.jpg">
Good:
<img src="hello.jpg" alt="">
<img src="logo.jpg" alt="Your Website Name">
<img src="save-icon.jpg" alt="Save draft">
<img src={{userGeneratedUrl}} alt={{userGeneratedCaption}}>
Screen readers read images as text. Without alt
attributes, screen readers fallback to reading the full src
for an image out loud. With CDNs, that will get very annoying 😃 To mitigate, always provide alt
attributes for images. The value of the attribute should present the content and function of the image. Blank alt attributes are preferred if the image is purely presentational, but if it displays information (e.g. an image of text), transcribe the text; or if it’s tied to functionality, write what it does as if it were a button. Ref: http://webaim.org/techniques/alttext/
Issue Analytics
- State:
- Created 7 years ago
- Comments:14 (5 by maintainers)
Top Results From Across the Web
Images must have alternate text | Axe Rules
Provide "null" alt attributes (using alt="" ) for images which do not provide information or do not require alternative text because the image...
Read more >Images must have alt text
Each img element must specify an alt attribute or equivalent markup that either defines a text alternative or identifies the image as being...
Read more >Five golden rules for compliant alt text
Rule 1: Every <img> must have an alt= attribute ... There is no exception to this. The <img> element must always contain the...
Read more >Accessibility: Image Alt text best practices
As a rule of thumb: avoid writing text alternatives longer than 100 characters. Having long alt text will result in a poor user...
Read more >H37: Using alt attributes on img elements
When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For the record: opted to ban all empty alt tags, see PR for more details.
Would love to. Feel free to assign my way.