1

Let's say you have a picture element similar to this:

<picture class='my-image'>
   <source media="(min-width: 1024px)" srcset="large.jpg">
   <source media="(min-width: 768px)" srcset="med.jpg">
   <source srcset="small.jpg">
   <img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

But let's say that the context of the image is different for each breakpoint. Perhaps at large size, the picture is of a man standing in front of a tree. But at mobile size, it's just a picture of a tree.

Sometimes, certain pictures work well at mobile sizes and other pictures don't depending on page layouts, etc.

Anyways, with the picture element you can only specify the alt= attribute in a single place for the entire picture element. But if the image context changes between each breakpoint, is it possible somehow to specify different alt= attributes? Do you have to use JavaScript for this (which may or may not be screen reader friendly)?

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370

2 Answers2

1

Perhaps at large size, the picture is of a man standing in front of a tree. But at mobile size, it's just a picture of a tree.

It looks to me that this kind of situation appears only when using a strictly "decorative image".

If those images are stictly decorative and you can't put them for certain reasons in CSS, then the alternative text has to be empty.

If they are not decorative images, then the easiest solution is to use two different picture tags which does not require any Javascript.

Adam
  • 17,838
  • 32
  • 54
  • Let me give another example. Maybe there is an article about Barack Obama. There is a picture of him speaking on a stage. On desktop layouts, the picture is of him standing standing on stage. The alt text would be "Barack Obama talking while on stage" or something. But on mobile, maybe it's better to just have a zoomed in picture of barack talking. You can't tell he's on a stage since it's zoomed in. Each different picture is relevant to the context but would have slightly different descriptions for alt tags. – Jake Wilson Feb 01 '17 at 22:54
  • 1
    @JakeWilson The difference in this example is to give a better visual rendering to the page, not adding extra information to the content. That difference is purely decorative. The `alt` text is not intended to give the full description of the image but a replacement text (https://www.w3.org/TR/html51/semantics-embedded-content.html#general-guidelines). I.e. Without the image being visible, what information is missing for you to understand the content? – Adam Feb 02 '17 at 08:57
0

Substitute srcset for src at <source> element, use onerror event of <img> element and window.matchMedia() to set alt attribute.

  <script>
    function handleError() {
      var sources = document.querySelectorAll("picture source");
      var img = document.querySelector("picture img");
      for (var i = 0; i < sources.length; i++) {
        if (window.matchMedia(sources[i].media).matches) {
          img.setAttribute("alt", sources[i].dataset.alt);
          break;
        }
      }
    }
  </script>
  <picture class='my-image'>
    <source media="(min-width: 1024px)" srcset="large.jpg" data-alt="large">
    <source media="(min-width: 768px)" srcset="med.jpg" data-alt="small">
    <source srcset="small.jpg" data-alt="small">
    <img src="small.jpg" alt="" onerror="handleError()">
    <p>Accessible text</p>
  </picture>

plnkr http://plnkr.co/edit/GwwHWujq1Nt8V33zmJLS?p=preview

guest271314
  • 1
  • 15
  • 104
  • 177