Documentation
Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'
Image
Description
- Purpose
- The Image component is used to display images of various sources.
- Composition
- An Image is composed of the image and an alternative text for screen readers. An Image MAY contain an initial source of reduced size and additional higher resolution sources optimized for different display sizes to be loaded asynchronously once the actual size on the screen is known.
Rules
- Composition
- If an Image may be displayed in widely differing sizes differently sized sources SHOULD be added as additional high resolution resource sources to reduce loading times without diminishing the user experience.
- Interaction
- Images MAY be included in interactive components. Images MAY also be interactive on their own. Clicking on an Image can e.g. provide navigation to another screen or showing a Modal on the same screen. The usage of an interactive Image MUST be confirmed by the JF to make sure that interactive Images will only be used in meaningful cases.
- Accessibility
- Images MUST contain the alt attribute. This attribute MAY be left empty (alt="") if the image is of decorative nature. According to the WAI, decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive (see https://www.w3.org/WAI/tutorials/images/decorative/).
Relations
- Parents
- UIComponent
- Descendants
- Standard
- Responsive