Short note on coding alt text

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 AT/SRs?”.  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/SR 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.">