Rendering of <input type=image> that does not represent an image

[annevk]

https://html.spec.whatwg.org/multipage/rendering.html#images-3 is not exactly clear on what "alternative text" is. Presumably it just means the alt attribute as the input element section doesn't really detail anything else.

However in practice user agents at least fallback to the value attribute when the alt attribute is not there and Chromium and WebKit also seem to include the title attribute in that chain (preferring that to value).

You can use this example and add/remove attributes to get a feeling of what happens in different user agents:

data:text/html,<input alt="1" title="2" value="3" type="image" style="background-image: url('data:image/gif;base64,R0lGODdhAgACAIABAAAAAP///ywAAAAAAgACAAACA0QCBQA7')">

Also note how when you use the empty string Chromium and Gecko render nothing, but WebKit falls back to "Submit".

cc @whatwg/a11y

[stevefaulkner]

@scottaohara 👆🏼for reference the HTML acc api acc name algorithm for input type image https://www.w3.org/TR/html-aam-1.0/#input-type-image-accessible-name-computation

[patrickhlauke]

as that particular bit is explicitly about "If the element is an input element that does not represent an image", the use of "alternative text" is unnecessarily confusing. I think it should say "accessible name" (which then covers the other things mentioned, like 'title')

If the element is an input element that does not represent an image and the user agent does not expect this to change
The user agent is expected to treat the element as a replaced element consisting of a button whose content is the element's accessible name. The natural dimensions of the button are expected to be about one line in height and whatever width is necessary to render the text on one line.

[patrickhlauke]

In https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-button it defines this more specifically as

the contents of the anonymous button content box are expected to be the text of the element's value attribute, if any, or text derived from the element's type attribute in an implementation-defined (and probably locale-specific) fashion, if not

if not accessible name, then perhaps https://html.spec.whatwg.org/multipage/rendering.html#images-3 should just use that wording as well, or even just cross-link to https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-button ?

[annevk]

I don't think it should be accessible name. HTML shouldn't depend on ARIA in that way. But it should be more clear, agreed. The questions here are:

1. Do we want alt -> title -> value or some other combination of attributes?
2. What should we do if we end up with an empty string, given that it's a button and likely not just decorative?
3. Should we render a broken image icon as Chromium appears to do?
4. Are we constrained somehow by web compatibility?

[patrickhlauke]

1. I'd say alt -> title -> value would make sense
   2./3. Explicitly falling back to "Submit" may make sense / be more user-friendly than showing a broken image with no text alternative/accName. It does skirt a bit towards browsers applying error-correction of sorts though
2. I'd hazard a guess (not sure if there's an appropriate counter somewhere for it) that <input type="image"> usage is relatively low - would be good to get some sense of this