`controls` attribute for `<img>` element

[yoelhawa]

What problem are you trying to solve?

On some spatial computing platforms (e.g. Safari on Apple Vision Pro) images and videos can be viewed in an immersive spatial mode using requestFullscreen(). However, this only works when both the media and the platform support it. Unfortunately, it's currently nearly impossible to detect whether a specific image/video will support this spatial fullscreen mode, making it difficult to show the appropriate UI controls. Detecting whether the platform supports spatial media would expose a fingerprinting bit, and determining whether media supports spatial viewing depends on OS-defined requirements (not just file type), and these capabilities are only discovered after the media is fully parsed. A page needs to know if both the platform AND the specific media file support spatial fullscreen before it can confidently show users the option to enter it, but there's currently no safe/reliable way to determine this. We’ve already seen examples of websites with multiple buttons on their page with instructions to press certain ones only on certain platforms, which is confusing for users. There’s also currently no consistency in the UI presented to users. Additionally, there is no declarative way to launch element fullscreen on an image and use these special capabilities, and the current approach of requiring a JavaScript API adds unnecessary complexity for developers.

What solutions exist today?

There aren’t other solutions available that accomplish all these goals. At best, a page could attempt to identify the platform/user agent through different means and keep a list of supported ones. Still, this does not solve the issues of complexity to developers or a consistent UI to users.

How would you solve it?

Proposing introduction of a boolean controls attribute for HTML image elements that aligns with the controls attribute on HTML media elements. If the attribute is present on an image element, then the user agent can expose a user interface to the user over the image. The controls made available will be up to the user agent, and can be platform-specific or specific to the user’s own user agent preferences. This unlocks several other cases where it could be beneficial to allow a user agent to expose custom UI over an image as well. For example, a user agent (potentially based on the user’s preferences) could display fallback text within some interactive UI over an image (for example, when hovering over an “ALT” label in the corner of the image, as many websites have done). Additionally, it could be used to add timeline controls for animated images such as animated GIFs. Generally though, it could also be good to introduce parity with media elements’ controls attribute to image elements.

Anything else?

No response

[annevk]

cc @keithamus @lukewarlow @zcorpan @josepharhar @mfreed7

[josepharhar]

If we already have it for the video element, I suppose that makes sense. Does the video element ever not add controls when the controls attribute is set on it though? Since I imagine there will be many situations where the img element does not actually show any controls when the controls attribute is set on it - or do you think it should show a fullscreen button everywhere?

[yoelhawa]

@josepharhar For the purpose of this specific issue, the user agent should not just show a fullscreen button everywhere, since allowing the UA determine whether or not it should be presented is one of the main goals of this proposal. The spec for media elements says that the user agent should show controls if the attribute is present; I imagine this is one way the specs would slightly differ.

[tabatkins]

The other types of controls could certainly show, tho - I really like the idea of showing an ALT badge in the corner (for images large enough that it's not disruptive, and with heuristically-determined "adequate" alt text, not just an empty string or a filename, etc). Those could show all the time (and potentially be controllable via browser settings).