3

I am making a comic web site. Each comic is a single png and has a html page. For each comic I have a transcript, like this:

A and B are sitting on a bench in the park.

A: Nice weather today.

B gives him a weird look: Too rainy!

A: ...

Where I should put that transcript in the html?

<meta name="description" content="transcript"/> seemed like a good place, but it seems limited to 155 characters, and my transcripts may be longer than that (up to 900 characters).

The <img>'s alt attribute might work, but that could be limited in length as well.

I could add it to the page in an invisible div with style="display: none" (like old XKCD comics do) but I don't want to have search engines think I am trying to cheat with invisible text.

2

Using the alt attribute in such cases is not ideal, because often some markup/structure is needed to describe the image’s content, which alt does not allow (it can only contain plain text).

Other options:

  • The longdesc attribute allows you to link to a page (or an element on the same page) that contains the "long text description" of an image:

    <img src="image.png" alt="…" longdesc="#transcript" />
    
  • The object element can have fallback content in case the image can’t be accessed:

    <object data="image.png" type="image/png">
      <!-- … -->
    </object>
    
  • The figure element can have a figcaption element:

    <figure>
      <img src="image.png" alt="…" />
      <figcaption>…</figcaption>
    </figure>
    

For accessibility, it would be best to provide the transcript for everyone, not only for screen reader users. Many users that could benefit from a transcript don’t use a screen reader, so visually hidden content is really hidden to them.
For the same reason, relying on alt or using an object element isn’t ideal either, and if longdesc gets used, you should also add a hyperlink for users that don’t use a user agent with longdesc support.

So ideally you would simply show the transcript on the same page (or another page, and link to it). If using figure+figcaption, the relationship is clear; otherwise use longdesc to connect the img with the transcript (and provide a hyperlink if it’s on a different page or not next to the img).

  • i'm afraid, from SEO point of view it would have contra-productive effect, because of lack of any meaningful machine-readable relation between image, webpage and image description, which is needful to make the page findable in web and image search – Evgeniy Mar 27 '16 at 19:22
1

if you place it for your human readers, so make it just like usual html, h1+div/p with text.

to prepare it for search engines i see some possibilities:

  • primarily i would make use of Exif/IPTC image meta. The caption / abstract is limited to 2.000 characters
  • Then i would markup the page with structured markup of Schema.org (mainEntityOfPage -> ImageObject). There are no length limitations, and https://schema.org/ImageObject allows implementation of Exif/IPTC data as property-value pairs.

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.