Easy Ways to Make Images Accessible

Posted on

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:
Gray cat sleeping on a windowsill

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

    and <desc> to add these inside your SVG code.<br> 2. Hide Decorative SVGs: If an SVG is just a fancy line or a design that doesn’t add any real meaning, you can tell screen readers to ignore it by adding aria-hidden=”true”.<br> 3. Use Real Text: When you put text inside an SVG, use the <text> element instead of drawing the letters as part of the image. This way, a screen reader can read it.<br> 4. Make It Keyboard-Friendly: If someone can click or interact with your SVG, make sure they can also use it with a keyboard.<br> 5. Make It Easy to See: Make sure there is a strong color contrast (like dark text on a light background) so it’s easy to read for everyone.<br> 6. Add a Backup Plan: If someone’s browser can’t show your SVG, you can add a simple line of text that explains what it is. It’s like a backup plan for your drawing.<br> 7. Test It! The best way to know if your SVG is accessible is to try it out. You can use tools like Axe DevTools or Lighthouse, or even better, test it with an actual screen reader like NVDA or VoiceOver.<br> ________________________________________<br> </text></desc>