Веб-доступность Мультимедиа – примеры C#

Доступные мультимедиа

Веб-доступность мультимедиа означает обеспечение доступности мультимедийного контента, такого как видео, аудиофайлы и интерактивные презентации, для всех людей, включая людей с ограниченными возможностями. Мультимедийный контент широко распространен в Интернете, и каждый должен иметь доступ к передаваемой информации и понимать ее. Доступные средства массовой информации должны отвечать всем потребностям людей с ограниченными возможностями и должны включать:

Субтитры — это текстовые версии аудиоконтента, синхронизированные с видео. Они необходимы глухим или слабослышащим людям, а также приносят пользу людям, изучающим новый язык или тем, кто находится в шумной обстановке.
Стенограммы – это текстовые расшифровки произнесенного содержания в видео- или аудиофайле, которые позволяют пользователям получать доступ к информации в текстовом формате. Это ценно для людей, которые не слышат звук, а также для поисковой оптимизации.
Аудиоописания – это комментарии, описывающие визуальный контент в видео или презентации. Они необходимы слепым или слабовидящим людям и помогают им понять визуальные элементы контента.
Элементы управления проигрывателем — это доступные элементы управления, которые позволяют пользователям приостанавливать, воспроизводить, перематывать назад и регулировать громкость с помощью сочетаний клавиш или вспомогательных технологий.
Доступность клавиатуры – это когда интерактивные элементы в мультимедийном контенте доступны для навигации и использования с помощью клавиатуры. Сюда входят кнопки, ссылки и меню.

Доступные мультимедиа настроены для вспомогательных технологий. Это означает, что слепым больше не придется полагаться на то, что другие будут им читать. Они просто открывают браузер и самостоятельно взаимодействуют с контентом, поскольку программное обеспечение для чтения с экрана предназначено для чтения онлайн-контента вслух.

Без подписи к аудиофайлу глухие люди не смогут распознать содержательную информацию, которую передает аудиофайл. Но субтитры, если они хорошо написаны и синхронизированы с аудиоконтентом, обеспечивают описание важных визуальных деталей и действий в мультимедиа.

Мы уже рассказывали, как проверить замещающий текст для изображений, кнопок и т. д., в статье Альтернативный Текст – Веб-доступность. Здесь мы рассмотрим важность использования элемента <track> для веб-доступности мультимедиа.

Элемент `<track>` для предоставления описания аудио и видео

Видеоконтент не может быть просмотрен людьми с нарушениями зрения, а аудиоконтент не может быть услышан людьми с нарушениями слуха. Основная цель элемента <track> – предоставить титры и субтитры для видео- и аудиоконтента. Хотя он не предназначен для непосредственного предоставления аудиоописаний, его можно использовать в сочетании с другими методами, чтобы сделать аудиоописания доступными для людей с нарушениями зрения.

Субтитры к видео

Использование замещающего текста видео не является стандартной или рекомендуемой практикой в HTML. Атрибут alt в основном используется для предоставления альтернативного текста изображениям и не предназначен для элементов <video>. Однако существуют альтернативные подходы к обеспечению доступности видеоконтента. Субтитры в видео включают текстовое описание всех основных фоновых шумов и других звуков, а также текст всех диалогов и повествования. Элемент <video> должен включать элемент <track> со свойством kind="captions". Субтитры должны передавать всю необходимую звуковую информацию в видео, включая диалоги, музыкальные реплики, звуковые эффекты и другие важные данные для глухих пользователей.

Вот как вы можете использовать элемент <track> для доступности мультимедиа:

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

Давайте посмотрим на строку 5 HTML-кода. Атрибут src элемента <track> определяет имя файла дорожки и указывает на файл WebVTT (“myvideo_en.vtt”), содержащий титры или субтитры. Атрибут kind описывает содержимое файла. Атрибут srclang определяет язык файла трека. Атрибут label указывает имя трека. Ни один из этих атрибутов, кроме src, не является обязательным. Тем не менее, их настоятельно рекомендуется использовать, поскольку они улучшают ясность и доходчивость.

Субтитры к аудио

Убедитесь, что все элементы с аудиоконтентом на веб-сайте имеют подпись, используя элемент <track> со свойством kind="captions". Субтитры представляют собой текст диалога, повествования и любой важной звуковой информации, синхронизированный с аудиофайлом, для глухих пользователей. Следующий код показывает, как добавить две разные дорожки – одну на английском и одну на испанском языке:

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

Аудиоописание для элементов `<video>`

Добавление аудиоописаний к элементам <video> – это важнейшая практика обеспечения доступности, гарантирующая, что люди с нарушениями зрения смогут полностью понять видеоконтент и насладиться им. Хотя слепые люди могут без проблем слышать аудиоконтент видео, они упускают из виду визуальные аспекты фильмов, такие как выражение лица и сцены. Многие вещи в фильмах происходят полностью визуально, без звукового компонента. Например, человек может что-то передавать мимикой, но не говорить. Аудиоописания предоставляют повествовательную информацию о визуальных элементах видео, таких как сцены, действия и жесты.

Следующий код показывает, как добавить два разных аудиоописания к видео – одно на английском и одно на испанском языке:

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

Проверьте доступность мультимедиа с помощью Aspose.HTML

Чтобы проверить свой сайт на соответствие критериям веб-доступности мультимедиа, вам необходимо выполнить следующие действия:

Используйте конструктор WebAccessibility(), чтобы создать экземпляр класса WebAccessibility, ответственного за проверку веб-доступности.
Используйте свойство Rules объекта webAccessibility, которое обеспечивает доступ к набору правил веб-доступности.
- Вызовите метод GetPrinciple() класса AccessibilityRules и метод GetGuideline() класса Principle, чтобы получить требуемый принцип по коду из WCAG.
Вызовите метод CreateValidator(), чтобы создать объект валидатора. По сути, вы настраиваете валидатор, который будет проверять веб-контент на соответствие конкретным рекомендациям по доступности и критериям успеха, связанным с указанным вами руководством.
Загрузите HTML-документ, используя один из конструкторов HTMLDocument().
Используйте метод Validate(document), чтобы проверить HTML-документ на доступность. Результат сохраняется в переменной validationResult.
Проверьте, прошла ли проверка успешно. Распечатайте подробную информацию об ошибках, включая связанный элемент HTML.

В этом примере вы можете проверить HTML-документ на соответствие всем критериям рекомендации «1.2 Time-based Media».

 1// Initialize a webAccessibility container
 2var webAccessibility = new WebAccessibility();
 3
 4// Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 5var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 6
 7//Create an accessibility validator, pass the found guideline as parameters, and specify the full validation settings
 8var validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
 9
10// Initialize an HTMLDocument object
11using (var document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0&t=4s"))
12{
13    // Check the document
14    var validationResult = validator.Validate(document);
15
16    // Checking for success
17    if (!validationResult.Success)
18    {
19        // Get all result details
20        foreach (var ruleResult in validationResult.Details)
21        {
22            // If the result of the rule is unsuccessful
23            if (!ruleResult.Success)
24            {
25
26                // Get an errors list
27                foreach (var result in ruleResult.Errors)
28                {
29                    // Check the type of the erroneous element
30                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
31                    {
32                        var rule = (HTMLElement)result.Error.Target.Item;
33                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
34                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
35                    }
36                }
37            }
38        }
39    }
40}

view raw Example-ValidateMultimedia hosted with ❤ by GitHub

Чтобы проверить, например, наличие аудиоописания, необходимо выбрать нужный критерий и произвести по нему проверку.

 1    // Get from the rules list Principle "1.Perceivable" by code "1" and get guideline "1.2 Time-based Media"
 2    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.2");
 3
 4    // Get criterion – 1.2.3 Audio Description or Media Alternative (Prerecorded)
 5    var criterion = guideline.GetCriterion("1.2.3");
 6    
 7    // Create an accessibility validator – and pass the found guideline as parameters and specify the full validation settings
 8    var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
 9
10    ...

Помните, что главное – обеспечить, чтобы пользователи с ограниченными возможностями могли получить доступ к мультимедийному контенту и эффективно понимать его контекст. Сочетание нескольких методов обеспечения доступности, таких как субтитры, стенограммы и аудиоописания, может предоставить всем пользователям комплексный и инклюзивный опыт.