Веб-доступность Мультимедиа – Как проверить на 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>

Проверка доступности мультимедиа

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

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

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

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

Example-ValidateMultimediaAccessibility.cs 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    ...

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

Смотрите также

В главе Проверка доступности веб-сайта вы узнаете, как проверить доступность веб-сайта на соответствие всем WCAG или только определенным критериям, используя классы и методы пространств имен Aspose.Html.Accessibility и Aspose.Html.Accessibility.Results.
В статье Как улучшить доступность веб-сайта объясняется, как сделать ваш веб-сайт доступным для пользователей и как проверить ваш веб-сайт на соответствие WCAG, используя API Aspose.HTML for .NET.
Статья Альтернативный Текст – Веб-доступность объясняет, как разработать веб-сайт для доступности экранного ридера в соответствии с рекомендациями WCAG с использованием API Aspose.HTML for .NET.
В статье Валидатор доступности вы узнаете о классе AccessibilityValidator, который можно использовать для проверки правил доступности веб-сайтов, таких как принципы, руководства и критерии.
В статье Правила веб-доступности вы узнаете, как использовать класс AccessibilityRules, который является репозиторием требований WCAG 2, критериев успеха и методов для проверок веб-доступности.

Aspose.HTML предлагает бесплатный онлайн-сервис Проверка веб-доступности. Этот инструмент сканирует веб-страницы, проверяет их на соответствие WCAG, выявляет проблемы и предлагает улучшения. Получайте мгновенную информацию о соответствии вашего веб-сайта требованиям, что позволит вам определить объем необходимых исправлений и разрыв между текущим состоянием вашего веб-сайта или HTML-документа и требованиями WCAG.

Доступность цветового контраста Обработчики сообщений