Easy Ways to Make Images Accessible

Accessibility isn’t just about following rules. It’s about making sure everyone, including people who use screen readers, can understand your content. Making your pictures and SVGs accessible also helps search engines find your site, which is great for your website!

ALT Text for Accessible Images

ALT text is like a short, secret description of a picture that only a screen reader can “see.” It helps people who can’t see the image understand what it is.
How to Add ALT Text to Make Images Accessible
You add ALT text to a regular image using the alt tag inside the image code, just like this:

Tips for Writing Effective ALT Text

• Keep it short and simple (under 125 characters, like a tweet).
  Explain why the picture is there. Does it show a product? A person? A cool drawing?

• Describe any text inside the picture.
• Use simple, everyday words. Don’t use confusing language.
• If the picture changes, update the description.
• When a website needs to check if you’re a human, a simple “I’m not a robot” button is a good way to do it. If a site uses a CAPTCHA (like a puzzle you have to solve), it must also give an audio option so people can listen to the puzzle instead of just seeing it.

Common Mistakes in Image Accessibility

• Don’t start with “image of” or “picture of.” Screen readers already know it’s a picture.
• Don’t describe pictures that are just for decoration (like a small line or a fancy border). For these, just use alt=””.
• Don’t copy the caption. If the text under the picture says the same thing as your ALT text, that’s just annoying for someone listening to it twice.
• Don’t use super general descriptions, like “company logo.” Say something more specific, like “Google logo” or “Netflix logo.”
• Don’t add useless details. You don’t need to say “a beautiful, magnificent, stunning cat.” Just “a gray cat sleeping” is perfect.
  

  How to Make SVGs Accessible

  SVGs are like digital drawings made of text. This makes them a bit different from regular pictures.

  1. Give Your SVG a Title and Description: Think of this as a title and a short summary for your drawing. Use