P1T Accessibility - Video Production Guide === <h1> <small>P1T Accessibility</small> <div>Video Production Guide</div> </h1> ###### tags: `citip1t`, `video`, `checklist` ## Versions | # | Notes | |---|---| | v1 | *First release (2019.11.04)* | | v2 | *Updated caption best practices (2022.01.20)* | <style> section:hover { background: #ffa; } </style> ## Overview This document serves as a comprehensive accessibility checklist for the creation of all video production deliverables. The guidelines covered in this document comprise various best practices and explicit accessibility requirements essential to achieve and test accessibility compliance. ### Looking for something you don't see here? This document is a work in progress and will be updated regularly with new information. If you don't see something or have questions, ping me (Patrick Fox) on Teams. ## Platform Support: Captioning and Audio Description It is important to understand that the various video hosting and ad platforms our videos are deployed to may not fully support the required accessibility features. These include the ability to toggle on/off captions and audio description (AD) tracks (referred to as "closed-captioning" and "closed audio description"). In cases where a platform may or may not support closed captions and/or AD tracks, we should make sure that these captions and audio described versions of our videos are available in case they are needed. While we do not control the video platforms and their support of closed captions and AD, **we must provide both caption SRT's and audio described versions for all of our videos**. In doing so up front, we are providing due diligence for our clients by providing all assets and video versions that may be required across the various platforms. We also save on production costs by doing the caption and AD generation up front vs. having to go back retroactively generate these files. ### Summary For digital video that may appear online - All prerecorded videos that convey important visual context or scenarios that are not communicated via audio **must** provide audio description in order to accommodate people with vision impairments. - We **should** always create AD versions of our videos, as it is cheaper to create them up front, and in the event that they are needed later, we have them immediately available. 3Play offers an AD transcription service, which we have used exclusively. - We **must** publish the AD versions of our videos if the platform has the following: * User Configurable AD - the AD track can be enabled or disabled by the user * Multiple Version Support - we have the ability to publish a separate open AD version (AD is baked-in to the video and cannot be turned off) and provide a link for people watching one version of the video to navigate to the other * **Note:** we should not force all viewers to hear the AD version * If a platform is exempt per the CitiWay Playbook, then we do not need to provide the AD version for distribution on that platform. - For Citi-owned websites or accounts (e.g. Citi's YouTube channel), we **must** provide an AD option for all videos. ### Citi Accessibility Playbook Citi's accessibility partner Deque provides an updated guide that includes various exceptions to some of the WCAG rules. Videos created by P1T for Citi appear on a variety of platforms, including: - Citi-owned web properties (e.g. Citi's Life and Money) - Video ads (fixed-length) for social platforms (e.g. TikTok, Facebook, SnapChat) - Television ads (fixed-length) - Free-form videos (Citi's YouTube channel) At a minimum, provide all versions of the video, including Open Captioned and Open AD versions. See [the latest version of the Playbook on Box](https://lion.app.box.com/folder/57792805106). ## Caption and Audio Decription (AD) Best Practices Video service providers like 3PlayMedia can generate captions and AD tracks on request. It is highly recommended that our production teams utilize these services to provide the required SRT and AD track files. Caption and AD best Practices from [3PlayMedia.com](http://www.3PlayMedia.com): ### Caption Timing and Positioning - Each caption frame should hold 1 to 3 lines of text onscreen at a time, viewable for a duration of 3 to 7 seconds. - Each line should not exceed 32 characters. - Each caption frame should be replaced by another caption. - All caption frames should be precisely time-synced to the audio. - A caption frame should be re-positioned if it obscures onscreen text or other essential visual elements. ### Caption Style and Formatting - Spelling should be at least 99% accurate. - Solo speaking voice: when only one speaking voice is present, there is no need to identify that voice. - Multiple speaking voices: when multiple speakers are present, identify who is speaking, especially when the video does not make this clear. - If one speaker says multiple lines of dialogue, only the first line needs to identify the speaker, and only when there is a change of speakers. Subsequent lines of dialogue by the same speaker do not need to explicitly identify the speaker as it is implied that the same person is speaking. - Example: - John: I'm heading to the store now - do you need anything? - Paul: No thanks, I have everything I need to make dinner. - Oh wait - can you grab some celery? <-- no need to repeat "Paul" at the beginning of this line, as Paul was the last identified speaker - Both upper and lowercase letters should be used. - The font should be a non-serif, such as Helvetica medium. - Non-speech sounds like [MUSIC] or [LAUGHTER] should be added in square brackets. - Punctuation should be used for maximum clarity in the text, not necessarily for textbook style. - Captions should preserve and identify slang or accents. - Open captions ("burned in" captions) should be a minimum of 4% of the video resolution height. - E.g. the minimum caption font size for a 1960px tall video is (1960px * .04) **78.4px** - Note: this is based on YouTube/WWGD (what would Google do). YT captions are always ~4% of the video height at 100% caption font size. - Open caption text must have at least a 70% opacity black background behind it. ### Audio Description: When To Describe Example Audio description is required when important information is visually shown on the screen that cannot be observed by a blind or vision-impaired individual. From [the UC Berkeley **Web Access** site](https://webaccess.berkeley.edu/resources/tips/audio-description): Example scenario: * An object is shown on the screen that is not referred to verbally but has importance to the information being conveyed. * One of the participants on the screen points to a clearly identifiable object, i.e., a smoking gun and says "Is that the weapon?" * At no time does the character say the word "gun" or the fact that the gun is "smoking." * The listener is not able to determine the object being referred to, so audio description could help. * However, if the actor had said anything about the smoking gun and indicated verbally like "that smoking gun must be the weapon" there is no need to describe the visuals. Also, from 3PlayMedia.com: > When describing, it is important to focus on what is **essential** for the listener to know in terms of plot development and character. For instance, this includes who is on-stage or on-screen, who is speaking, the setting and scene – including entrances and exits, furnishings, furniture, etc. – the lighting, costumes, facial expressions, movements, actions, mannerisms, gestures, fights, and dances. > Prioritization of what to describe is greatly dependent on the time allotted as well as how relevant and appropriate the information is in terms of the audience’s understanding of the content. > Remember that people are relying on the description to consume the content and your description should never be confusing or misleading, nor should it distract from the original source. High quality description enhances and complements the media to make it even better and easily understood. See: - [3PlayMedia - Closed Caption Best Practices](https://www.3playmedia.com/resources/popular-topics/closed-captioning/) - [3PlayMedia - Audio Description Best Practices](https://www.3playmedia.com/resources/popular-topics/audio-description/) - [UC Berkley - Captioning Standards](https://onlinelearning.berkeley.edu/courses/433559/pages/captioning-standards-and-best-practices) - [Guidelines and Best Practices for Captioning Educational Video](https://dcmp.org/learn/captioningkey) ## Video Checklist ### Visual Design <section> **Text Color Contrast Ratio** *(visual-02)*: The color contrast ratio of live text, informational images, and images of text to their backgrounds must be at least 4.5:1, except if the text is 18 point or 14 point bold or larger, where a ratio of 3:1 is then required. - ***Video Production:** Ensure that the color contrast of any pertinent text vs. its background meets the minimum color contrast requirements. If text or a background behind the text is in motion, ensure that there is a long enough pause for a viewer to read the text while the minimum text-to-background color contrast ratio is sufficient. Manually text the contrast ratio using [Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)* </section> <section> **Text Over Complex Background** *(visual-03)*: Text displayed on top of a complex background (e.g. gradient, photograph, illustration) must be presented in a way that complies with the color contrast requirements. Read the [Nielsen Norman Group Article on "Text Over Images"](https://www.nngroup.com/articles/text-over-images/) - ***Video Production:** The design comps indicate a visual treatment for text displayed over a complex, dynamic background that meets the color contrast requirements.* </section> <section> **No Use of Color Alone** *(visual-04)*: Color by itself **must not** be used to convey pertinent meaning in the UI. Color should be used to improve an already accessible experience. - ***Video Production:** The use of color should be used to visually enhance an experience that is already accessible.* </section> --- ### Reduce Distraction <section> **No Blinking or Flashing Content** *(distraction-02)*: Content that blinks or flashes between 2Hz and 55Hz must never be used. - ***Video Production:** Ensure that no sequence in the video timeline displays any flashing of colors or alternating brightness between 2Hz and 55Hz. Use a tool like the [Photosensitive Epilepsy Analysis Tool (PEAT)](https://trace.umd.edu/peat) to test any questionable sequences.* </section> --- ### Audio/Video Content and Players Provide captions and audio description for time-based video and audio media (and an accessible player). General guidelines: - *any pertinent visual content must have a descriptive audio equivalent* - audio description to provide pertinent visual context - *any pertinent audio content must have a descriptive visual equivalent* - visual text captions to show voice dialog, pertinent song lyrics or the general presence of music or other background audio that help set the tone and provide context <section> **Captions for Video** *(audio-video-01)*: Pertinent video content with audio must include accurate captions that are timed to appear reasonably in sync with the audio. Alternately, if captions are not supported, it is sufficient to provide a transcript of the audio. - ***Production:** Ensure the availability of descriptive captions that reflect the timing and context of voice and ambient audio for caption users. Captions should be documented using the SRT format. YouTube provides an simple editing tool as well. More info: https://www.youtube.com/watch?v=LCZ-cxfxzvk* </section> <section> **Audio Description for Video** *(audio-video-02)*: If video content provides any information visually that is not described by an accompanying audio track, it must also include an Audio Description track that fully explains the visual information. The goal of audio description is to translate any pertinent visual cues or information to an audible format for the benefit of vision impaired users. - ***Production:** Ensure that a descriptive audio track is available that describes pertinent visual information, such as on screen text, or scenic information or visual activity that helps establish tone and context.* </section> ### Multimedia Accessibility Decision Matrix | | | | | | | --- | --- | --- | --- | --- | | | Captions | Transcript | Audio Descriptions (AD) | Sign Language | | Pre-recorded Multimedia | * A: MUST<br>* AA: MUST<br>* AAA: MUST | * A: SHOULD<br>* AA: SHOULD<br>* AAA: MUST | * A: MUST<br>* AA: MUST<br>* AAA: MUST | * A: MAY<br>* AA: MAY<br>* AAA: MUST | | Pre-recorded Video-only | n/a | * A: SHOULD<br>* AA: SHOULD<br>* AAA: MUST | * A: MUST<br>* AA: MUST<br>* AAA: MUST | n/a | | Pre-recorded Audio-only | n/a | * A: MUST<br>* AA: MUST<br>* AAA: MUST | n/a | * A: MAY<br>* AA: MAY<br>* AAA: MAY | | Live Multimedia | * A: SHOULD<br>* AA: MUST<br>* AAA: MUST | n/a | * A: MAY<br>* AA: MAY<br>* AAA: MAY | * A: MAY<br>* AA: MAY<br>* AAA: MAY | | Live Video-only | n/a | * A: MAY<br>* AA: MAY<br>* AAA: MUST | * A: MAY<br>* AA: MAY<br>* AAA: MAY | n/a | | Live Audio-only | * A: MAY<br>* AA: MAY<br>* AAA: MUST*<br><br>\* AAA: Captions OR Transcript | * A: MAY<br>* AA: MAY<br>* AAA: MUST*<br><br>\* AAA: Captions OR Transcript | n/a | * A: MAY<br>* AA: MAY<br>* AAA: MAY |