{"id":606,"date":"2026-09-18T22:55:04","date_gmt":"2026-09-18T22:55:04","guid":{"rendered":"https:\/\/in.nau.edu\/accessibility\/?page_id=606"},"modified":"2026-10-02T13:47:43","modified_gmt":"2026-10-02T13:47:43","slug":"images","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/accessibility\/images\/","title":{"rendered":"Images"},"content":{"rendered":"<h1>Images<\/h1>\n<p><span data-contrast=\"none\">Images can explain ideas, support learning, show relationships, communicate emotion, and make digital content easier to understand. When an image is not accessible, some people may miss information that other users receive visually.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:140,&quot;335559740&quot;:269}\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">Alternative text, often called alt text, gives people a text-based way to understand the image. Screen readers can announce this text, browsers can display it when an image does not load, and other technologies can use it as an alternative to the visual content.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:140,&quot;335559740&quot;:269}\">\u00a0<\/span><\/p>\n<h2><span style=\"color: #000080\">Accessibility is part of the definition of done<\/span><\/h2>\n<p>Write and review alt text while creating the page. Content authors understand why an image was chosen and are usually best positioned to describe its purpose. A remediator may describe what is visible, but may not know the author\u2019s intent.<\/p>\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"What is alternative text?_0\" id=\"shortcode-accordion-1-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-1-panel\">\n            What is alternative text?\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-1-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-1-trigger\" inert>\n        <html><body>\n<p>Alternative text is a written substitute for an image. It communicates the image\u2019s essential content, meaning, or function to someone who cannot see it.<\/p>\n<p>Alt text is not a transcript of every visible detail. It is a purposeful description shaped by the image, the surrounding content, and the user\u2019s task.<\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Why alt text matters_0\" id=\"shortcode-accordion-2-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-2-panel\">\n            Why alt text matters\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-2-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-2-trigger\" inert>\n        <html><body>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559685\":360,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"singleLevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"none\">It gives people who are blind or have low vision access to information presented visually.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559685\":360,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"singleLevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"none\">It helps people who use screen readers understand an image\u2019s meaning or function.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559685\":360,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"singleLevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"none\">It preserves important information when images are blocked or fail to load.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559685\":360,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"singleLevel\"}' data-aria-posinset=\"4\" data-aria-level=\"1\"><span data-contrast=\"none\">It supports an equivalent and more inclusive experience.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559685\":360,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"singleLevel\"}' data-aria-posinset=\"5\" data-aria-level=\"1\"><span data-contrast=\"none\">It helps content meet WCAG 2.2 requirements for non-text content.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/li>\n<\/ul>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<h2><span style=\"color: #000080\">Ask this question<\/span><\/h2>\n<p>If someone could not see this image, what would they need to know to understand why it is here?<\/p>\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"The most important rule: Context matters_0\" id=\"shortcode-accordion-3-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-3-panel\">\n            The most important rule: Context matters\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-3-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-3-trigger\" inert>\n        <html><body>\n<p>The same image can need different alt text in different situations. Before writing, identify the purpose of the image on the page. Describe the details that support that purpose and leave out details that do not.<\/p>\n<h5><b><span data-contrast=\"none\">One image, three contexts<\/span><\/b><span data-ccp-props='{\"134245418\":true,\"134245529\":true,\"201341983\":0,\"335559738\":280,\"335559739\":120,\"335559740\":269}'>\u00a0<\/span><\/h5>\n<p><span data-contrast=\"none\">Imagine a photograph of Northern Arizona University\u2019s Old Main and Ashurst Auditorium.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/p>\n<p><strong>Campus landmarks: <\/strong>\u201c<span class=\"TextRun SCXW95568850 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW95568850 BCX2\" data-ccp-parastyle=\"Example\">Northern Arizona University\u2019s Old Main and Ashurst Auditorium stand in Flagstaff, Arizona.\u201d<\/span><\/span><\/p>\n<p><strong><span class=\"TextRun SCXW27481441 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW27481441 BCX2\" data-ccp-parastyle=\"Example\" data-ccp-parastyle-defn='{\"ObjectId\":\"b2669cdf-ada6-5dca-b5b9-14e7d50ff8ba|1\",\"ClassId\":1073872969,\"Properties\":[469775450,\"Example\",201340122,\"2\",134233614,\"true\",469778129,\"Example\",335572020,\"1\",134224900,\"false\",469777841,\"Arial\",469777844,\"Arial\",469769226,\"Arial\",335551500,\"2301723\",268442635,\"20\",335559739,\"100\",201342446,\"1\",201342447,\"5\",201342448,\"3\",201342449,\"1\",469777842,\"\",469777843,\"\uff2d\uff33 \u660e\u671d\",201341986,\"1\"]}'>Architecture and history: <\/span><\/span><\/strong><span class=\"TextRun SCXW27481441 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW27481441 BCX2\" data-ccp-parastyle=\"Example\" data-ccp-parastyle-defn='{\"ObjectId\":\"b2669cdf-ada6-5dca-b5b9-14e7d50ff8ba|1\",\"ClassId\":1073872969,\"Properties\":[469775450,\"Example\",201340122,\"2\",134233614,\"true\",469778129,\"Example\",335572020,\"1\",134224900,\"false\",469777841,\"Arial\",469777844,\"Arial\",469769226,\"Arial\",335551500,\"2301723\",268442635,\"20\",335559739,\"100\",201342446,\"1\",201342447,\"5\",201342448,\"3\",201342449,\"1\",469777842,\"\",469777843,\"\uff2d\uff33 \u660e\u671d\",201341986,\"1\"]}'><span class=\"TextRun SCXW210388744 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW210388744 BCX2\" data-ccp-parastyle=\"Example\">\u201cNorthern Arizona University\u2019s Old Main, built in 1894, features Romanesque architecture and locally sourced red sandstone.\u201d<\/span><\/span><\/span><\/span><\/p>\n<p><strong>Graduation photo locations:<\/strong> <span data-contrast=\"none\">\u201cNorthern Arizona University\u2019s Old Main stands on the North Quad and provides a popular backdrop for graduation photographs.\u201d<\/span><span data-ccp-props='{\"335559739\":100}'>\u00a0<\/span><\/p>\n<p><span data-contrast=\"none\">All three descriptions can be accurate. The best choice depends on what the page is trying to communicate.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span><\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"How to write good alt text\u00a0_0\" id=\"shortcode-accordion-4-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-4-panel\">\n            How to write good alt text\u00a0\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-4-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-4-trigger\" inert>\n        <html><body>\n<ol>\n<li>Describe the image accurately\n<ol>\n<li><span data-contrast=\"none\">Explain what is shown and what the image does, if it has a function. Focus on the information a user needs in the current context.<\/span><span data-ccp-props='{\"201341983\":0,\"335559739\":140,\"335559740\":269}'>\u00a0<\/span>\n<ol>\n<li><strong>Good:<\/strong> <span data-contrast=\"none\">\u201cA student uses a screen reader to navigate an online course.\u201d<\/span><span data-ccp-props='{\"335559739\":100}'>\u00a0<\/span><\/li>\n<li><strong>Less helpful:<\/strong> <span data-contrast=\"none\">\u201cA student uses a computer.\u201d<\/span><span data-ccp-props='{\"335559739\":100}'>\u00a0<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Be brief but meaningful\n<ol>\n<li>Use as few words as possible while still communicating the image\u2019s purpose. Simple images often need only one short sentence. Complex images usually need brief alt text plus a longer description.\n<ol>\n<li><strong>Good<\/strong>: \u201cA professor demonstrates sign language during a classroom lecture.\u201d<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Use complete sentences\n<ol>\n<li>Write alt text as a complete sentence, with capitalization and closing punctuation. This site uses complete sentences to promote clarity and consistency. A short functional label may be an exception when a full sentence would be unnatural, such as \u201cSearch.\u201d<\/li>\n<\/ol>\n<\/li>\n<li>Avoid repeating nearby text\n<ol>\n<li>Do not repeat a caption, heading, link label, or nearby paragraph word for word. Alt text should add the visual information needed to understand the image. If nearby text already provides a complete equivalent, the image may be decorative in that context.<\/li>\n<\/ol>\n<\/li>\n<li>Skip \u201cimage of\u201d and \u201cpicture of\u201d\n<ol>\n<li>Screen readers generally announce that an element is an image, so these phrases are usually unnecessary. Mention the medium only when it contributes meaning, such as a painting, diagram, screenshot, or historic photograph.\n<ol>\n<li><strong>Write<\/strong>: \u201cA golden retriever retrieves a tennis ball in a grassy park.\u201d<\/li>\n<li><strong>Avoid<\/strong>: \u201cImage of a golden retriever retrieving a tennis ball in a grassy park.\u201d<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Do not use file names as alt text\n<ol>\n<li>File names such as \u201cIMG_2048.jpg\u201d or \u201cstudent-campus-final.png\u201d do not provide an equivalent description. Replace them with text that communicates the image\u2019s purpose.<\/li>\n<\/ol>\n<\/li>\n<li>Review names and identify details carefully\n<ol>\n<li>Identify a person by name only when the person is known and their identity is relevant. Do not guess personal characteristics. Describe visible, relevant details without making assumptions about identity, emotion, disability, age, race, ethnicity, or gender.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Start with a simple decision_0\" id=\"shortcode-accordion-5-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-5-panel\">\n            Start with a simple decision\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-5-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-5-trigger\" inert>\n        <html><body>\n<p>Steps:<\/p>\n<ol>\n<li>Does the image add meaning or perform an action?\n<ol>\n<li>If no, treat it as decorative. If yes, continue to Step 2.<\/li>\n<\/ol>\n<\/li>\n<li>Can one concise sentence provide an equivalent?\n<ol>\n<li>If yes, write concise alt text. If no, provide short alt text and a longer text description.<\/li>\n<\/ol>\n<\/li>\n<li>Is the image a link, button, or control?\n<ol>\n<li>Describe the action or destination instead of the image\u2019s appearance.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Types of images and what to provide_0\" id=\"shortcode-accordion-6-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-6-panel\">\n            Types of images and what to provide\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-6-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-6-trigger\" inert>\n        <html><body>\n<h5>Informative images<\/h5>\n<p>Informative images communicate information that is needed to understand the page. They require alt text that conveys their essential meaning in context.<\/p>\n<p><strong>Example<\/strong>: \u201cA student reads a braille textbook while studying in the library.\u201d<\/p>\n<h5>Functional images<\/h5>\n<p>Functional images are used within links, buttons, or controls. Describe the action, purpose, or destination. Do not focus on the icon\u2019s shape unless the shape itself is important.<\/p>\n<p><strong>Search button<\/strong>: \u201cSearch.\u201d<\/p>\n<p><strong>Download<\/strong>: \u201cDownload the accessible presentation checklist.\u201d<\/p>\n<p><strong>Linked logo<\/strong>: \u201cVisit the Northern Arizona University home page.\u201d<\/p>\n<p><strong>Implementation note<\/strong>:\u00a0If visible text already gives a button or link an accessible name, an accompanying icon may be decorative. Avoid giving users duplicate or conflicting names.<\/p>\n<h5>Decorative images<\/h5>\n<p>Decorative images add visual styling but do not contribute information or perform a function. Examples may include borders, flourishes, background patterns, or an image whose meaning is already fully provided nearby.<\/p>\n<p>Use an empty alt attribute so assistive technology can ignore a decorative HTML image:<\/p>\n<p>&lt;img src=\u201ddecorative-line.png\u201d alt=\u201d\u201d&gt;<\/p>\n<p><strong>Important<\/strong>: Do not omit the alt attribute. A missing alt attribute and an empty alt attribute do not mean the same thing.<\/p>\n<h5>Logos and branding images<\/h5>\n<p>Use the organization, program, or product name when a logo provides identification. Avoid describing colors, shapes, or typography unless those details matter in the current context.<\/p>\n<p><strong>Example<\/strong>: \u201cNorthern Arizona University Disability Resources.\u201d<\/p>\n<h5>Mood-setting and supporting images<\/h5>\n<p>A mood-setting image may support the message without presenting critical facts. Decide whether it adds meaningful context. If it does, provide a concise description. If it is only visual decoration, mark it as decorative.<\/p>\n<p><strong>Example<\/strong>: \u201cTwo students talk together in a campus lounge.\u201d<\/p>\n<h5>Images of people<\/h5>\n<p>Describe the activity, setting, and details that support the purpose of the page. Name people only when their identities are known and relevant. Do not guess identity characteristics or internal states.<\/p>\n<p><strong>Example<\/strong>: \u201cCharlese Bedford smiles while standing in front of a sunlit rock wall.\u201d<\/p>\n<h5>Images containing text<\/h5>\n<p>Important words shown in an image must also be available as text. Include the message in the alt text when it is short. For substantial text, provide the content as real text on the page and use concise alt text to identify the graphic\u2019s purpose.<\/p>\n<p><strong>short message<\/strong>: \u201cThe graphic states, \u2018Accessibility is everyone\u2019s responsibility.'\u201d<\/p>\n<p><strong>Better practice<\/strong>: Use real text instead of an image of text whenever possible. Real text can be resized, selected, translated, restyled, and read by assistive technology more reliably.<\/p>\n<h5>Screenshots<\/h5>\n<p>Describe the part of the interface that matters to the instruction. Do not list every visible control if the surrounding steps already provide those details.<\/p>\n<p><strong>Example<\/strong>: \u201cThe PowerPoint Alt Text pane appears on the right side of the window.\u201d<\/p>\n<h5>Complex images<\/h5>\n<p>Charts, graphs, maps, diagrams, infographics, and organizational charts often contain too much information for a single alt text sentence. Provide short alt text that identifies the image and its main purpose, then provide an equivalent long description in nearby text or on a clearly linked page.<\/p>\n<p><strong>Short alt text<\/strong>: \u201cA bar chart compares annual enrollment from 2020 through 2025.\u201d<\/p>\n<p>Long description: \u201cEnrollment increased from 12,000 students in 2020 to 18,500 students in 2025. The largest annual increase occurred between 2023 and 2024.\u201d<\/p>\n<h6>A useful long description should include<\/h6>\n<ul>\n<li>The image\u2019s purpose and overall message.<\/li>\n<li>The relationships, trends, or patterns needed to understand it.<\/li>\n<li>Important labels, values, dates, or categories.<\/li>\n<li>Any exceptions or details that affect interpretation.<\/li>\n<li>A data table when users need access to exact chart values.<\/li>\n<\/ul>\n<h5>Maps and spatial information<\/h5>\n<p>State the map\u2019s purpose and provide the information someone needs to complete the same task without seeing the map. Depending on the purpose, this may include written directions, locations, routes, landmarks, distances, or an accessible list of map points.<\/p>\n<p><strong>Example<\/strong>: \u201cA campus map shows the accessible route from the parking garage to the Disability Resources office.\u201d<\/p>\n<h5>Diagrams and processes<\/h5>\n<p>Summarize the process or relationship in the alt text, then provide the full sequence or structure as nearby text. Preserve meaningful order, branches, inputs, outputs, and connections.<\/p>\n<p><strong>Example<\/strong>: \u201cA five-step diagram shows the accessible procurement review process from request submission through final decision.\u201d<\/p>\n<h5>Diagrams and processes<\/h5>\n<p>Summarize the process or relationship in the alt text, then provide the full sequence or structure as nearby text. Preserve meaningful order, branches, inputs, outputs, and connections.<\/p>\n<p><strong>Example<\/strong>: \u201cA five-step diagram shows the accessible procurement review process from request submission through final decision.\u201d<\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<h2>Captions, alt text, and long descriptions<\/h2>\n<p>These elements can work together, but they serve different purposes.<\/p>\n\n\n<!-- shortcode-tab -->\n<div class='shortcode-tab-container tab-count-3'>\n    <ul class='tabs'>\n                <li class=\"tab\">\n            <a class=\"shortcode-tab__trigger\" href=\"#\" data-header=\"Alt text_1\">\n                <div class=\"shortcode-tab-header selected\">\n                    <h4>\n                        Alt text <span class=\"screen-reader-text\">Tab Open<\/span>\n                    <\/h4>\n                <\/div>\n            <\/a>\n        <\/li>\n                <li class=\"tab\">\n            <a class=\"shortcode-tab__trigger\" href=\"#\" data-header=\"Caption_2\">\n                <div class=\"shortcode-tab-header \">\n                    <h4>\n                        Caption <span class=\"screen-reader-text\">Tab Closed<\/span>\n                    <\/h4>\n                <\/div>\n            <\/a>\n        <\/li>\n                <li class=\"tab\">\n            <a class=\"shortcode-tab__trigger\" href=\"#\" data-header=\"Long description_3\">\n                <div class=\"shortcode-tab-header \">\n                    <h4>\n                        Long description <span class=\"screen-reader-text\">Tab Closed<\/span>\n                    <\/h4>\n                <\/div>\n            <\/a>\n        <\/li>\n            <\/ul>\n        <!-- shortcode-accordion -->\n<div class=\"shortcode-accordion \" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Alt text_1\" id=\"shortcode-accordion-7-trigger\" aria-expanded=\"true\" aria-controls=\"shortcode-accordion-7-panel\">\n            Alt text\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-7-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-7-trigger\" >\n        <html><body>\n<p><strong>Who encounters it<\/strong>: People using assistive technology, or anyone when an image fails to load.<\/p>\n<p><strong>Primary purpose<\/strong>:\u00a0Provides the image\u2019s concise equivalent, meaning, or function.<\/p>\n\n    <\/body><\/html>\n    <\/div>\n<\/div>\n\n        <!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Caption_2\" id=\"shortcode-accordion-8-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-8-panel\">\n            Caption\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-8-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-8-trigger\" inert>\n        <html><body>\n<p><strong>Who encounters it<\/strong>:\u00a0Everyone.<\/p>\n<p><strong>Primary purpose<\/strong>:\u00a0Adds visible, context, identification, commentary, or a credit.<\/p>\n\n    <\/body><\/html>\n    <\/div>\n<\/div>\n\n        <!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Long description_3\" id=\"shortcode-accordion-9-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-9-panel\">\n            Long description\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-9-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-9-trigger\" inert>\n        <html><body>\n<p><strong>Who encounters it<\/strong>:\u00a0Everyone when placed on the page, or users who follow a description link.<\/p>\n<p><strong>Primary purpose<\/strong>: Provides a complete equivalent for a complex image.<\/p>\n\n    <\/body><\/html>\n    <\/div>\n<\/div>\n\n    <\/div>\n\n<p>A caption does not automatically replace alt text. If a caption and nearby text already provide a complete equivalent, the image may be decorative. Make that decision based on the complete page context.<\/p>\n<h2>Helpful videos<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=FfpojPCstCU\">Alt Text for Complex Images<\/a><\/p>\n<p><a href=\"https:\/\/mediaspace.nau.edu\/media\/Adding+Alt+Text+with+Ally\/1_dazbwdhq\">Adding Alt Text with Ally<\/a><\/p>\n<p><a href=\"https:\/\/mediaspace.nau.edu\/media\/Enabling%20the%20Ally%20Course%20Accessibility%20Report\/1_9eu4zar9\">Enabling Ally Course Reports<\/a><\/p>\n<p><a href=\"https:\/\/mediaspace.nau.edu\/media\/Ally%20Course%20Accessibility%20Report%20Dashboard\/1_xtzntk7b\">Ally Course Accessibility Report Dashboard<\/a><\/p>\n<h2>Using AI to draft alt text<\/h2>\n<p>AI can help create a starting description, but it may miss context, misidentify details, invent information, or overdescribe an image. The content author remains responsible for the final text.<\/p>\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Human review workflow_0\" id=\"shortcode-accordion-10-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-10-panel\">\n            Human review workflow\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-10-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-10-trigger\" inert>\n        <html><body>\n<ol>\n<li>Determine why the image is included.<\/li>\n<li>Generate or write an initial description.<\/li>\n<li>Compare the description with the actual image.<\/li>\n<li>Remove irrelevant or speculative details.<\/li>\n<li>Edit the text so it fits the surrounding content.<\/li>\n<li>Confirm that it is accurate, concise, meaningful, and complete.<\/li>\n<\/ol>\n<h5>Keep the work human-centered<\/h5>\n<p>Never publish AI-generated alt text without reviewing it for accuracy, context, bias, and clarity.<\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Common mistakes to avoid_0\" id=\"shortcode-accordion-11-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-11-panel\">\n            Common mistakes to avoid\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-11-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-11-trigger\" inert>\n        <html><body>\n<ul>\n<li>Leaving meaningful images without alt text.<\/li>\n<li>Using a file name, URL, or generic word such as \u201cphoto.\u201d<\/li>\n<li>Describing everything visible instead of the image\u2019s purpose.<\/li>\n<li>Repeating a caption or nearby paragraph word for word.<\/li>\n<li>Starting with \u201cimage of\u201d or \u201cpicture of\u201d when the medium is not important.<\/li>\n<li>Describing an icon\u2019s appearance instead of its action.<\/li>\n<li>Giving decorative images unnecessary descriptions.<\/li>\n<li>Putting a long chart explanation inside the alt attribute instead of providing a structured long description.<\/li>\n<li>Relying on color alone within charts or diagrams.<\/li>\n<li>Publishing automatically generated alt text without human review.<\/li>\n<\/ul>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<h2>Quick alt text checklist<\/h2>\n<ul>\n<li>Does the image add information or perform a function?<\/li>\n<li>Does the alt text communicate the image\u2019s purpose in this context?<\/li>\n<li>Is the description accurate?<\/li>\n<li>Is it concise but meaningful?<\/li>\n<li>Is it written as a complete sentence, except where a short functional label is more natural?<\/li>\n<li>Does it avoid repeating nearby text?<\/li>\n<li>Does it avoid unnecessary phrases such as \u201cimage of\u201d or \u201cpicture of\u201d?<\/li>\n<li>If the image is functional, does the accessible name describe the action or destination?<\/li>\n<li>If the image is decorative, is it implemented so assistive technology ignores it?<\/li>\n<li>If the image is complex, is a complete long description available?<\/li>\n<li>If the image uses color, is the information also communicated another way?<\/li>\n<li>If AI helped write the alt text, did a person verify and edit it?<\/li>\n<\/ul>\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Key takeaway_0\" id=\"shortcode-accordion-12-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-12-panel\">\n            Key takeaway\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-12-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-12-trigger\" inert>\n        <html><body>\n<p>Thoughtful image choices and well-written alternatives make content clearer, more inclusive, and more useful. Include accessibility from the beginning of the content process and review image accessibility before publishing.<\/p>\n<h5>Good alt text provides an equivalent experience<\/h5>\n<p>Do not try to describe every pixel. Identify why the image is present, communicate the information or function a user needs, and make the description fit the surrounding context.<\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n<!-- shortcode-accordion -->\n<div class=\"shortcode-accordion shortcode-accordion--closed\" style=\"position: relative;\" >\n        <h4 class=\"shortcode-accordion__header\">\n        <button type=\"button\" class=\"shortcode-accordion__trigger\" data-header=\"Suggested resources_0\" id=\"shortcode-accordion-13-trigger\" aria-expanded=\"false\" aria-controls=\"shortcode-accordion-13-panel\">\n            Suggested resources\n            <span class=\"shortcode-accordion__header__arrow\" aria-hidden=\"true\"><\/span>\n        <\/button>\n    <\/h4>\n    <div class=\"shortcode-accordion__body\" id=\"shortcode-accordion-13-panel\" role=\"region\" aria-labelledby=\"shortcode-accordion-13-trigger\" inert>\n        <html><body>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\">Web Content Accessibility Guidelines 2.2<\/a><\/p>\n<p><a href=\"https:\/\/webaim.org\/techniques\/images\/#comprehension\">WebAIM: Accessible Images\u00a0<\/a><\/p>\n<p><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\">WebAIM: Alternative Text<\/a><\/p>\n<p><a href=\"https:\/\/uit.stanford.edu\/accessibility\/learn-about\/images\">Stanford University IT: Images<\/a><\/p>\n<p><a href=\"https:\/\/ctl.unm.edu\/accessibility\/alternative-text.html\">University of New Mexico: Alternative Text<\/a><\/p>\n<\/body><\/html>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Images Images can explain ideas, support learning, show relationships, communicate emotion, and make digital content easier to understand. When an image is not accessible, some people may miss information that other users receive visually.\u00a0 Alternative text, often called alt text, gives people a text-based way to understand the image. Screen readers can announce this text, [&hellip;]<\/p>\n","protected":false},"author":156,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ring_central_script_selection":"","footnotes":""},"class_list":["post-606","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/pages\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/users\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":21,"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/pages\/606\/revisions"}],"predecessor-version":[{"id":657,"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/pages\/606\/revisions\/657"}],"wp:attachment":[{"href":"https:\/\/in.nau.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}