Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
pjs41
New Member

Captions for Figures

Jump to solution

Is there a feature for adding a caption to an image or figure, e.g., Figure 1.3. Distribution of Mr. Pibb machines in Pennsylvania?

1 Solution

Accepted Solutions
kmeeusen
Community Coach
Community Coach

Hi Pierce:

There are two easy ways to do this in Canvas.

  • You can switch to the HTML Editor and expand the Alt text for an image, or
  • Upload your image into a two-row, single column table. Place image in top cell, and caption info in bottom cell. This is my preferred method.

I hope this helps.

View solution in original post

8 Replies
kmeeusen
Community Coach
Community Coach

Hi Pierce:

There are two easy ways to do this in Canvas.

  • You can switch to the HTML Editor and expand the Alt text for an image, or
  • Upload your image into a two-row, single column table. Place image in top cell, and caption info in bottom cell. This is my preferred method.

I hope this helps.

Stef_retired
Community Team
Community Team

pjs41, I'd like to direct you to a few somewhat related resources here in the Community that will help you manipulate images: Creating an inviting course home page​ and Table and Videos​ (the latter conversation embeds videos, not photos, in the table's cells, but the process is the same, and frankly, working with images is far easier than working with videos in a table). You might also enjoy  @clong ​'s cool resource on Home Sweet Homepages without Tables​ and  @G_Petruzella ​'s Columns Without Tables: code-snippet​. If you're not able to view these resources, many of which reside in the Instructional Designers​ space, joining that group is just a few clicks away.

ddumonde
New Member

Sorry to bump an old thread, but I came here looking for a similar answer. Unfortunately both of the answers listed here are not best practices for accessibility, so I want to be sure that's noted.

Alt text is limited to about 100 characters, less than a Tweet, and unlikely to fully describe a complex image. The Poet Training Tool is a great resource for learning how to properly describe complex images.

Using a table for the purpose of layout is generally discouraged for accessibility reasons. Tables primarily should be used for tabular information, generally rows and columns of text and numbers, and only when following accessibility standards such as including a caption and identifying row and column headers. Tables generally should not be used for layout or positioning, as in placing an image and a caption together, without taking into consideration how screen readers interact with tables, such as reading order. See Webaim's article Creating Accessible Tables offers a good explanation.

Right now I'm opting for a paragraph of text immediately above or below the image, where the paragraph begins with something like "Caption: ..."

Thanks for the Benetech link, David, I will add it to my accessibility resources. 

taliaday
New Member
Add this bit of html when you add the image. 
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

I like this except that when floating images, the CSS code does not work 🤔 This is what I tried. It probably would have been too much anyways. I wonder if using Image Credits at the bottom of the page may be acceptable. I am going to check out the Instructional Designers area for more. 

<figure style="float: right;"><img style="float: right;" src="https://maricopa.instructure.com/courses/1165791/files/73653533/preview" alt="The icon representatives of a database, a 3D cylinder, and a spreadsheet, a rectangle with a heading area and then cells for data underneath." />
<figcaption>Icons representing Databases, the 3D Cylinder, and Spreadsheets, the rectangle with a heading area and cells underneath. From DifferenceBetween.net, <a href="http://www.differencebetween.net/technology/difference-between-spreadsheet-and-database/&quot;" target="_blank" rel="noopener">"Difference Between Spreadsheet and Database." </a></figcaption>
</figure>

rebeccaee
New Member

Hi,

I know this is an old post.  But I found a more elegant solution using the figure tag.  I explained it in a blog post: https://rebeccaee.com/blog/canvas-tips.

Let me know if you have questions.

Thanks Rebecca, this is how images aught to be handled in 2022.  It would be a useful feature if the mce editor added in figure and figcaption tags automagically in Canvas and if it supported Markdown.