Short note on coding alt text

September 15, 2015Development

The other day, in relation to a github comment, I was asked by my friend Mike[tm]Smith “Can alt have line breaks in it or does that do weird things to assistive technologies like screen readers?”.  I did some quick testing. What I found was that line breaks in alt attribute text, has a few suboptimal effects, dependent on browser and screen reader used.

The noted UX effects of line breaks (limited browser/screen reader combinations tested) in HTML source code of alt are:

  • Reading of alt text stops at the end of a line.
  • After pressing the continue reading key, reading of the alt text resumes but the object role (in this case “graphic”) is announced at the start of each new line.

Given that a primary use case for alt text is to provide information for screen readers users, it is reasonable that developers should consider not including arbitrary line breaks in alt text, so that the best UX for screen reader users is provided.

Example:

The following code example would be announced something like
“graphic, Having no line breaks in HTML code of alt attributes produces better UX
graphic, than
graphic, having
graphic, line
graphic, breaks.”

<img alt="Having no line breaks in HTML code of alt attributes produces better UX, 
than 
having 
line 
breaks.">

Where as The following code example would be announced something like: “graphic, Having no line breaks in HTML code of alt attributes produces better UX, than having line breaks.”

<img alt="Having no line breaks in HTML code of alt attributes produces better UX, than having line breaks.">
Categories: Development
Tags:

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Kraig Walker says:
September 21, 2015 at 8:35 am

This is a fair point. One use for having line breaks in alt text however is to provide a fallback for when images aren’t downloaded in html email (i.e 404, offline, blocked)

Giving an img the style “line-wrap:pre” allows the client to treat the alt text as preformatted. While we still can’t use the more pleasant n in our alt text, beginning new lines in your actual document as your first example demonstrated allows you to cleverly create multiple lines of alt text that can replace the contents of large hero images in email.

While this still doesn’t give a great UX for screen readers, I generally use it when splitting alt text into multiple statements and sentences.

Thanks for talking about this. Personally If I were to add to the HTML Spec it would be the ability to add escape sequences to alt text.