{"id":282052,"date":"2019-02-01T08:32:24","date_gmt":"2019-02-01T15:32:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=282052"},"modified":"2019-02-01T08:32:24","modified_gmt":"2019-02-01T15:32:24","slug":"how-do-you-figure","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-do-you-figure\/","title":{"rendered":"How do you figure?"},"content":{"rendered":"

Scott O’Hara digs into the <figure><\/code> and <figcaption><\/code> elements. Gotta love a good ol’ HTML deep dive. <\/p>\n

I use these on just about every blog post here on CSS-Tricks, and as I’ve suspected, I’ve basically been doing it wrong forever. My original thinking was that a figcaption<\/code> was just as good as the alt<\/code> attribute. I generally use it to describe the image.<\/p>\n

<\/p>\n

<figure>\r\n  <img src=\"starry-night.jpg\" alt=\"\">\r\n  <figcaption>The Starry Night, a famous painting by Vincent van Gogh<\/figcaption>\r\n<\/figure><\/code><\/pre>\n
I intentionally left off the alt text, because the figcaption<\/code> is saying what I would want to say in the alt<\/code> text and I thought duplicating it would be annoying (to a screen reader user) and unnecessary. Scott says that’s bad as the empty alt text makes the image entirely undiscoverable by some screen readers and the figure is describing nothing as a result.<\/p>\n
The correct answer, I think, is to do more work:<\/p>\n
<figure>\r\n  <img src=\"starry-night.jpg\" alt=\"An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky.\">\r\n  <figcaption>The Starry Night, a famous painting by Vincent van Gogh<\/figcaption>\r\n<\/figure><\/code><\/pre>\n
It’s a good goal, and I should do better about this. It’s just laziness that gets in the way, and laziness that makes me wish there was a pattern that allowed me to write a description once that worked for both. Maybe something like Nino Ross Rodriguez just shared today where artificial intelligence<\/a> can take some of the lift. But that’s kinda not the point here. The point is that you can’t write it once because <figcaption><\/code> and alt<\/code> do different things.<\/p>\n","protected":false},"excerpt":{"rendered":"
Scott O’Hara digs into the <figure><\/figure> and <figcaption><\/figcaption> elements. Gotta love a good ol’ HTML deep dive. I use these on just about every blog post here on CSS-Tricks, and as I’ve suspected, I’ve basically been doing it wrong forever. My original thinking was that a figcaption was just as good as the alt attribute. […]<\/p>\n","protected":false},"author":3,"featured_media":277101,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How do you 
?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[466,1386,1582,1581,585],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/lazy-load-image.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282052"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=282052"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282052\/revisions"}],"predecessor-version":[{"id":282144,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282052\/revisions\/282144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/277101"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=282052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=282052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=282052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}