2

I'm having a bit of a struggle explaining why we should not use text as an image on a new website build.

The design team would like to add a quote pulled from the main content but in order to style it how they would like, they want to make it an image. Their rationale is that the quote is already in the content so it's just extra, so it's fine to add as an image. I have noted accessibility issues and speed load time as some reasons not to.

However, is the argument that it is not necessary information (and more so duplicate content from the main text) a valid reason to use an image?

5

From WCAG 2.0: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html

"1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)"

Customizable: The image of text can be visually customized to the user's requirements;

Essential: A particular presentation of text is essential to the information being conveyed.

So, is it essential that the text be presented in image form?

You say the design team claim that:

in order to style it how they would like, they want to make it an image.

That basically means: "Our design team are not competent enough".

If it's important enough to present this quote to fully-sighted users, then it's important enough to present to everyone. Don't give some users a poorer experience just because the people building the site aren't capable enough to do it.

  • Except for things like logos or specific branding images that happen to incorporate text, but even then you need to provide some alternate forms to deliver/convey the content. – Michael Lai Mar 22 '16 at 21:58
  • @MichaelLai Yes, I would class such logos as something that is generally essential for being presented as an image. It's not really text; it's an identity. – JonW Mar 23 '16 at 9:18
2

Responsive Design

Does the webpage you are embedding this image on resize with the browser window/device screen size? If so (which it should) does this image appear at all breakpoints, including small screen sizes? The text embedded on that image may look great and be an easily readable 42px font when that image is 1400px wide, but when the same image is displayed on a mobile phone and the image is resized to fit the 320px screen the embedded text will now be a 9px tall non-sharp mess.

Accessibility/SEO

As you stated, text that is embedded in images is not able to be read by people who are visually impaired. It is also not visible to search engine crawlers who are trying to index the content of the page. While this can be remedied by including the quote in an alternate text tag, it may be confusing to people using screen readers to hear the quote twice. The alt text can be left blank to counter that, but now visually impaired users are not receiving the same content as visually capable users, which is the whole point of accessibility.

Duplicate Content

You mention that quote in the image is already shown on the page. Screen real estate is important and so is minimizing cognitive load. Why waste both by showing users the same text that they have already read on the same page?

  • Thank you for this. On mobile, this block of content was going to be hidden. It was more for emphasis outside of the main content. You reasonings in "Accessibility/SEO" are very helpful. – user2721349 Mar 22 '16 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.