How to embed YouTube videos while ensuring accessibility WCAG compliance

Learn how to embed YouTube videos while ensuring accessibility and WCAG compliance. Follow our step-by-step guide for a more inclusive website.

To determine whether embedded YouTube videos are compliant with the Web Content Accessibility Guidelines (WCAG), it’s essential to consider several factors related to accessibility features and best practices.

To make a YouTube embed WCAG (Web Content Accessibility Guidelines) compliant, we need to consider several aspects of accessibility. Here’s a step-by-step guide on how to achieve this:

Summary of the key points

• Add title attribute: include a title attribute in the iframe to enhance accessibility for screen readers.
• Use accurate captions: ensure captions are accurate and synchronized, as automatic captions may not meet WCAG standards.
• Provide audio descriptions: include audio descriptions for videos with critical visual content to assist users with visual impairments.
• Ensure text contrast: use a high contrast color scheme for video player controls and text to improve readability.
• Manage keyboard shortcuts: implement a way to disable or remap keyboard shortcuts in the embedded player to enhance usability.
• Avoid autoplay: prevent autoplay of videos to allow users control over audio playback, complying with WCAG audio control guidelines.
• Keep YouTube controls: retain YouTube’s default video controls to ensure users can easily navigate the video.
• Enable full-screen option: allow users to access the full-screen feature to enhance viewing without scrolling.
• Retain YouTube logo: keep the YouTube logo visible for consistent identification and easy access to the video on YouTube or the app.
• Manage language: add subtitles in all relevant languages and specify the language of the page to ensure accessibility for diverse users.
• Set interface language: match the interface language of the video with the webpage language for consistency and a better user experience.

Add title attribute

Use the iframe embed code provided by YouTube, which includes the title attribute and allows for keyboard navigation. This relates to WCAG Success Criteria 4.1.2.

Captions

YouTube supports closed captions, which are crucial for accessibility. However, automatic captions generated by YouTube are frequently inaccurate, which can hinder compliance. For WCAG compliance, captions must be accurate and properly synchronized with the video content. This relates to WCAG Success Criteria 1.2.2.

Audio descriptions

If the video contains critical visual information, consider providing audio descriptions to ensure that users with visual impairments can fully understand the content. This relates to WCAG Success Criteria 1.2.3 and WCAG Success Criteria 1.2.5.

Ensure contrast for text in the video

Use a high contrast color scheme to make the video player controls and text readable. This relates to WCAG Success Criteria 1.4.3.

Manage keyboard shortcuts

In the context of embedded YouTube videos, the keyboard shortcuts (such as spacebar to play/pause, arrow keys to seek, etc.) are implemented using single-key characters. To meet WCAG Success Criteria 2.1.4, it is recommended to provide a way to turn off or remap these keyboard shortcuts. By adding the disablekb=1 parameter to the iframe embed code, we are effectively turning off the keyboard shortcuts for the YouTube video player, which meets the “Turn off” requirement of WCAG Success Criteria 2.1.4.

However, it’s worth noting that this approach may not be sufficient for all users, and providing a way to remap the keyboard shortcuts may be a more comprehensive solution.

Don’t use autoplay

YouTube embed videos with autoplay can be a concern for accessibility, specifically with regards to WCAG Success Criteria 1.4.2 (Audio Control) and 2.2.2 (Pause, Stop, Hide).

WCAG Success Criteria 1.4.2 states that:

For video with audio lasting more than 3 seconds, either there is no audio or the audio can be paused or stopped by the user, unless the primary function of the page is to convey sounds that are clearly labeled as such.

Autoplaying videos with audio can be a problem for users who may not be able to hear the audio or may be startled by it. To meet this criterion, it’s recommended to provide a way for users to pause or stop the audio.

WCAG Success Criteria 2.2.2 states that:

For moving, blinking, scrolling, or auto-updating information, all of the following are true:

• Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
• Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Autoplaying videos can be considered as moving or auto-updating information, and to meet this criterion, it’s recommended to provide a way for users to pause, stop, or hide the video.

To address these concerns, you can consider the following:

• Add the autoplay=0 parameter to the iframe embed code to prevent the video from autoplaying.
• Add the mute=1 parameter to the iframe embed code to mute the audio by default.
• Provide a clear and accessible way for users to play, pause, or stop the video, such as a play button or a pause button.
• Consider using a third-party library, if necessary, or plugin to provide additional accessibility features, such as keyboard navigation or screen reader support.

Here’s an example of the updated iframe embed code:

<iframe title="Video Title" aria-label="Video Title" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=0&mute=1" frameborder="0" allowfullscreen></iframe>

Replace VIDEO_ID with the actual ID of the YouTube video you want to embed.

Keep YouTube video embed controls

To keep the YouTube video embed controls and meet the WCAG Success Criteria 2.1.1 (Keyboard) and WCAG Success Criteria 2.1.2 (No Keyboard Trap), you can consider adding the controls=1 parameter to the iframe embed code to ensure that the video controls are visible.

Keep full-screen option available

Keeping the full-screen option available and setting it to YouTube’s default (parameter fs=1) is related to WCAG Success Criteria 1.4.10 (Reflow) and WCAG Success Criteria 2.1.1 (Keyboard).

WCAG Success Criteria 1.4.10 states that:

Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions for:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels;
• Except for parts of the content which require a two-dimensional layout for usage or meaning.

By keeping the full screen option available, you ensure that users can view the video in a larger size, which can help to meet this criterion by reducing the need for scrolling.

WCAG Success Criteria 2.1.1 states that:

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.

By keeping the full screen option available, you ensure that users can access this feature using a keyboard interface, which meets this criterion.

Retain the YouTube logo for easy access to the video on YouTube or the YouTube app

Keeping the YouTube logo and setting it to YouTube’s default (modestbranding=0) is related to WCAG Success Criteria 3.2.4 (Consistent Identification) and WCAG Success Criteria 4.1.2 (Name, Role, Value).

WCAG Success Criteria 3.2.4 states that:

Components that have the same functionality within a set of Web pages are identified consistently.

By keeping the YouTube logo, you ensure that the video is consistently identified as a YouTube video, which meets this criterion.

WCAG Success Criteria 4.1.2 states that:

For all user interface components (including but not limited to: form elements, links, and script-generated components), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

By keeping the YouTube logo, you ensure that the video is properly identified and labeled, which meets this criterion.

Manage language

Add subtitles for every used language to the video

Adding subtitles for every used language to the video and using the cc_lang_pref parameter to specify the language of the page relates to WCAG Success Criteria 1.2.2 (Captions (Prerecorded)) and WCAG Success Criteria 3.1.2 (Language of Parts).

WCAG Success Criteria 1.2.2 states that:

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

By adding subtitles for every used language, you ensure that the video is accessible to users who may not be able to hear the audio or may prefer to read the text, which meets this criterion.

WCAG Success Criteria 3.1.2 states that:

A mechanism is available for identifying the language of each passage or phrase in the content. The language of each passage or phrase can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

By using the cc_lang_pref parameter to specify the language of the page, you ensure that the language of the subtitles is properly identified and can be programmatically determined, which meets this criterion.

Set the interface language to match the language used on the webpage

Setting the language of the interface to the language of the webpage relates to WCAG Success Criteria 3.1.1 (Language of Page) and WCAG Success Criteria 3.1.2 (Language of Parts).

WCAG Success Criteria 3.1.1 states that:

The default human language of each Web page can be programmatically determined.

By setting the language of the interface to the language of the webpage, you ensure that the language of the interface is consistent with the language of the webpage, which meets this criterion.

WCAG Success Criteria 3.1.2 states that:

A mechanism is available for identifying the language of each passage or phrase in the content. The language of each passage or phrase can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

By setting the language of the interface to the language of the webpage, you ensure that the language of the interface is properly identified and can be programmatically determined, which meets this criterion.

Important: when you access a Czech website in a browser with an English interface, the embedded YouTube will automatically select the browser’s interface language rather than the website’s language. This will make it difficult for Czechs to control the video.