DesaraeV

Tuesday, May 16, 2017

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:
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>
My Photo

Senior UI/UX web designer at a large-scale IT contractor for defense, intelligence, and civilian government solutions. Adventurist and certified Yoga / Barre Instructor. Love aviation, books, and travel.Prefer long light hearted series in mystery, comedy, fantasy, and romance.

Share This Post

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Share on Tumblr

No comments:

Post a Comment

Backlinks will be hidden. Crude comments may be removed.