Use alt attribute properly for accessibility and SEO

<img src="image.png" alt="The picture description comes here." />

Many people miss alternative texts and many misuse them. This is a big mistake, because they have a huge effect on accessibility and even on SEO. Here are 4 reasons why you should pay more attention to writing alternative texts.

#1 Image accessibility

Screen reader users are mainly blind or partially sighted people. The main reason for using alt attribute is to describe the images to them. When a screen reader comes to an image it will read the value of the alt attribute for your visitor.

#2 Fallback text, if image doesn't load

A lot of things can cause an image not to load on a websites. For example: incorrect file path, missing file, too large image size or bad internet connection.

In these cases, the alternative text comes and saves the day because it appears in place of the missing images.

#3 Help people to find your images with search engines

When a search engine crawls through your website, it checks your images too and they will index your images based on your alt attributes.
So if you write good alternative text and your image appears in search results, it can bring you more visitors.

#4 Add keywords to your homepage

When people are looking for something on the internet, they start typing in search engines. The search engines will show them websites that containing the keywords they are searching for. The more keywords you have on your website, the better your page will rank in the search results.
And here comes the best part: every single word you write in alt attribute counts as a keyword, so basically you are improving your search engine optimization (SEO).

Best practices:

Now that we've learned the benefits of a well-written alternative text, it's time to dive into best practices.

Max. 125 characters.

You should write an alternative text as if you were telling someone by phone what is in the picture, but try to be brief, because some screen readers cut off alt text after 125 characters

Don't start with "image of ..." or "picture of ..."

Screen readers tell their user that they are hearing the alternative text of an image anyway.

Write sentences, not words

If you have a picture of a dog playing with a ball, your alternative text should look like this:
"A small black wiener-dog playing with a red ball."
Never write something like this to get more keywords: "Dog, doggy, doggo, puppy, wiener-dog, dachshund, play, ball".

Use empty alt attribute for decorative images

If you have an image just for the looks, you should leave its alt attribute empty, like this: <img src="image.png" alt="" />
It is important to include the alt="" part, because in this case screen readers will skip your decorative images.

If the image has text, write it down

If an image has text content and it gives extra information to your site, you should include it in the alt attribute.

Takeaway:

• Always give proper alt attribute to your images.
• If it's a decorative image, give it an empty alt attribute.<br
• If you keep these few tips in mind, you will not only make your website more accessible, but you can also get more visitors.

Originally posted on Use Less Divs