{"id":739,"date":"2026-05-11T20:40:27","date_gmt":"2026-05-11T20:40:27","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?p=739"},"modified":"2026-10-02T18:43:13","modified_gmt":"2026-10-02T18:43:13","slug":"image-block","status":"publish","type":"post","link":"https:\/\/www.mtsu.edu\/web-training\/2026\/05\/11\/image-block\/","title":{"rendered":"Image Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Image block is used to insert a single image into your page. You can upload an image, choose one from your media library, and adjust its alignment and size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can find demos and usage guidance for this block on the official <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Accessibility Best Practice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Always include descriptive alt text so screen reader users understand what the image conveys. Best practice is to add the text to the Alternative Text box when uploading your image to the media library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alternative Text Best Practice<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Write clear, descriptive alt text that explains the purpose and content of the image. Good alt text should briefly describe what a user needs to understand if they cannot see the image.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid phrases like \u201cimage of\u201d or \u201cpicture of,\u201d since screen readers already announce it as an image.<\/li>\n\n\n\n<li>Focus on the <strong>meaning or purpose<\/strong> of the image, not every visual detail.<\/li>\n\n\n\n<li>Be <strong>concise but specific<\/strong>\u2014usually one short sentence is enough.<\/li>\n\n\n\n<li>If the image contains <strong>important text<\/strong>, include that text in the alt description.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-1024x517.png\" alt=\"Screenshot of alternative text placement when adding an image to the media gallery.\" class=\"has-border-color has-lightgray-border-color wp-image-741\" style=\"border-width:1px\" srcset=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-1024x517.png 1024w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-300x151.png 300w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-768x388.png 768w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-1536x776.png 1536w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/alt-text-scaled-e1778532508443-2048x1034.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-mtsublue-color has-alpha-channel-opacity has-mtsublue-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Keep in Mind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">MTSU has recently implemented a plugin to check that all images have alt text.&nbsp;<a href=\"https:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alt text<\/a>&nbsp;is an essential piece of keeping our website accessible to all.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re seeing the following at the top of your WordPress editing screen, you&#8217;re missing alt text on one or more of your images.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"124\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image.png\" alt=\"Checklists Notice Screenshot\" class=\"wp-image-744\" srcset=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image.png 390w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-300x95.png 300w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To resolve the issue, add your alt text on the image within the page itself.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the page name to edit your page<\/li>\n\n\n\n<li>Open up your WordPress settings panel by clicking the icon that looks like the following:<br><img loading=\"lazy\" decoding=\"async\" width=\"44\" height=\"48\" class=\"wp-image-745\" style=\"width: 44px\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-1.png\" alt=\"Wordpress Settings Icon\"><\/li>\n\n\n\n<li>Click the image<\/li>\n\n\n\n<li>Fill out the Alternative Text box<br><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"272\" class=\"wp-image-746\" style=\"width: 400px\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-2.png\" alt=\"Screenshot of alternative text box on image block styles bar.\" srcset=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-2.png 528w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/05\/Pasted-image-2-300x155.png 300w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>The Image block is used to insert a single image into your page. You can upload an image, choose one from your media library, and adjust its alignment and size.<\/p>\n","protected":false},"author":4,"featured_media":803,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[7,15,14,26,8],"class_list":["post-739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blocks","tag-accessibility","tag-alternative-text","tag-image","tag-media-block","tag-wordpress-blocks"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=739"}],"version-history":[{"count":1,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"predecessor-version":[{"id":2148,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/posts\/739\/revisions\/2148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media\/803"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}