Components
molecules
Components
Image
Image is a wrapper for the native image tag with support for events and fallback images.
Always provide alt text for your users, unless the image is purely decorative, in which case the alt text should be an empty string ("") to hide it from screen readers.
Properties
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
| Name | Type | Required? | Default Value | Description |
|---|---|---|---|---|
| source | string | optional | 'https://images.unsplash.com/photo-1449023859676-22e61b0c0695?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1789&q=80' | URL of the image * |
| alt | string | optional | 'alt text' | alternative text of the image * |
Accessibility
Alternative text
An image must always include an alternative text that provides a textual alternative description. The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the content and function of the images within your web content.
How do I write good alt text?
- Describe the image as specifically and useful as possible.
- Keep it (relatively) short.
- Don't use images as text.
- Don't include "image of," "picture of," etc. in your alt text.
- Since writing good alternative text is critical to pass an accessibility audit please make sure to read the articles below on the Resources section.
Resources