Multimedia-Zugänglichkeit – Überprüfung in C#

Zugängliche Multimedia

Multimediale Webzugänglichkeit bedeutet, dass multimediale Inhalte wie Videos, Audiodateien und interaktive Präsentationen für alle Menschen, auch für Menschen mit Behinderungen, zugänglich sind. Multimediale Inhalte sind im Internet weit verbreitet, und jeder muss auf die vermittelten Informationen zugreifen und sie verstehen können. Zugängliche Medien müssen allen Bedürfnissen von Menschen mit Behinderungen gerecht werden und Folgendes beinhalten:

Untertitel sind Textversionen des Audioinhalts, die mit dem Video synchronisiert sind. Sie sind wichtig für gehörlose oder schwerhörige Menschen und kommen auch Personen zugute, die eine neue Sprache lernen oder sich in lauten Umgebungen aufhalten.
Transkripte sind Texttranskripte des gesprochenen Inhalts einer Video- oder Audiodatei, die es den Nutzern ermöglichen, die Informationen in einem Textformat abzurufen. Dies ist nützlich für Personen, die den Ton nicht hören können, und für die Suchmaschinenoptimierung.
Audiobeschreibungen – sind Erzählungen, die visuelle Inhalte in einem Video oder einer Präsentation beschreiben. Sie sind für blinde oder sehbehinderte Personen wichtig und helfen ihnen, die visuellen Elemente des Inhalts zu verstehen.
Player Controls sind zugängliche Steuerelemente, die es Nutzern ermöglichen, die Wiedergabe anzuhalten, zurückzuspulen und die Lautstärke mit Hilfe von Tastenkombinationen oder assistiven Technologien anzupassen.
Tastaturzugänglichkeit bedeutet, dass interaktive Elemente in Multimedia-Inhalten mit einer Tastatur navigierbar und nutzbar sind. Dazu gehören Schaltflächen, Links und Menüs.

Die zugänglichen Multimedia-Inhalte sind für unterstützende Technologien angepasst. Das bedeutet, dass blinde Menschen nicht mehr darauf angewiesen sind, dass andere ihnen vorlesen. Sie öffnen einfach den Browser und interagieren selbst mit den Inhalten, denn die Screenreader-Software ist so konzipiert, dass sie Online-Inhalte laut vorliest.

Ohne einen Untertitel für eine Audiodatei können Gehörlose die bedeutungsvollen Informationen, die der Ton vermittelt, nicht erkennen. Aber Untertitel, wenn sie gut geschrieben und mit dem Audioinhalt synchronisiert sind, bieten Beschreibungen von wichtigen visuellen Details und Aktionen in Multimedia.

Wir haben bereits im Artikel Zugänglichkeit von Bildschirmlesegeräten behandelt, wie man den Alt-Text für Bilder, Schaltflächen und mehr überprüft. Hier werden wir uns die Bedeutung der Verwendung des Elements <track> für die Zugänglichkeit von Multimedia ansehen.

`<track>`-Element zur Bereitstellung von Audio- und Videobeschreibungen

Videoinhalte können von sehbehinderten Menschen nicht gesehen und Audioinhalte von hörgeschädigten Menschen nicht gehört werden. Der Hauptzweck des Elements <track> ist die Bereitstellung von Untertiteln für Video- und Audioinhalte. Es ist zwar nicht für die direkte Bereitstellung von Audiobeschreibungen gedacht, kann aber in Verbindung mit anderen Methoden verwendet werden, um Audiobeschreibungen für Personen mit Sehbehinderungen verfügbar zu machen.

Untertitel für Videos

Die Verwendung des Video-Alt-Textes ist kein Standard oder eine empfohlene Praxis in HTML. Das alt-Attribut wird in erster Linie für die Bereitstellung von Alternativtext für Bilder verwendet und ist nicht für <video>-Elemente gedacht. Es gibt jedoch alternative Ansätze, um Videoinhalte zugänglich zu machen.

Die Untertitel im Video enthalten eine textliche Beschreibung aller wichtigen Hintergrundgeräusche und anderer Töne sowie den Text aller Dialoge und Erzählungen. Das Element <video> muss ein Element <track> mit der Eigenschaft kind="captions" enthalten. Untertitel müssen alle relevanten auditiven Informationen im Video vermitteln, einschließlich Dialogen, musikalischen Hinweisen, Soundeffekten und anderen wichtigen Daten für gehörlose Nutzer.

Hier sehen Sie, wie Sie das Element <track> für die multimediale Zugänglichkeit verwenden können:

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>

Schauen wir uns Zeile 5 des HTML-Codes an. Das src-Attribut des <track>-Elements gibt den Namen der Track-Datei an und verweist auf die WebVTT-Datei (“myvideo_de.vtt”), die die Untertitel enthält. Das Attribut “kind” beschreibt den Inhalt der Datei. Das Attribut srclang gibt die Sprache der Titeldatei an. Das label-Attribut spezifiziert den Namen des Tracks. Keines dieser Attribute, außer src, ist erforderlich. Sie werden jedoch dringend empfohlen, da sie die Übersichtlichkeit verbessern.

Untertitel für Audio

Stellen Sie sicher, dass alle Elemente mit Audioinhalten auf der Website eine Beschriftung haben, indem Sie das Element <track> mit der Eigenschaft kind="captions" verwenden. Untertitel sind Text, der mit der Audiodatei des Dialogs, der Erzählung und aller wichtigen auditiven Informationen synchronisiert ist, zum Nutzen von gehörlosen Benutzern. Der folgende Code zeigt, wie man zwei verschiedene Spuren hinzufügt – eine in Englisch und eine in Spanisch:

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>

Audio-Beschreibung für `<video>`-Elemente

Das Hinzufügen von Audiobeschreibungen zu <video>-Elementen ist eine wichtige Maßnahme, um sicherzustellen, dass Menschen mit Sehbehinderungen Videoinhalte vollständig verstehen und genießen können. Während blinde Menschen den Audioinhalt von Videos problemlos hören können, entgehen ihnen die visuellen Aspekte von Filmen, z. B. Gesichtsausdrücke und Szenen. In Filmen passieren viele Dinge, die rein visuell sind und keine auditive Komponente haben. Zum Beispiel kann eine Person einen Gesichtsausdruck machen, aber nicht sprechen. Audiodeskriptionen liefern erzählte Informationen über die visuellen Elemente eines Videos, wie Szenen, Aktionen und Gesten.

Der folgende Code zeigt, wie man zwei verschiedene Audiobeschreibungen hinzufügt – eine in Englisch und eine in Spanisch:

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>

Überprüfung der Multimedia-Zugänglichkeit mit Aspose.HTML

Um Ihre Website auf die Kriterien der multimedialen Zugänglichkeit zu prüfen, müssen Sie die folgenden Schritte ausführen:

Verwenden Sie den Konstruktor WebAccessibility(), um eine Instanz der Klasse WebAccessibility zu erstellen, die für die Validierung der Barrierefreiheit im Web zuständig ist.
Verwenden Sie die Eigenschaft Rules des Objekts webAccessibility, die den Zugriff auf eine Sammlung von Regeln für die Barrierefreiheit im Web ermöglicht.
- Call the GetPrinciple() method of the AccessibilityRules class and GetGuideline() method of the Principle class to get required principle by code from WCAG.
Rufen Sie die Methode CreateValidator() auf, um ein Validator-Objekt zu erstellen. Im Wesentlichen richten Sie einen Validator ein, der Webinhalte anhand der spezifischen Zugänglichkeitsrichtlinien und Erfolgskriterien prüft, die mit der von Ihnen angegebenen Richtlinie verbunden sind.
Laden Sie ein HTML-Dokument mit einem der HTMLDocument()-Konstruktoren.
Verwenden Sie die Methode Validate(document), um das HTML-Dokument auf Barrierefreiheit zu prüfen. Das Ergebnis wird in der Variablen validationResult gespeichert.
Prüfen Sie, ob die Validierung erfolgreich war. Drucken Sie die detaillierten Informationen über Fehler, einschließlich des zugehörigen HTML-Elements.

In diesem Beispiel können Sie ein HTML-Dokument auf die Einhaltung aller Kriterien der Richtlinie “1.2 Zeitbasierte Medien” prüfen.

 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

Um zum Beispiel das Vorhandensein der Audiodeskription zu prüfen, müssen Sie das gewünschte Kriterium auswählen und es ankreuzen.

 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    ...

Denken Sie daran, dass der Schlüssel darin liegt, sicherzustellen, dass Nutzer mit Behinderungen Zugang zu den multimedialen Inhalten haben und deren Kontext effektiv verstehen können. Die Kombination mehrerer Zugänglichkeitstechniken, wie Untertitel, Transkripte und Audiobeschreibungen, kann allen Nutzern ein umfassendes und integratives Erlebnis bieten.

Siehe auch

Im Kapitel Zugänglichkeitsprüfung erfahren Sie, wie Sie die Zugänglichkeit einer Website auf die Einhaltung der WCAG überprüfen oder nur bestimmte Kriterien erfüllen können, indem Sie die Klassen und Methoden der Namespaces Aspose.Html.Accessibility und Aspose.Html.Accessibility.Results verwenden.
In dem Artikel Wie Sie die Barrierefreiheit von Websites verbessern wird erläutert, wie Sie Ihre Website für Benutzer zugänglich machen und wie Sie Ihre Website mit Hilfe der Aspose.HTML API für .NET auf WCAG-Konformität prüfen können.
Der Artikel Zugänglichkeit für Bildschirmleser erklärt, wie man eine Website für die Zugänglichkeit für Bildschirmleser in Übereinstimmung mit den WCAG-Richtlinien unter Verwendung der Aspose.HTML for .NET API gestaltet.
Schauen Sie sich den Artikel Farbkontrast in C# prüfen an, wenn Sie erfahren möchten, wie Sie den Kontrast Ihrer Webinhalte richtig an die WCAG-Standards, die weltweite Autorität für Barrierefreiheit im Web, anpassen. Sie erfahren, wie Sie die Zugänglichkeit von Farbkontrasten mit C# testen und Ihre Webinhalte für alle Benutzer leicht lesbar machen können.
In dem Artikel Web-Zugänglichkeitsregeln erfahren Sie, wie Sie die Klasse AccessibilityRules, eine Sammlung von WCAG-2-Anforderungen, Erfolgskriterien und Techniken, für Prüfungen der Barrierefreiheit im Web verwenden können.
Der Artikel Fehler und Warnungen beschreibt die Klassen und Schnittstellen, mit deren Hilfe Informationen über Fehler und Warnungen während des Testens der Barrierefreiheit von Websites gesammelt werden können. Er konzentriert sich auf die Fehlerkriterien und Methoden, die Fehler melden, und bietet ein C#-Beispiel zum Abrufen von Fehlern bei der Barrierefreiheit nach dem Testen eines HTML-Dokuments.

Aspose.HTML bietet einen kostenlosen Online- Web-Zugänglichkeits-Checker. Dieses Tool scannt Webseiten, prüft sie auf WCAG-Konformität, identifiziert Probleme und schlägt Verbesserungen vor. Sie erhalten sofortige Einblicke in die Konformität Ihrer Website und können so den Umfang der notwendigen Korrekturen und die Lücke zwischen dem aktuellen Zustand Ihrer Website oder Ihres HTML-Dokuments und den WCAG-Anforderungen bestimmen.

Farbkontrast Zugänglichkeit Fortgeschrittene Programmierung