Tips to Create a Good Alt Attribute for Website Images

  • 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.
Sample Code:
<a class=”logo navbar-btn pull-left” href=”/” title=”Home”>
<img src=”/logo.png” alt=”Home”>
<a class=”logo navbar-btn pull-left” href=”/” title=”Home | Brand Name”>
<img src=”/logo.png” alt=”Brand Name”>

via Blogger


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s