{"id":106058,"date":"2024-04-19T11:52:35","date_gmt":"2024-04-19T15:52:35","guid":{"rendered":"https:\/\/digital.va.gov\/wpnavigator\/?p=106058"},"modified":"2024-04-19T14:31:12","modified_gmt":"2024-04-19T18:31:12","slug":"using-a-new-interactivity-feature","status":"publish","type":"post","link":"https:\/\/digital.va.gov\/wpnavigator\/using-a-new-interactivity-feature\/","title":{"rendered":"Using a New Interactivity Feature"},"content":{"rendered":"\n<p>Since we are using Bricks Builder as our primary tool, some features of the core editor may not be available, but at least one of the new interactivity features is <strong>Expand on click <\/strong>for images. While linking to images is generally frowned upon, occasionally, there may be a need to allow sighted users to have a better view of an image or graphic intended to convey information. When you add an image to your article, click the image, and then in the link options, choose <strong>Expand on click<\/strong>. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"868\" height=\"526\" src=\"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/image.png\" alt=\"\" class=\"wp-image-106059\" srcset=\"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/image.png 868w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/image.png?resize=300,182 300w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/image.png?resize=600,364 600w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/image.png?resize=768,465 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><figcaption class=\"wp-element-caption\">Image link option: 1 &#8211; Click the link, 2 &#8211; Choose Expand on click<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">An example of this feature<\/h2>\n\n\n\n<p>The image below featuring a top-down view of a desktop has this feature enabled, and through a more detailed textual explanation for all users could be used to enhance the experience for sighted users. This does assume you have a full textual equivalent of what you want to convey either in the body of the article, a caption, or the alt text. Adding this capability just for the ooh-aah effect should be avoided. This should also not be used as a replacement for the native zoom feature in the browser.<\/p>\n\n\n\n<div class=\"wp-block-group content--feature margin-block--m\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aabf6a2443df&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aabf6a2443df\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?w=1600\" alt=\"cup of coffee near a laptop with a notebook and magnifying glass arranged neatly.\" class=\"wp-image-106017\" srcset=\"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg 1600w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?resize=300,200 300w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?resize=600,400 600w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?resize=768,512 768w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?resize=1536,1024 1536w, https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/03\/dj7bwa-gwks.jpg?resize=1200,800 1200w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Can I link the image the old way?<\/h2>\n\n\n\n<p>No. If you are wondering why linking to the image the &#8220;old way&#8221; is a bad idea, it is because it removes the image from the context of the article and does not include alt text, making it an accessibility error. The <strong>Expand on click<\/strong> option never leaves the page and retains the alt text.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A new feature in WP 6.5 can be used to enhance the experience for sighted users.<\/p>\n","protected":false},"author":1,"featured_media":106060,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[36],"tags":[],"class_list":["post-106058","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-core"],"acf":[],"parsely":{"version":"1.1.0","canonical_url":"https:\/\/wp-navigator.digital.va.gov\/wpnavigator\/using-a-new-interactivity-feature\/","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"NewsArticle","headline":"Using a New Interactivity Feature","url":"https:\/\/digital.va.gov\/wpnavigator\/using-a-new-interactivity-feature\/","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/digital.va.gov\/wpnavigator\/using-a-new-interactivity-feature\/"},"thumbnailUrl":"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/d9ilr-dbedg.jpg?w=300","image":{"@type":"ImageObject","url":"https:\/\/digital.va.gov\/wpnavigator\/wp-content\/uploads\/sites\/21\/2024\/04\/d9ilr-dbedg.jpg"},"articleSection":"WordPress Core","author":[{"@type":"Person","name":"OIT Office of Communication"}],"creator":["OIT Office of Communication"],"publisher":{"@type":"Organization","name":"WP Navigator","logo":"https:\/\/digital.va.gov\/wp-navigator\/wp-content\/uploads\/sites\/21\/2023\/12\/favicon-96x96-1.png"},"keywords":[],"dateCreated":"2024-04-19T15:52:35Z","datePublished":"2024-04-19T15:52:35Z","dateModified":"2024-04-19T18:31:12Z"},"rendered":"<script type=\"application\/ld+json\" class=\"wp-parsely-metadata\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@type\":\"NewsArticle\",\"headline\":\"Using a New Interactivity Feature\",\"url\":\"https:\\\/\\\/digital.va.gov\\\/wpnavigator\\\/using-a-new-interactivity-feature\\\/\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/digital.va.gov\\\/wpnavigator\\\/using-a-new-interactivity-feature\\\/\"},\"thumbnailUrl\":\"https:\\\/\\\/digital.va.gov\\\/wpnavigator\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2024\\\/04\\\/d9ilr-dbedg.jpg?w=300\",\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/digital.va.gov\\\/wpnavigator\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2024\\\/04\\\/d9ilr-dbedg.jpg\"},\"articleSection\":\"WordPress Core\",\"author\":[{\"@type\":\"Person\",\"name\":\"OIT Office of Communication\"}],\"creator\":[\"OIT Office of Communication\"],\"publisher\":{\"@type\":\"Organization\",\"name\":\"WP Navigator\",\"logo\":\"https:\\\/\\\/digital.va.gov\\\/wp-navigator\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2023\\\/12\\\/favicon-96x96-1.png\"},\"keywords\":[],\"dateCreated\":\"2024-04-19T15:52:35Z\",\"datePublished\":\"2024-04-19T15:52:35Z\",\"dateModified\":\"2024-04-19T18:31:12Z\"}<\/script>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/wp-navigator.digital.va.gov\/p.js"},"meta_box":{"guest_author":"","subheading":"","team-to-post_to":["652"]},"_links":{"self":[{"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/posts\/106058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/comments?post=106058"}],"version-history":[{"count":0,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/posts\/106058\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/media\/106060"}],"wp:attachment":[{"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/media?parent=106058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/categories?post=106058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digital.va.gov\/wpnavigator\/wp-json\/wp\/v2\/tags?post=106058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}