Guidelines
Guidelines
Content
A Media Preview should:
- Use an image-preview that is based on the actual image asset to ensure that it's an actual preview of the image.
- Use an image-preview with the same aspect ratio as the actual image to keep the dimensions of the preview and the high-resolution image aligned.
- Use a video with a maximum duration of 5 seconds.
- Use a video that uses the same aspect ratio as the underlying image.
Performance
A Media Preview should:
- Have a file size appropriate to its dimensions, reducing the actual load time and the transferred file size for the user.
- Use an image-preview which is a reasonably smaller version of the original image to provide fast loading times. 10% of the actual image's dimension (width, height) works best.
Interaction
A Media Preview should:
- Be set to active based on user interaction, e.g. on mouse-over or scrolling into the viewport.
- Remain in its active state unless the user stops interacting with it, e.g. on mouse-out, scrolling the component out of the viewport
Accessibility
A Media Preview should:
- Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.
- Have a descriptive image-alt (alternate text) for providing the content in an alternative text-based format and making the image more accessible.
- Have an image-alt attribute, unless it’s for decorative purposes. Including “image of...” or “photo of...” in the alt attribute is not needed, as assistive technologies are taking care of declaring the media type.
- Have an overlay if a text or a Button other than the ‘cover-up’ Button is placed on it.