How Should I Optimize Images for Both SEO and Accessibility?

THE PROBLEM

  • Real text that is styled and formatted to fit your design is the best for accessibility tools and those using a zoom tool to read your page
  • Images of text are hard to read for mobile users
  • Images of text are hard to read for users with low vision — JPG and PNG often become blurry when scaled
  • Screen readers lose track of lots of text in images, meaning a few words is okay, but beyond that the message gets garbled
  • Image-specific Alt text improves image accessibility and SEO — <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>

LEAVE THE REDUNDANCY

  • These are quick and easy images to make
  • They include real text and a pop of color/visual interest
  • The real text is good for accessibility

REMOVE THE IMAGES ENTIRELY

REMOVE THE TEXT FROM THE IMAGE

PUT THE TEXT OVER AN IMAGE

  • We only have to make one image for all the headers if the designer didn’t have time to make different ones
  • The text itself would scale well
  • We won’t always have to put metadata behind these images

CHANGE THE IMAGE STRATEGY

  1. Audit our current images/posts with the Accessibility Developer Tool Extension for chrome
  2. Either use the images as dividers or backgrounds for text
  3. Find the skills for data visualization and better visual content creation
  4. Implement those skills to making better visual content and use the first trial runs to build better image creation processes

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store