Tips to Create a Good Alt Attribute for Website Images

Tips:

• Anchor Text (tips: 1) The text should describe the image if the image contains information 2) The text should explain where the link goes if the image is inside an <a> element 3) Use alt="" if the image is only for decoration)
• Alt Attribute is used when an image is not present or for screen readers (for accessibility purposes screen readers, like JAWS, read text on a page to people with sight impediments). The alt attribute can also help with search engine optimization. It is important that this tag describes the image it is attached to.
• As a requirement of HTML standards, every image _must _ have an alt attribute.
• Succinct - less than two sentences
• Do not use "image of" or "graphic of"
• Do not repeat text that is outside of the image, if the image conveys text - this should be included in the alt attribute even if it is longer than two sentences.

Resources:

• http://webaim.org/techniques/alttext/
• https://www.w3schools.com/tags/att_img_alt.asp
• http://webaim.org/techniques/images/

Sample Code:

<a class="logo navbar-btn pull-left" href="/" title="Home">
<img src="/logo.png" alt="Home">
</a>

Better:

<a class="logo navbar-btn pull-left" href="/" title="Home | Brand Name">
<img src="/logo.png" alt="Brand Name">
</a>