Screenreader-Barrierefreiheit – Alt-Text in C# prüfen

Screen Reader als unterstützende Technologie

Die Zugänglichkeit von Bildschirmlesegeräten ist ein wichtiger Aspekt der Barrierefreiheit im Internet, der sich darauf konzentriert, digitale Inhalte, insbesondere Websites und Anwendungen, für blinde oder sehbehinderte Menschen zugänglich zu machen.

Ein Bildschirmlesegerät ist eine unterstützende Technologie, die Online-Inhalte laut vorliest. Es wandelt den digitalen Text und die visuellen Inhalte in Sprache oder Braille um, so dass Nutzer mit Sehbehinderungen in digitalen Inhalten navigieren, mit ihnen interagieren und sie verstehen können. Bildschirmlesegeräte werden nicht nur für blinde und sehbehinderte Menschen benötigt, sondern auch für Nutzer mit kognitiven Beeinträchtigungen, denen es leichter fällt, Informationen nach Gehör zu verarbeiten.

Bildschirmlesegeräte können jeden Inhalt auf einer Seite lesen. Zum Beispiel den Text von Absätzen und Überschriften, Listen, alternative Bildbeschreibungen, Links, Optionsschaltflächen und andere interaktive Elemente. Damit Bildschirmlesegeräte Informationen lesen können, die für den Benutzer zugänglich und verständlich sind, ist es daher notwendig, alternativen Text sowie informative Überschriften bereitzustellen.

Nutzen Sie die folgenden Empfehlungen auf der Grundlage der WCAG, um sicherzustellen, dass Ihre Website für Menschen, die auf Bildschirmlesegeräte angewiesen sind, zugänglich ist. Dies ist nicht nur für Menschen mit Behinderungen wichtig. Es verbessert die Benutzerfreundlichkeit für alle und ermöglicht Ihrer Website eine bessere Platzierung in den Suchmaschinenergebnissen.

Alternativer Text

Bildschirmlesegeräte können ein Bild nicht in Worte übersetzen, die dem Benutzer vorgelesen werden, selbst wenn das Bild nur aus Text besteht. Für die Barrierefreiheit im Web müssen Bilder einen kurzen, beschreibenden Alternativtext haben, damit Benutzer von Bildschirmlesegeräten den Inhalt und Zweck des Bildes klar verstehen. Alternativtexte sind nicht nur für Menschen mit Sehproblemen wichtig, sondern erfüllen auch mehrere andere wichtige Funktionen:

• Der Browser zeigt einen alternativen Text anstelle des Bildes an, wenn es nicht geladen oder blockiert ist.
• Suchmaschinen verwenden alternativen Text und berücksichtigen ihn bei der Bewertung von Zweck und Inhalt einer Seite.

Alternativer Text für Bilder - alt-Attribut in img-Tag

Stellen Sie sicher, dass alle informativen <img>-Elemente einen kurzen und beschreibenden Alternativtext haben und alle dekorativen <img>-Elemente leere alt-Attribute haben (z.B. alt=""). Wenn Sie den Alt-Text schreiben, denken Sie daran, dass er blinden Nutzern Informationen über den Inhalt und den Zweck des Bildes vermitteln soll, so dass sie durch den Alt-Text genauso viele Informationen erhalten wie ein sehender Nutzer durch das Bild selbst. Der Alt-Text sollte die Absicht, den Zweck und die Bedeutung des Bildes wiedergeben.

Im folgenden Beispiel erfährt der Nutzer durch den Inhalt des Bildes, dass es sich um das Porträt eines Mädchens handelt und wie es aussieht:

<img src="vermeer-girl-with-perl.png" alt="A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring">

Um sicherzustellen, dass Ihr Alt-Text Menschen, die Bildschirmlesegeräte benutzen, nicht auf die Nerven geht, sollten Sie nur wenige Wörter verwenden, spezifisch sein und den Alt-Text nicht mit Schlüsselwortphrasen vollstopfen. Dies ist nicht der richtige Ort, um Schlüsselwörter einzufügen. Geben Sie nicht bekannt, dass es sich um ein Bild handelt. Die Hauptaufgabe besteht darin, den Zweck des Bildes auf der Seite in Worten zu beschreiben und blinden Menschen zu helfen, ihn zu verstehen.

Alt-Attribut in Schaltflächen - Schaltflächen-Alt-Text

Die Verwendung des Attributs alt in Schaltflächen und Bildschaltflächen ist eine wichtige Praxis für die Barrierefreiheit im Web. Bildschaltflächen verwenden das Attribut alt als Beschriftung. Der Wert des Attributs alt muss klar und prägnant sein und die Aktion beschreiben, die ausgeführt wird, wenn der Benutzer die Schaltfläche aktiviert, und nicht eine Beschreibung des Bildes selbst. Dieser Text wird von Bildschirmlesegeräten vorgelesen und ermöglicht es blinden oder sehbehinderten Personen, die Funktionen der Schaltfläche zu verstehen und mit ihr zu interagieren.

Überprüfen Sie, ob das Attribut <input type="image"> nicht leer ist.

<input type="image" src="print.jpg" name="submit" alt="Print">

Verwenden Sie spezifische und aussagekräftige Beschreibungen. Vermeiden Sie allgemeine Begriffe wie “Schaltfläche” oder “Bild”. Wenn die Schaltfläche eine Aktion ausführt, beschreiben Sie diese Aktion. Zum Beispiel: “Absenden”, “Suchen” oder “Details anzeigen” Wenn die Schaltfläche dekorativ ist und keine Funktion hat, verwenden Sie ein leeres alt-Attribut (alt="") oder entfernen Sie das alt-Attribut ganz.

<button type="submit">
    <img src="submit-button.png" alt="Submit Form">
</button>

Alternativer Text für Inhalte, die mit einem <object>-Element dargestellt werden

Das Element <object> bettet externe Inhalte, wie Bilder, Videos oder interaktive Anwendungen, in eine Webseite ein. Um diese Inhalte für Menschen mit Behinderungen zugänglich zu machen, sollten Sie das Attribut alt für den eingebetteten Inhaltstyp verwenden.

Handelt es sich bei dem Inhalt um ein Bild, verwenden Sie das Attribut alt innerhalb des Elements <object>, um einen alternativen Text anzugeben. Der alternative Text sollte den Zweck des Inhalts beschreiben oder eine aussagekräftige Beschreibung enthalten. Zum Beispiel:

<object >
    <img src="aspose.gif" alt="Logo Aspose company" />
</object> 

<object data="companylogo.gif" type="image/gif">
    <p>Company name</p>
</object>

Wenn der Inhalt rein dekorativ ist und keine aussagekräftigen Informationen enthält, sollten Sie ein leeres Attribut alt verwenden oder es weglassen.

<label>-Elemente, um Textbeschriftungen mit Formularsteuerelementen zu verknüpfen

Die Verwendung von <label>-Elementen, um Textbeschriftungen mit Formularsteuerelementen zu verbinden, ist eine grundlegende Praxis in der Webentwicklung und ein wesentlicher Aspekt der Barrierefreiheit im Web. Diese Methode verbessert die Benutzerfreundlichkeit und stellt sicher, dass Benutzer, einschließlich Menschen mit Behinderungen, Formulare effektiv verstehen und mit ihnen interagieren können.

Verwenden Sie das <label>-Element, um ein Formular-Steuerelement explizit mit einem Label zu verknüpfen. Die Beschriftung wird mit Hilfe des “for”-Attributs an ein bestimmtes Formular-Steuerelement angehängt. Der Wert des “for”-Attributs muss mit dem Wert des id-Attributs des Formularsteuerelements übereinstimmen.

<label for="firstname">First name:</label>
<input type="text" id="firstname">

<label for="password">Enter password:</label>
<input type="password" id="password">

Das Bildschirmlesegerät zeigt eine Beschriftung an, wenn das Steuerelement den Fokus erhält, so dass behinderte Benutzer den Kontext und den Zweck des Steuerelements verstehen können. Beschriftungen sind für verschiedene Arten von Formularsteuerelementen von Bedeutung, z. B. für Texteingaben, Optionsfelder, Kontrollkästchen und Dropdowns. Verwenden Sie für diese Steuerelemente immer Beschriftungen, um eine klare und zugängliche Benutzererfahrung zu gewährleisten. Explizit zugeordnete Beschriftungen werden für alle <input>-Elemente verwendet, außer:

• schaltflächen - Schaltflächen sind selbstbeschriftend
• versteckte Eingaben - Eingaben mit dem Typ-Attribut value von hidden z.B. type="hidden"
• input type=“image” - die Bezeichnung wird durch das Attribut alt bereitgestellt
• input type=“reset” - die Bezeichnung wird durch das Attribut value angegeben
• input type=“submit” - die Bezeichnung wird durch das Attribut value angegeben.

Attribut title zur Kennzeichnung von Formularsteuerelementen, wenn ein Element <label> nicht verwendet werden kann

Verwenden Sie das Attribut title, um einen zugänglichen Namen für Formularsteuerelemente bereitzustellen, wenn das visuelle Design keinen Bildschirmtext enthält, der mit dem Steuerelement als Bezeichnung verknüpft werden kann. User Agents, einschließlich assistiver Technologien, können dieses Attribut title aussprechen.

Erfolg

Payment card details

<fieldset><legend>Payment card details</legend>
<input id="cardnumber" name="cardnumber" title="Enter Card number" type="text" >
<input id="cvc" name="cvc" title="Enter CVC code" type="text" >
</fieldset>

*Durchgefallen

Es gibt keine Beschriftungsbindung für das Eingabefeld und auch das Attribut title fehlt:

<label>Search for:</label>
<input id="searchTerm" type="text" value="" name="searchTerm">

Alternativtext für Emojis, Emoticons, ASCII-Kunst und Leetspeak

Da unterstützende Technologien wie Bildschirmlesegeräte Bilder nicht direkt interpretieren können, sind sie auf alternativen Text angewiesen, um den Benutzern die Bedeutung von Nicht-Text-Inhalten zu vermitteln. Wenn ein ASCII-, Emoji- oder Emoticon-Bild verwendet wird, müssen sie auch eine textliche Erklärung haben, was das Bild ist. Da man kein alt-Attribut für <span>, <div> usw. verwenden kann und die ARIA-Empfehlung zugängliche Namen für generische Elemente verbietet, werden Emoji als Bilder mit der ARIA-Eigenschaft role="img" definiert, die es dann ermöglicht, einen zugänglichen Namen mit dieser aria-label-Eigenschaft zu erstellen.

Das Attribut role="img" wird verwendet, um den Container für eine Sammlung von Elementen zu identifizieren, die zusammen ein einziges aussagekräftiges Bild bilden. Alternativer Text ist ein Wort oder ein Satz, der so kodiert ist, dass Hilfstechnologien ihn mit einem bestimmten Nicht-Text-Objekt assoziieren können, und der die gleichen Informationen wie das Nicht-Text-Objekt vermittelt.

Erfolg

<abbr title="sad">:(</abbr>
<span aria-label="sad" role="img">:(</span>
<img alt="sad" src="./sad.png">

<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

*Durchgefallen

<div role="img">(ㆆ _ ㆆ)</div>

Bemühen Sie sich stets um einen klaren und aussagekräftigen Alternativtext, der das Wesen des Emoji, Emoticons, der ASCII-Kunst oder des Leetspeak wiedergibt und gleichzeitig den beabsichtigten emotionalen oder ausdrucksstarken Ton beibehält.

Abbildung und Bildunterschrift

Ein <figure>-Element, das zur Aufnahme von <img> und <figcaption> bestimmt ist, ist in sich abgeschlossen und wird normalerweise als einzelner Block aus dem Hauptfluss des Dokuments referenziert. Das <figure> kann vom Hauptfluss des Dokuments getrennt werden, ohne seine Bedeutung zu beeinträchtigen.

Das <figure> stellt eine semantische Verbindung mit der darin enthaltenen <figcaption> her, die eine Zusammenfassung oder zusätzliche Informationen über die Abbildung liefern und/oder einen Bezug zum Dokument herstellen kann. Das <img> benötigt jedoch immer noch einen Alt-Text, und um Redundanz zu vermeiden, sollte diese Information nicht durch <figcaption> weitergegeben werden.

<figure>
    <img src="./sunset.jpg" alt="Sunset on the sea" />
    <figcaption>Sunset on the sea</figcaption>
</figure>

Alt-Text eines Bildes mit Aspose.HTML for .NET prüfen

Schauen wir uns ein Codeschnipsel an, das sich auf die Überprüfung von Alt-Text für Bilder und Beschriftungen bezieht. Um Ihre Seite auf Alternativtext und Zugänglichkeitskriterien zu überprüfen, müssen Sie folgende Schritte ausführen:

1. 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.
2. Verwenden Sie die Eigenschaft Rules des Objekts webAccessibility, die den Zugriff auf eine Sammlung von Regeln für die Barrierefreiheit im Web ermöglicht.
3. 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.
4. Laden Sie ein HTML-Dokument mit einem der HTMLDocument() Konstruktoren.
5. Verwenden Sie die Methode Validate(document), um das HTML-Dokument auf Barrierefreiheit zu prüfen. Das Ergebnis wird in der Variablen validationResult gespeichert.
6. Prüfen Sie, ob die Validierung erfolgreich war. Drucken Sie die detaillierten Informationen über Fehler, einschließlich des zugehörigen HTML-Elements.

Betrachten Sie ein Beispiel für die HTML-Datei alt-tag.html:

<html>
    <body>
        <img src="./resourses/login.png" alt="Login icon">

        <label>Enter login:</label>
        <!--error: for input missing label with for="login" -->
        <input type="text" id="login">

        <label for="password">Enter password:</label>
        <input type="password" id="password">
    
        <!--error: for image alt attribute must not be empty -->
        <img src="./resourses/sign.png" alt="">
    </body>
</html>

Der folgende C#-Codeausschnitt demonstriert die grundlegenden Schritte zur Erstellung eines Validators, zum Laden eines HTML-Dokuments und zur Validierung gegen die Anforderungen an die Barrierefreiheit im Web, insbesondere die Regeln “1. Perceivable”, “1.1 Text Alternatives”:

// Validate HTML image alt text accessibility with detailed error reporting using C#

// Prepare a path to a source HTML file
string documentPath = Path.Combine(DataDir, "alt-tag.html");

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

// Get from the rules list Principle "1. Perceivable" by code "1" and get guideline "1.1 Text Alternatives"
Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.1");

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

// Initialize an HTMLDocument object
using (HTMLDocument document = new HTMLDocument(documentPath))
{
    ValidationResult validationResult = validator.Validate(document);
    if (!validationResult.Success)
    {
        // Get all the result details 
        foreach (RuleValidationResult ruleResult in validationResult.Details)
        {
            // If the result of the rule is unsuccessful
            if (!ruleResult.Success)
            {
                // Get an errors list 
                foreach (ITechniqueResult result in ruleResult.Errors)
                {
                    // Check the type of the erroneous element, in this case, we have an error in the HTML Element
                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
                    {
                        HTMLElement 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);
                    }
                }
            }
        }
    }
}

Das Ergebnis der Dateiprüfung ist eine Liste von Ergebnissen, die einen Fehler vom Typ IError enthält. Das Programm gibt eine Ausgabe auf der Konsole aus:

    Error in rule H37 : Img element missing an alt attribute. The value of this attribute is referred to as "alt text".
    HTML Element: <img src="./resourses/sign.png" alt="">
    Error in rule H44 : Check that the label element contains for attribute.
    HTML Element: <label>Enter login:</label>
    Error in rule H65 : Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
    HTML Element: <input type="text" id="login">
    Error in rule F65 : Absence of an alt attribute or text alternative on img elements, area elements, and input elements of type "image".
    HTML Element: <img src="./resourses/sign.png" alt="">

References

• How to Meet WCAG (Quick Reference)
• H2: Combining adjacent image and text links for the same resource
• H24: Providing text alternatives for the area elements of image maps
• H30: Providing link text that describes the purpose of a link for anchor elements
• H35: Providing text alternatives on applet elements
• H36: Using alt attributes on images used as submit buttons
• H37: Using alt attributes on img elements
• H44: Using label elements to associate text labels with form controls
• H53: Using the body of the object element
• H65: Using the title attribute to identify form controls when the label element cannot be used
• H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore
• H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak

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 Klassen und Methoden der Namespaces Aspose.Html.Accessibility und Aspose.Html.Accessibility.Results verwenden.
• Besuchen Sie den Artikel über Multimedia-Zugänglichkeit, wenn Sie erfahren möchten, wie Sie Multimedia-Inhalte inklusiv und für ein breiteres Publikum, einschließlich Menschen mit Behinderungen, zugänglich machen können. Dieser Artikel enthält C#-Beispiele zur Überprüfung der besten Praktiken für die Zugänglichkeit von Multimedia-Inhalten gemäß den WCAG-Standards.
• In dem Artikel Accessibility Validator lernen Sie die Klasse AccessibilityValidator kennen, die zum Testen von Zugänglichkeitsregeln wie Prinzipien, Richtlinien und Kriterien verwendet werden kann.
• 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 offers free online Web-Zugänglichkeits-Checker. This tool scans web pages, validates them for WCAG compliance, identifies problems, and suggests improvements. Get instant insights into your website’s compliance, allowing you to determine the scope of necessary corrections and the gap between the current state of your website or HTML document and WCAG requirements.