One of my Stack Exchange communities is currently cleaning up its missing image alt text for the benefit of those who use the site with screen readers. We understand that the alt text we add will be offered in lieu of the image, and we know to omit it when it's totally redundant (image is pure decoration) and to focus on the description that the reader needs (e.g. "site logo" is more meaningful than a longer description of the logo).

We're a research-oriented site, and we've run into a few cases where the image is a scan from a book of a paragraph or so of text. (This is for cases where the text isn't available online, and sometimes where the book might be out of print.) We've talked about a few options in those cases, but none of us use screen readers nor know this field well, so we're coming to you.

  • We could retype the text and, while we're at it, just make that inline text (in a blockquote) instead of needing the image at all. Benefit: accessibility. Possible down-side: harder to skip over in cases where this was supplementary information (where sighted people might also just skip past the image).

  • We could retype the text as alt text, leaving the image for those who can see. We are not sure if that would be easier for those with screen readers than inline text is.

  • We could summarize the text and include a citation, e.g. "entry for (word) from (technical dictionary)", leaving it to the reader to find that source.

How should we approach this aspect of making our site accessible? What are users who rely on screen readers expecting from alt text in this situation?

Ours is a Stack Exchange site, so we are limited to Markdown.

  • A mix of the first two options might be having a blockquote with text overlayed with a corresponding image using CSS/relative positioning. So this way you'll have a paragraph/blockquote with full text available for the screen readers (and the search engines), as well as an image for whatever reason you chose to have it in the first place – aexl Feb 1 '15 at 23:14

Retype vs. summarize

  • (a) If the entire text of the scan is relevant, the entire text should be provided in text form.

  • (b) If only a certain part of the scanned text is relevant, only this part should be provided in text form. (It can have a summary in addition, as long as the relevant parts are quoted verbatim.)

  • (c) If none of the scanned text is relevant (e.g., it’s about the handwriting, the design, etc.), this information should be described in text form (no need for providing the text).

alt attribute vs. blockquote element

While there is no size limit for the content of the alt attribute, I wouldn’t use it for long texts. Text in alt can’t have any formatting (no headings, no lists, etc.), it can’t be easily copy-pasted, it can’t be searched with browser’s search-on-page features, and so on.

HTML provides the longdesc attribute (for img), the object element (which can have fallback content) and the figure element (to reference longer alternative content in figcaption) as possible alternatives (all of which allow markup for the alternative/fallback content), but I guess these can’t be used on Stack Exchange sites.

Rough guideline:

  • Use alt if the text is rather short, and always in case (c).
  • Use blockquote if the text is long, and/or if users will likely "interact" with it.
    (The alt attribute on the img should be empty in this case.)

Keep the scan

If the relevant text from the scan is provided in text form, you could consider removing the image, but I think it often can be useful to keep it in addition to the text.
One example could be to allow reviews of the transcribed text (to check if the user did not make a mistake).

If the text conveys everything that is relevant, consider to link to the image instead of including/showing it:

As it says in … (transcribed from scan of …):

Lorem ipsum …
… adipisci velit

  • Just to note, on SE, we have revision history, so we can compare against that, and remove the image. – Scimonster Feb 6 '15 at 7:56

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.