A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

[Draft Idea/Spec/Proposal] Clickable Images

raphaellouis
2022-05-19

Hi Community!

Currently, when we want to make clickable images, we do this:

before.html

<!DOCTYPE html>
<html>
<body>

<span>Open image link in a new tab: 
 <a href="http://www.google.com" target="_blank">
  <img src="images.jpg" />
 </a>
</span>
</body>
</html>

Notes

  1. The image is inside the anchor tag

after.html

<!DOCTYPE html>
<html>
<body>
<span>Open image link in a new tab: 
  <img src="images.jpg" href="http://www.google.com" target="_blank" />
</span>
</body>
</html>

Reasons

  1. In my view not having an href and target attribute within images is something semantically wrong - because it’s something you should have and you don’t.
  2. It’s necessary to create a kind of workaround in the html or use a library for javascript… because the html specification itself does not have this feature.
  3. Most of the mechanisms I use don’t allow <a> inside <img/> </a> - this is blocked! - So… an alternative to solve this would be if the img tag had the target and href attribute
  4. This allows the html in my view to be more hypertext

Notes

  1. These views are observations and not criticisms.

Reference

simevidas
2022-06-06

What mechanisms? <img> inside <a> is perfectly normal. Why would any system not allow it?

raphaellouis
2022-06-07

Hi! Sites like github don’t allow this within markdown.

sample.md

 <a href="http://www.google.com" target="_blank">
  <img src="images.jpg" />
 </a>

Notes

I found it interesting to open these issues here and on Github. I don’t know if it’s a Github-only issue or if the HTML should be something like this.

simevidas
2022-06-07

Image links seem to work fine on GitHub GitHub - simevidas/image-link-test

raphaellouis
2022-06-08

works!

brennanyoung
2022-10-20

Your reasons

  1. It’s not semantically wrong because an image is just an image. It’s an ‘empty tag’ replaced by the image data at src. That’s the semantic.
  2. The html specification itself does not have the implementation you ask for, because the exact same behavior is already available through well-established means.
  3. Which mechanisms are you using that prevent this? If they don’t support <img> inside <a> they’re not fit for purpose. Switch to better tools!
  4. I disagree. Even if images could act as links without wrapping them in <a> tags, it wouldn’t be more hypertext. It would just be an alternative way of expressing the same thing.

Note: With ARIA’s role="img" you can make anything into an image (semantically speaking), even a hyperlink.

<a href="whatever.com" role="img">FOO</a> is rendered on your device as FOO

…but then it will probably not function exactly like a hyperlink any more, especially across devices, and with all the different kinds of assistive tech. For example, on chrome, where I am writing this, the link is not keyboard focusable like hyperlinks usually are (and should be). I can think of at least two WCAG success criteria that this would violate. Not recommended.

Similarly, you can add role="link" to an image like this:

<img src="whatever.jpg" role="link" tabindex="0" />

But then you’ll have to handle the hyperlink behavior with javascript, not to mention remembering to add affordances like tabindex, hover/pointer CSS, “visited” color, underlining and all that. This is not an improvement.

brennanyoung
2022-10-20

sounds like a markdown limitation. markdown was never intended to map the whole of HTML, despite various brave subsequent efforts.

This might be useful:

Github is mentioned directly in one of the comments. Apparently github will do the right thing with

[![Foo](http://www.google.com.au/images/nav_logo7.png)](http://google.com.au/)