3

Whenever possible I try to turn images that have text on them into html/css to separate the textual content from the image for better responsiveness and SEO. However, sometimes this cannot be done as a client might explicitly request to use the image.

In these cases, is it better to write the text that is on the image in the image's alt attribute, or write it inside of a screen reader only class? Or both? I'd assume not both as this would read twice to a screen reader (once in the alt attribute and once in the sr-only class).

Both would get indexed by Google I assume either way, but I'm wondering if there's benefits / drawbacks to either option.

Improve this question

1 Answer 1

Reset to default
2

Honestly i don't see how to utilize sr-only for your purpose. But adding the text to both of alt and title attributes (<img src="" alt="your content" title="your content") will finally do the job.

Improve this answer
1
  • So what I meant was let's say there is an image that a client would like to use as a heading, where the heading text of the <article> is on the actual image. In that case, I could either use sr-only to write the title after the <img /> tag, or just use the alt attribute.
    – Timothy Fisher
    Commented Sep 25, 2019 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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