question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rule: img tags must have alt attributes

See original GitHub issue

Hello! 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:closed
  • Created 7 years ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
ghostcommented, Jun 2, 2016

For the record: opted to ban all empty alt tags, see PR for more details.

1reaction
ghostcommented, May 24, 2016

Would love to. Feel free to assign my way.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found