Multimedia Accessibility – C# Examples

Accessible Multimedia

Multimedia web accessibility refers to ensuring that multimedia content, such as videos, audio files, and interactive presentations, is accessible to all individuals, including those with disabilities. Multimedia content is prevalent on the internet, and everyone must access and understand the information conveyed. Accessible media must meet all the needs of people with disabilities and must include:

• Captions are text versions of the audio content synchronized with the video. They are essential for people who are deaf or hard of hearing and also benefit individuals learning a new language or those in noisy environments.
• Transcripts are text transcripts of the spoken content in a video or audio file that allows users to access the information in a text format. This is valuable for individuals who cannot hear the audio and for search engine optimization.
• Audio Descriptions – are narrations that describe visual content within a video or presentation. They are essential for individuals who are blind or visually impaired and help them understand the visual elements of the content.
• Player Controls are accessible controls that allow users to pause, play, rewind, and adjust volume using keyboard shortcuts or assistive technologies.
• Keyboard Accessibility is when interactive elements within multimedia content are navigable and usable with a keyboard. This includes buttons, links, and menus.

The accessible multimedia is customized for assistive technologies. This means that blind people no longer have to rely on others to read to them. They simply open the browser and interact with the content on their own, as screen reader software is designed to read online content out loud.

Without a caption for an audio file, deaf people cannot recognize the meaningful information that the audio conveys. But captions, if they are well-written and synchronized with the audio content, provide descriptions of critical visual details and actions in multimedia.

We already covered how to check alt text for images, buttons, and more in the Screen Reader Accessibility article. Here, we will look at the importance of using a <track> element for multimedia accessibility.

<track> Element to Provide Audio & Video Descriptions

Video content cannot be seen by visually impaired people, and audio content cannot be heard by hearing-impaired people. The primary purpose of the <track> element is to provide captions and subtitles for video and audio content. While it’s not intended for providing audio descriptions directly, it can be used in conjunction with other methods to make audio descriptions available for individuals with visual impairments.

Captions for Video

The use of the video alt text is not a standard or recommended practice in HTML. The alt attribute is primarily used for providing alternative text for images and is not intended for <video> elements. However, there are alternative approaches to making video content accessible.

Captions in the video include a textual description of all essential background noises and other sounds and the text of all dialogue and narration. The <video> element must include a <track> element with kind="captions" property. Captions must convey all relevant auditory information in the video, including dialogue, musical cues, sound effects, and other vital data for deaf users.

Here’s how you can use the <track> element for multimedis accessibility:

<video poster="myvideo.png" controls>
    <source src="myvideo.mp4" srclang="en" type="video/mp4">
    <source src="myvideo.webm" srclang="fr" type="video/webm">
    <source src="myvideo.webm" srclang="ua" type="video/webm"> 
    <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
    <track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
    <track src="mvideo_ua.vtt" kind="captions" srclang="ua" label="Ukrainian">
</video>

Let’s look at line 5 of the HTML code. The src attribute of the <track> element specifies the track file name and points to the WebVTT file (“myvideo_en.vtt”) containing the captions or subtitles. The kind attribute describes the contents of the file. The srclang attribute specifies the language of the track file. The label attribute specifies the track name. None of these attributes, except src, are required. However, they are highly recommended as they improve clarity.

Captions for Audio

Ensure all elements with audio content on the website have a caption using the <track> element with kind="captions" property. Captions are text—synchronized with the audio file—of the dialog, narration, and any important auditory information, for the benefit of deaf users. The following code shows how to add two different tracks – one in English and one in Spanish:

<audio>
   <source src="mySpeech.mp3" type="audio/mp3">
   <track src="captions_en.vtt" kind="captions" srclang="en" label="english_captions">
   <track src="captions_es.vtt" kind="captions" srclang="es" label="spanish_captions">
</audio>

Audio Description for <video> elements

Adding audio descriptions to <video> elements is a crucial accessibility practice, ensuring that individuals with visual impairments can fully understand and enjoy video content. While blind people can hear the audio content of videos with no issue, they miss the visual aspects of films, such as facial expressions and scenes. Many things happen in movies that are completely visual, with no auditory component. For example, a person can make a facial expression but not speak. Audio descriptions provide narrated information about the visual elements of a video, such as scenes, actions, and gestures.

The following code shows how to add two different audio descriptions – one in English and one in Spanish:

<video width="300" height="200">
    <source src="myVideo.mp4" type="video/mp4">
    <track src="audio_desc_en.vtt" kind="descriptions" srclang="en" label="english_description">
    <track src="audio_desc_es.vtt" kind="descriptions" srclang="es" label="spanish_description">
</video>

Check Multimedia Accessibility with Aspose.HTML

To check your website for the multimedia accessibility criteria, you need to follow these steps:

1. Use the WebAccessibility() constructor to create an instance of the WebAccessibility class responsible for web accessibility validation.
2. Use the Rules property of the webAccessibility object that provides access to a collection of web accessibility rules.
   • Call the GetPrinciple() method of the AccessibilityRules class and GetGuideline() method of the Principle class to get required principle by code from WCAG.
3. Call the CreateValidator() method to create a validator object. You are essentially setting up a validator that will check web content against the specific accessibility guidelines and success criteria associated with the guideline you’ve specified.
4. Load an HTML document using one of the HTMLDocument() constructors.
5. Use the Validate(document) method to check the HTML document for accessibility. The result is stored in the validationResult variable.
6. Check whether the validation was successful. Print the detailed information about errors, including the associated HTML element.

In this example, you can check an HTML document for compliance with all the criteria in the “1.2 Time-based Media” guideline.

// Initialize a webAccessibility container
var webAccessibility = new WebAccessibility();

// Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");

//Create an accessibility validator, pass the found guideline as parameters, and specify the full validation settings
var validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);

// Initialize an HTMLDocument object
using (var document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0&t=4s"))
{
    // Check the document
    var validationResult = validator.Validate(document);

    // Checking for success
    if (!validationResult.Success)
    {
        // Get all result details
        foreach (var ruleResult in validationResult.Details)
        {
            // If the result of the rule is unsuccessful
            if (!ruleResult.Success)
            {

                // Get an errors list
                foreach (var result in ruleResult.Errors)
                {
                    // Check the type of the erroneous element
                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
                    {
                        var rule = (HTMLElement)result.Error.Target.Item;
                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
                    }
                }
            }
        }
    }
}

To check, for example, the presence of audio description, you must select the desired criterion and make a check on it.

    // Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");

    // Get criterion – 1.2.3 Audio Description or Media Alternative (Prerecorded)
    var criterion = guideline.GetCriterion("1.2.3");
    
    // Create an accessibility validator – and pass the found guideline as parameters and specify the full validation settings
    var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);

    ...

Remember that the key is to ensure that users with disabilities can access the multimedia content and understand its context effectively. Combining multiple accessibility techniques, such as captions, transcripts, and audio descriptions, can provide all users with a comprehensive and inclusive experience.

See Also

• H95: Using the track element to provide captions
• H96: Using the track element to provide audio descriptions
• H53: Using the body of the object element
• H46: Using noembed with embed