--- title: "Image Accessibility" description: "For Images there are two Options that can be maintained: Alt-Text and Title" path: https://www.eonshowroom.eon.com/en/aem-basics/accessibility/image-accessibility.html lastModified: 2025-01-14T15:02:43.109Z --- # Image Accessibility # Make Images accessible For Images there are two Options that can be maintained: - Alt-Text An Alt-Text (Alternative Text) is a brief Description of an Image that provides Context used by Assistive Technologies, like e.g. for visually impaired Users, or when Images are disabled. An Alt-Text is added to the HTML Code of an Image and read by Assistive Technologies, like Screen Readers. Therefore, it should be kept short to avoid long Interruptions when Users browse a Page. **Keep in Mind:** Alt-Text should only be used for Images that add Information but never for only decorative Images. - Title Tag The Title Tag of an Image is an optional HTML Attribute that can be used to provide additional Information or a Tooltip when a User hovers over the Image. It is not a Replacement for the Alt-Text. If one of it or both should be used, depends on the Image and its Purpose. **Do not use it, if it does not bring any Value to the (visually impaired) User.** ![Light Bubbles](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bulbs_lights_in_front_of_wall%3A2-1?fmt=webp) ### Alt-Text #### When to use Alt-Text - On Informative Images - On Images with Interactions (Clickable Image) - Images with Text - On Functional Images ![Säulendiagramm, dass 2126 Sonnenstunden in Rheinfelden mit 1432 Sonnenstunden in Windmundshafen darstellt.](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-informational_transparent_4x3%3A4-3?fmt=webp-alpha) ##### Informative Images: If the Image conveys important Information, such as Diagrams, Graphs, Product Photos, or Images that add Context to the Content. **Alt-Text:** Describe the Content and Purpose of the Image in maximal 120 Characters. **Further Examples:**An Image showing the Features of a new Product. ![Infographic with 4 numbered Buttons showing Energy Flow from Industry to OCR System and back.](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/ocr-example%3A2-1?fmt=webp) digit 1 light Waste Heat ##### Waste Heat Unutilized Heat in Industrial Processes, e.g. exhaust Gas, excess Steam and hot Liquids. digit 2 light Heat Exchange ##### Heat Exchanger Transfer of Waste Heat to ORC Modules. A heat exchanger for an ORC transfers heat from a hot source to a working fluid in an ORC system. It allows the working fluid to vaporize and drive a turbine, generating electricity. Heat exchangers are crucial for the efficiency and performance of ORC systems. digit 3 light Modular ORC System ##### Modular ORC System Generation of clean Power from Waste Heat at low Cost. - Low-temperature heat sources - Turbine - Generator digit 4 light Power ##### Power Cheap, clean and CO2-neutral for Onsite Consumption. ##### Images with Interactions (Clickable Image): If the Image conveys important Information having Interactive Elements on it. **Alt-Text:** Describe the Content and Purpose of the Image in maximal 120 Characters. ![Click here to go to Homepage](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Logo_Staging_Move_1920x1080%3A2-1?fmt=webp-alpha) ##### Functional Images: If the Image acts as a Button or Link, such as Icons or interactive Elements. **Alt-Text:** Describe the Function of the Image. **Further Examples:**A clickable Search Icon gets Alt-Text "Search". ![Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-informational-01_4x3%3A4-3?fmt=webp-alpha) ##### Images with Text: If the Image contains Text that is not present elsewhere in the Content. **Alt-Text:** Include the Text from the Image. **Further Examples:** A Promotional Banner with Sale Details. ![Snowy Tree in the Dark](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/luke-hodde-opzle7zccke-unsplash%3A2-1?fmt=webp) ### Alt-Text #### When not to use Alt-Text - On Decorative Images ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_6-1%3A2-1?fmt=webp-alpha) ##### Decorative Images: If the Image is purely for Decoration and does not add Information or Context to the Content. **Alt-Text:** DO NOT USE IT ![Light Bubbles](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bulbs_lights_in_front_of_wall%3A2-1?fmt=webp) ### Title Tag #### When to use Title Tag - Image needs additional Information **Note:** Title Tags are Optional and generally should not be used. ![Säulendiagramm, dass 2126 Sonnenstunden in Rheinfelden mit 1432 Sonnenstunden in Windmundshafen darstellt.](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-informational_transparent_4x3%3A4-3?fmt=webp-alpha) ##### Additional Information: Only if you need to provide supplementary Information that is not crucial but could be useful when a User hovers over the Image. **Title Tag:** Provide brief additional Context or Details. ![Snowy Tree in the Dark](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/luke-hodde-opzle7zccke-unsplash%3A2-1?fmt=webp) ### Title Tag #### When not to use Title Tag - For redundant Information ![Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/image-informational-01_4x3%3A4-3?fmt=webp-alpha) ##### Redundant Information: If the Information in the Title Tag is the same as the Alt-Text or if it does not add any significant Value. **Title Tag:** Omit to avoid Redundancy.