Video Card

The Video Card supports "shorts," a common content type on social media and editorial sites. It leverages the browser's built-in video player.

Dos

Format videos for vertical use

Keep file size under 15MB

Use in groups of at least 2

Provide captioning for video sound

Don'ts

Don't span a vertical video full width on a page

Variations

An uncomplicated component meant to support groupings of vertical video and use the default browser video player.
Video plays without sound on hover (desktop).

Accessibility

Video

A pause button is added for users when a video is used. WCAG 2.2.2: Pause, Stop, Hide

Hover and Focus State - Video Card

The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

Color Contrast - Video Card

A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability. WCAG 1.4.3: Contrast (minimum)

Keyboard Accessible

Users are able to use the keyboard to navigate through the menu using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order WCAG 2.4.3: Focus Order and focus can move away from the component as needed. WCAG 2.1.2: No Keyboard Trap

Enhanced Tap Targets - Video Card

Play/Pause buttons and scrubber have adequate space around and in between each icon to ensure clear tap targets and prevent users from missing or accidentally clicking other social targets. WCAG 2.5.5: Tap Targets

Video

If you are using a video, ensure that it does not flash more than 3 times per second. Avoid large, flashing images that are bright with significant contrast between flashes. WCAG 2.3: Seizures and Physical Reactions

Audio description - Video Card

Audio description is provided for all prerecorded video content in synchronized media.