Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

picturecaption

Prolyfill to allow different figcaptions and alt text to be defined for different <source> tags within <picture>

Problem

There is currently no way of defining different captions and alt text for the different images defined for the <picture> element, should the need arise.

Solution

This prolyfill suggests a method of solving this by allowing multiple <figcaption> tags, by using the aria-labelledby attribute on the <source> and <img> tags elements to identify the related <figcaption>. Additionally, a data-alt attribute on the <source> tag allows different alt text per source image.

For example:

<figure>
   <picture>
      <source srcset="images/city-medium.jpg" media="(min-width: 800px)"
              data-alt="A view of the French town of Saumur, with its medieval castle looking down upon the town with church spire in the right foreground"
              aria-labelledby="town-caption">
      <img src="images/castle.jpg" alt="The medieval castle in Saumur, France" aria-labelledby="default-caption">
   </picture>
   <figcaption id="town-caption">The town of Saumur in France</figcaption>
   <figcaption id="default-caption">The medieval castle in Saumur, France</figcaption>
</figure>

Usage

Simple include the picturecaption.min.js (or picturecaption.js) file at the end of your HTML file, before the closing </body> tag.

Known Issues

It's not very stable at the moment as this is the first 'quick and dirty' implementaion of this idea to show how it might work.

  1. It's not been wildely tested yet
  2. Only works when run on a webserver

About

Polyfill to allow different figcaptions for different <source>s within <picture>

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.