Bug 62774 – AX: If HTML image is not rendered, WebKit should visibly display the alt text

• Status: UNCONFIRMED
• Component: Accessibility

[Vlad Alexander]

If image dimensions (@width and @height) are specified, the browser renders alternate text within those dimensions. If alternate text does not fit those dimensions, it is cut-off. This can result in loss of information to the reader and affects comprehension. This also does not encourage use of alternate text.

To reproduce the problem, render the following markup:

<h1>I <img src="heart.gif" alt="love" width="16" height="16" /> you!</h1>

Above markup in standards mode:
http://html4all.org/staging/a11y-bugs/1002/test1.php

Above markup in quirks mode:
http://html4all.org/staging/a11y-bugs/1002/test2.php

Notice that you cannot read the word "love" because it is cut-off as shown in this screen shot:
http://html4all.org/staging/a11y-bugs/1002/safari-bad-alt-render.gif

Firefox correctly renders alternate text (not constrained by @width and @height) if page contains a DOCTYPE. While the image is loading, a placeholder (outline) with the @width/@height is rendered. When the image fails to load, alternate text is rendered in place of the image placeholder/outline as shown in the following screen shot:
http://html4all.org/staging/a11y-bugs/1002/ff-good-alt-render.gif

Test case - image loads after 5 seconds:
http://rebuildingtheweb.com/misc/html4all/slow-load-found.asp

Test case - image fails to loads after 5 seconds:
http://rebuildingtheweb.com/misc/html4all/slow-load-not-found.asp

It would be useful to have alternate text displayed as text, rather than text on a graphic. This way, parts of alternate text could be selected, copied and alternate text would wrap. It would also be beneficial to make alternate text participate in Find operation.

In order stress the importance of this bug and to assure you that the recommended way of fixing the bug is appropriate, this bug is co-signed by the following accessiblity experts:

- Alastair Campbell
- Andrew Downie
- Denis Boudreau
- Everett Zufelt
- Jason Kiss
- Jim Byrne
- John Foliot
- Joshue O Connor
- Laura Carlson
- Leif Halvard Silli
- Nigel Peck
- Roberto Scano
- Roger Johansson
- Vlad Alexander

This bug report comes from the community led a11y bugs project here:
http://html4all.org/staging/a11y-bugs/

[Maciej Stachowiak]

It's not necessary or helpful to "co-sign" bugs like this. The key things to provide are detailed information on the bug, simple test cases, and sites affected by the bug. Lists of names just clog up the bug. Thanks for the great technical info though!

[Alexey Proskuryakov]

The provided test doesn't show cut-off test - it shows missing text, as in bug 5566. Could you please amend the test so that it showed cut-off text?

[Maciej Stachowiak]

I don't think we ever cut the text off, I think it is always missing if it would be cut off.

Here is a test case that illustrates Safari's behavior in various cases, it is instructive to compare to Firefox:

<img src=nonexistent.jpg alt="Some fancy alt text goes here."><br>
<img height=100 width=400 src=nonexistent.jpg alt="Some fancy alt text goes here."><br>
<img height=100 width=100 src=nonexistent.jpg alt="Some fancy alt text goes here."><br>
<img height=50 width=50 src=nonexistent.jpg alt="Some fancy alt text goes here."><br>


<img alt="Some fancy alt text goes here."><br>
<img height=100 width=400 src=nonexistent.jpg alt="Some fancy alt text goes here."><br>
<img height=100 width=100 alt="Some fancy alt text goes here."><br>
<img height=50 width=50 alt="Some fancy alt text goes here."><br>

[James Craig]

Created attachment 215012 [details]
test case demonstrating bug

[James Craig]

<rdar://problem/15305013>

[James Craig]

A few blog posts covering this one. Might include some additional test cases:
http://blog.paciellogroup.com/2010/01/alt-and-title-content-display-in-popular-browsers/

[Simon Fraser (smfr)]

None of the http://html4all.org links load for me.