META: Add Audio-Described Files to Video Component

andyvanavery31 commented 7 months ago

Description

To meet accessibility requirements for video components, the user must be able to access the audio-described version of the video. This change request is to add these two items to the video component in a way that meets accessibility requirements, has easy navigation, and aligns with the look and feel of the latest redesign. This META ticket will track the related tickets to accomplish this across the platform.

What's the expected change?

The audio-described file for videos are added to the video content type and users can access them with videos.

What's the current functionality?

The audio-described file is not directly available to users on webpages

Tracked Tickets

[ ] #4484
[ ] #4487
[ ] #4488
[ ] CTHPs Ticket

Tasks

[x] Need a designer to comp the front end of how to add the audio-described file to a video content type for:
- [x] Home & Landing Pages
- [x] Mini Landing Pages
- [x] Embedded Videos
- [x] @blilianyu Add comps of videos for each size (small, medium, large, and with and without captions) https://www-dev-ac.cancer.gov/api-test/a/embedded-video-test
- [x] CTHP Video Cards
[x] Need client review of designer solution for front-end view

Resources

Requirements

The video component shall allow users to access the audio-described version of the video
The audio-described version of the video will be accessed through an external link
The audio-described version of the video will be optional for videos
The addition of the audio-described file shall use a simple approach that does not change the video player itself
The addition of the audio-described file shall assume that the video will no longer be a page-level content type
If the video does not have an audio described version to go with it, then the designed interface to go to the audio-described version will not render
The embedded video component update shall have the same user experience on the following embedding types on the Digital Platform:
- Video Display: Large: No Title
- Video Display: Large: Title
- Video Display: Medium: No Title
- Video Display: Medium: Title
- Video Display: Small: No Title
- Video Display: Small: Title
The embedded video component can be placed on the Body Content WYSIWYG on the following Content Pages:
- Application Page
- Article Page
- Biography
- Blog Post
- Cancer Center
- Cancer Research List Page
- Event
- Press Release
A link to videos can be added as a Related Resources Media Link on the following Content Pages:
- Article Page
- Biography
- Blog Post
- Cancer Center
- Cancer Research List Page
- Event
- Press Release
The video component appears in other forms on the following pages with the content type
- Cancer Type Home Page - CTHP Video Card
- Home & Landing - NCIDS Inline Video (NOT TO BE ADDRESSED IN THIS TICKET)
- Mini Landing Page - 2 Column Layout (with NCIDS Style)
The following blocks utilize videos, which will need to have the audio-described file available:
- Content Block - the WYSIWYG
- Video Carousel

Tickets to be made:

Legacy Embedded in the WYSIWYG
- Include the addition of the field to the CGDP Video Content Type to the first ticket being worked on
- Update Full sized on Video Page
- Make it appear on the front-end
- With Caption and Without Caption, this needs to be within the caption.
- If no caption, but an AD file, then the FigCaption should not be created, and "Audio Descriptions: Watch the audio-described version of this video" is not a description of the video
- Will need to embed the combinations
MLP
- Make it appear on the front-end
- Follow NCIDS
- If no caption, don't use FigCaption
H&L
- Make it appear on the front-end
- Follow NCIDS
CTHP
- Make it appear on the front-end
Need Spanish translation of the "Audio Descriptions: ", "Watch the" "audio-described version of this video." Need to identify where the link appears

Acceptance Criteria?

Front End Audio-Described File

Scenario: A visitor to a site page finds a video and wants to access the audio-described version
  Given the site visitor is on a page with a video
  When a sighted user sees the video
  Then the audio-described file will be visible
    And the user can access the file
    And the presentation will match the comp
  When a non-sighted user navigates through the page
  Then they will be able to navigate to the audio-described file
    And the user can access the file

Drupal Implementation

Scenario: A content editor is adding or editing a video content type on the CMS
  Given the user is logged into the CMS
  When the user is adding or editing a video content type on the CMS
  Then the fields of the video content type will match the content model (see link in Resources section)