--- title: "Are the hidden images decorative?" date: "2024-10-24T08:20:04+00:00" summary: "Ensure decorative images are correctly marked to improve accessibility for visually impaired users. Learn how to review and fix issues." image: type: "page" url: "/web-governance/are-hidden-images-decorative" id: "0f68e20b-f351-49a8-92a9-1c35f3a57117" --- Table of contents will be added 1.1.1 Non-Text Content Introduction ------------ This document provides information about the related Acquia Web Governance accessibility checks: * Are the hidden images decorative? This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria _1.1.1 non-text content_. What ---- Ensure that visible images and graphics that are marked as _decorative_ in the code only have a decorative function. A decorative image does not convey meaningful information or serve a functional purpose. Such images are used solely for visual enhancement. Why --- When images or graphics are marked as decorative in the code, assistive technologies such as screen readers will skip over the image. This is a useful feature because it allows users who cannot see the visual content to save time and skip over graphic elements that are purely aesthetic. However, if images and graphics that provide information or functionality are incorrectly marked as decorative in the code, assistive technologies will also skip these images. The impact is that the user will not have access to the important information or functionality that the images convey. Who --- ### Affected users This check affects individuals with: * Blindness: Who can read the image text alternative on a braille display. * Other vision impairments: Who access the site contents with a screen reader or other text-to-speech software. ### User story ![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/ab902dae-f391-4c4d-a431-77ca08d2adc6/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png) Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy: _“The other day, my internet connection went down, and when I tried to call my provider for help, I ended up on their website. It just said, "Call us at," and then the computer stopped talking. I could not read the actual number I needed to call. It is really frustrating because I know it is right there on the screen if I could see it, but they have hidden it from me. This kind of thing makes me so irritated. I had to wait until the next day to get a colleague to help me read it. But it is a waste of her time and mine that it has to be necessary.”_ Examples -------- This section provides some good and bad examples of this error. ### Example: Informative image marked as decorative On a company website, a world map displays  the four cities worldwide that highlight where the company has offices. The code that inserts the map image has an empty `alt` attribute, which marks the image as decorative. ”” ![World map showing the location of the company's offices. As an empty alt attribute is provided, the screen reader does not announce anything](https://acquia.widen.net/content/b430f114-60f8-4725-aea2-e80ca4f8df75/web/Mon_AccessibilityHelpCenter-111-world-map.png) Visually, the image shows that the company has offices in San Francisco, USA; Bangalore, India; Berlin, Germany; and Toronto, Canada. However this information is not accessible to screen reader users because the image is marked as decorative with an empty `alt` attribute (`alt=""`). ### Example: Decorative image The beginning of each new section on the website is marked with a prominent star. The image of the star conveys no information but is solely there to be visually striking. The star image is inserted with an `` element with an empty alt attribute. ”” ![Three sections of text are showing on a web page about coffee. Each section is accompanied by a large, red star. Each image of the star has an empty alt attribute on the webpage that this screenshot was taken from.](https://acquia.widen.net/content/b3e1ba7d-8664-4c64-b3e1-322b676b6ea2/web/Mon_AccessibilityHelpCenter111-ClayCoffeeCups.png) When a blind person uses screen reader software, the screen reader ignores the images of stars and does not mention them. This is helpful because the user does not waste time dealing with visual stars that do not provide any useful information. ### Example: Informative image with visible text It is common for an informative image, such as an icon, to be marked as decorative if the visible text next to the image describes the purpose of the icon. For example, an envelope icon with the text "Send email" next to it. ![Blue envelope icon next to the text "Send email" in blue font on a white background.](https://acquia.widen.net/content/af2df877-4931-41b6-9c42-9f9386834fd7/web/Mon_AccessibilityHelpCenter-111-SendEmailButton.png) In this case, the text _Send email_ serves as a [conforming alternative version](https://www.w3.org/TR/WCAG22/#dfn-conforming-alternate-version), and it is acceptable to mark the icon as decorative. How --- This section provides information on how to identify, review, and fix the issue. #### How to identify it The Acquia Web Governance platform highlights images and graphic elements that are marked as _decorative_ in the code. #### How to review it This check requires a human review. You must confirm that the highlighted images are decorative. Assess the image to determine if it conveys any information or functionality, or if it is there purely for visual or aesthetic reasons. * Ask yourself this question: Will the user lose any information or functionality if the image is removed from the page? * If the answer is no, then the image is decorative, and you can mark this issue as _reviewed_ on the platform. * If the answer is yes, it means there is an error on the website that should be fixed. Add a descriptive text alternative to the image. For instructions on how to set the image to _Reviewed_ in the Web Governance platform, visit [How to review an áccessibility issue](/web-governance/how-review-accessibility-issue "How to review an accessibility issue"). ### How to fix it To fix it, change the empty `alt` attribute (which marks the image as decorative) to include a description that provides the relevant information conveyed by the image. For example, change from: ”” To: Include a descriptive text alternative: ”We If an informative image, such as an icon, is marked as _decorative_ and the visible text next to the image describes the purpose of the icon, you can set it as _Reviewed_ in the platform. In this case, the text _Send email_ serves as a [conforming alternative version](https://www.w3.org/TR/WCAG22/#dfn-conforming-alternate-version), and it is acceptable to mark the icon as decorative and set it as _Reviewed_ in the platform. Note In addition to the empty alt attribute `alt=""`, there are other coding techniques that indicate images or graphic elements are decorative. For example, `aria-hidden="true"` and `role="none"`. See the "ACT rules" section below for a detailed technical explanation of this check. Additional resources -------------------- ### WCAG success criteria * [1.1.1 Non-Text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) ### ACT rules Related accessibility conformance testing rules: [Image not in the accessibility tree is decorative](https://www.w3.org/WAI/standards-guidelines/act/rules/e88epe/proposed/) ### Other resources [Images tutorial by W3C](https://www.w3.org/WAI/tutorials/images/)