{"id":1801,"date":"2021-03-18T15:56:21","date_gmt":"2021-03-18T19:56:21","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=1801"},"modified":"2024-12-16T11:31:11","modified_gmt":"2024-12-16T16:31:11","slug":"alt-text","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/alt-text\/","title":{"rendered":"Alt Text"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction: What is Alt Text?<\/h2>\n\n\n\n<p>Alternative text (alt text) provides a written description of content for visually impaired users who may use a screen reader.<\/p>\n\n\n\n<p>Adding alt text for images is a foundational principle of web accessibility. It can be challenging to implement alt text correctly and in a way that most benefits end users. The web is fraught with images that have missing, incorrect, or poor alt text. <\/p>\n\n\n\n<p>Like many things in web accessibility, determining appropriate, equivalent, alt text can often be a matter of personal interpretation. It is our hope that we can provide guidelines for when alt text is needed, and also how you can easily implement it in WordPress.<\/p>\n\n\n\n<p><strong>Note:<\/strong> though alt text is most commonly used with images, there are other non-text web media and interactive features where the same principles covered here could be applied. This said, within the context of our web ecosystem, content maintainers will almost always only be concerned with providing alt text for files uploaded to the WordPress media library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alternative Text Serves Several Functions<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Screen reading software reads alt text in place of images allowing the content and function of the image to be accessible to users who are non-visual or suffer from certain cognitive disabilities.<\/li>\n\n\n\n<li>Alt text also appears if a web browser is not displaying an image. Examples of this are when a user has an unstable internet connection or a user has opted to not view images.<\/li>\n\n\n\n<li>It provides a semantic meaning and description to images which can be read by search engines. This in turn can improve a site&#8217;s <a href=\"https:\/\/en.wikipedia.org\/wiki\/Search_engine_optimization\">SEO<\/a>. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Key Principle<\/h2>\n\n\n\n<p>The basic premise of using alt text is to ensure that all users can read the same information and have the same interactions with a web page, regardless of whether or not they can see the images. Many non-visual users utilize screen reading software, where the description of an image is read to the user in place of the image. Computers and screen readers cannot analyze an image and determine what the image is on their own. <\/p>\n\n\n\n<p>As content maintainers we must provide alt text which then gives the <strong>content<\/strong> and <strong>function<\/strong> of the image to a user. These users can then enjoy the same web experience. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Guiding Principles<\/h3>\n\n\n<aside class=\"wp-block-ncst-fact ncst-fact has-blue-400-text-color wp-block-ncst-fact\">\n  <div class=\"floated-fact-aside-contents\">\n    <div class=\"wp-block-ncst-fact ncst-fact has-blue-400-text-color wp-block-ncst-fact\">\n      <span class=\"ncst-icon\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M10.0515 15.6094L10.0895 15.5902C9.33949 14.9372 8.8609 13.9003 8.8609 12.7388C8.8609 11.4732 9.43699 10.358 10.2915 9.71487L9.4848 9.35956C9.08307 9.60562 8.63087 9.75759 8.16207 9.80411C7.69327 9.85062 7.22003 9.79047 6.77777 9.62815C6.83538 9.89937 6.86429 10.1759 6.86402 10.4532C6.86402 11.6339 6.37465 12.6802 5.61621 13.3332L5.62559 13.3425L7.81465 14.3025L8.20793 14.4755V16.4625L10.0515 15.6094Z\" fill=\"currentColor\"\/>\n<path d=\"M7.87221 8.82237C9.23533 8.82237 10.3392 7.49768 10.3392 5.87534C10.3392 4.253 9.22549 2.93768 7.87221 2.93768C6.51893 2.93768 5.41455 4.24315 5.41455 5.87534C5.41455 7.50753 6.50861 8.82237 7.87221 8.82237Z\" fill=\"currentColor\"\/>\n<path d=\"M18.3069 13.2961C17.5569 12.6431 17.0783 11.6086 17.0783 10.4447C17.078 10.164 17.1069 9.88408 17.1646 9.60939C16.822 9.74375 16.4572 9.81229 16.0893 9.81142C15.5077 9.81185 14.9383 9.64525 14.4487 9.33142L13.6616 9.69611C14.5255 10.3392 15.1016 11.4624 15.1016 12.7294C15.1016 13.9106 14.6122 14.9569 13.8538 15.6094L13.8632 15.6192L15.7851 16.463V14.4769L16.1497 14.3039L18.2713 13.3153L18.3069 13.2961Z\" fill=\"currentColor\"\/>\n<path d=\"M16.0893 8.82237C17.4529 8.82237 18.5568 7.49768 18.5568 5.87534C18.5568 4.253 17.443 2.93768 16.0893 2.93768C14.7355 2.93768 13.6321 4.24315 13.6321 5.87534C13.6321 7.50753 14.7261 8.82237 16.0893 8.82237Z\" fill=\"currentColor\"\/>\n<path d=\"M21.8207 13.9294C21.4311 14.1654 20.9959 14.3161 20.5438 14.3714C20.4383 14.3808 20.323 14.3906 20.2157 14.3906H20.2059C20.1004 14.3906 19.9949 14.3808 19.8894 14.3714C19.4156 14.32 18.9595 14.1625 18.5549 13.9106L16.4333 14.8894V18.7777H23.9999V14.8894L21.8207 13.9294Z\" fill=\"currentColor\"\/>\n<path d=\"M18.0094 9.14861C17.9612 9.24715 17.9228 9.35013 17.8945 9.45611C17.7904 9.78183 17.7385 10.122 17.7408 10.4639C17.7408 11.9639 18.6816 13.2 19.8914 13.3824C19.9969 13.3922 20.1024 13.4016 20.2078 13.4016H20.2177C20.3277 13.4017 20.4375 13.3921 20.5458 13.373C21.7458 13.1714 22.6674 11.9424 22.6674 10.4546C22.6674 8.82236 21.5635 7.50705 20.2097 7.52627C19.3556 7.52627 18.5874 8.05455 18.1556 8.8608C18.0955 8.95051 18.0464 9.04715 18.0094 9.14861Z\" fill=\"currentColor\"\/>\n<path d=\"M12.3362 16.6561C12.2307 16.6655 12.1154 16.6753 12.008 16.6753H11.9893C11.8833 16.6753 11.768 16.6655 11.6724 16.6561C11.1976 16.6093 10.7404 16.4514 10.3379 16.1953L8.21631 17.1745V21.0623H15.7824V17.1745L13.613 16.2145C13.2234 16.4503 12.7882 16.6008 12.3362 16.6561Z\" fill=\"currentColor\"\/>\n<path d=\"M11.6719 15.6478C11.7774 15.6576 11.8829 15.667 11.9888 15.667H11.9982C12.1082 15.6672 12.218 15.6576 12.3263 15.6384C13.5263 15.4369 14.4479 14.2078 14.4479 12.72C14.4479 11.5106 13.824 10.4737 12.9507 10.0223C12.6846 9.88784 12.3938 9.80949 12.0962 9.79218H11.9138C11.7554 9.79511 11.598 9.81763 11.4451 9.85921C11.298 9.89509 11.1562 9.94992 11.0232 10.0223C10.1401 10.4737 9.52319 11.52 9.52319 12.7294C9.52319 14.227 10.4532 15.4655 11.6719 15.6478Z\" fill=\"currentColor\"\/>\n<path d=\"M4.10859 14.3714C4.00313 14.3808 3.88781 14.3906 3.78047 14.3906H3.77109C3.66516 14.3906 3.55031 14.3808 3.45422 14.3714C2.97943 14.3244 2.52232 14.1666 2.11969 13.9106L0 14.8894V18.7777H7.56469V14.8894L5.38547 13.9294C4.99594 14.1655 4.56071 14.3161 4.10859 14.3714Z\" fill=\"currentColor\"\/>\n<path d=\"M3.45613 13.3823C3.56159 13.3922 3.66706 13.4016 3.773 13.4016H3.78238C3.89238 13.4017 4.00218 13.3921 4.1105 13.373C5.3105 13.1714 6.23253 11.9423 6.23253 10.4545C6.23381 10.1087 6.17855 9.76491 6.06894 9.43687C6.04072 9.33089 6.00226 9.2279 5.95409 9.12937C5.91503 9.02779 5.87011 8.92856 5.81956 8.83218C5.378 8.04468 4.62894 7.52625 3.77488 7.52625C2.41128 7.52625 1.30738 8.84156 1.30738 10.4639C1.3055 11.9616 2.23691 13.2 3.45613 13.3823Z\" fill=\"currentColor\"\/>\n<\/svg>\n\n    <\/span>\n              <h2 class=\"fact__heading\"><strong>&#8220;The basic premise of using alt text is to ensure that all users can read the same information and have the same interactions with a web page, regardless of whether or not they can see the images.&#8221;<\/strong><\/h2>\n            <\/div>\n  <\/div>\n<\/aside>\n\n\n\n<p>The greatest challenge with alt text is knowing when to include it and what to write. A common misconception is that an image&#8217;s alt text should simply be a description of the image. This can oftentimes be misleading as the description may not fully describe the purpose of the image.  <\/p>\n\n\n\n<p>The best place to start when writing alt text is considering the <strong>function <\/strong>that the image plays within a page. The next question to ask is what is being <strong>conveyed <\/strong>visually to users with the image. Once these two thoughts have been considered, make them the basis of what alt text is chosen.<\/p>\n\n\n\n<p>Another reason we want to consider these things, is that not all images will necessarily require alt text. In the instance of images that are strictly decorative, or rather they do not contribute to the overall messaging of a webpage, alt text is not required. <\/p>\n\n\n\n<p>If there is still confusion on what specific alt text should be provided, <a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">WebAim&#8217;s article on alternative text<\/a> may be helpful in providing various examples of good and bad alt text usage in different scenarios (e.g. functional images, decorative images, logos, etc). <\/p>\n\n\n\n<p><strong>Note: <\/strong>to make this decision making process easier, the Web Accessibility Initiative has designed a <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">useful alt text decision tree<\/a> for occasions when content maintainers may not be sure whether or not an image actually needs alt text. If there is still uncertainty as to whether or not alt text should be used with an image, it should be included. When in doubt, include alt text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Alt Text to an Image in WordPress<\/h2>\n\n\n\n<p>Alt text is added to an image through the <a href=\"https:\/\/wordpress.org\/support\/article\/media-library-screen\/\">Media Library<\/a>. Once an image has been uploaded to the Media Library, content maintainers can then click on the image and enter the relevant alt text in the Alternative Text field. This change will then update automatically.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421.jpg\" data-fullsize=\"1648x926\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421-1024x575.jpg\" alt=\"example of alt text field in the wordpress media library\" class=\"wp-image-1819\" srcset=\"https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421-1024x575.jpg 1024w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421-300x169.jpg 300w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421-768x432.jpg 768w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421-1536x863.jpg 1536w, https:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2021\/03\/bell-tower-alt-text-example-e1616095791421.jpg 1648w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Gutenberg is nuanced in how it handles alt text. If alt text was added to an image in the Media Library, it will be included with the image when it is added to a page or post. If an image is uploaded directly to a page or post, and then alt text is retroactively added to an image in the Media Library, it will not be added to where the image already lives on a page or post. <a href=\"https:\/\/core.trac.wordpress.org\/ticket\/47456\">WordPress core is aware of this current issue<\/a>, but the current best practice is to upload images directly to the media library and provide alt text before adding them to a page or post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need Help?<\/h2>\n\n\n\n<p>Still unsure about about alt text? Feel free to reach out with any questions or concerns at&nbsp;<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>. Additionally, see more IT accessibility resources at <a href=\"https:\/\/accessibility.oit.ncsu.edu\/\">accessibility.oit.ncsu.edu<\/a>, or email questions to <a href=\"accessibility@ncsu.edu\">accessibility@ncsu.edu<\/a>. <\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Increasing accessibility by providing a text-based to non-text content in web pages.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[72,71,50,49,73],"content-type":[100],"class_list":["post-1801","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-premium-add-on","availability-nc-state-pro-add-on","availability-nc-state-stories","availability-nc-state-theme","availability-nc-state-theme-v3","content-type-accessibility"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/1801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":10,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/1801\/revisions"}],"predecessor-version":[{"id":38261,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/1801\/revisions\/38261"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=1801"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=1801"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=1801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}