Screen Reader Accessibility – C# Examples

Screen Reader as an Assistive Technology

Screen reader accessibility is a crucial aspect of web accessibility that focuses on making digital content, particularly websites and applications, accessible to individuals who are blind or visually impaired.

A screen reader is an assistive technology designed to read online content aloud. It turns the digital text and visual content into speech or Braille, allowing users with visual disabilities to navigate, interact with, and understand digital content. Screen readers are needed not only for blind and visually impaired people but also for users with cognitive impairments, who find it easier to process information by ear.

Screen readers can read any content on a page. For example, text from paragraphs and headings, lists, alternative image descriptions, links, radio buttons, and other interactive elements. Therefore, in order for screen readers to read information that will be accessible and understandable to the user, it is necessary to provide alternative text, as well as informative headings.

Use the following recommendations based on WCAG to ensure your website is accessible to people who rely on screen readers. This is important not only for people with disabilities. It will improve the user experience for everyone and allow your site to rank higher in search engine results.

Alternative text

Screen readers cannot translate an image into words that get read to the user, even if the image only consists of text. For web accessibility, images must have short, descriptive alt text so screen reader users clearly understand the image’s contents and purpose. In addition to the importance of alternative text for people with vision problems, it performs several other essential functions:

• The browser displays alternative text instead of the image if it is not loaded or blocked.
• Search engines use alternative text and consider it when evaluating a page’s purpose and content.

Alternative text can be presented on your website in several ways:

• Alternative text for images
• Alt attribute in Image buttons
• Alternative text for content rendered using an <object> element
• <label> elements as associate text labels with form controls
• title attribute to identify form controls when a <label> element cannot be used
• Text alternatives for emojis, emoticons, ASCII art, and leetspeak
• Figure and figcaption

Alternative Text for Images – alt attribute in img tag

Ensure all informative <img> elements have short and descriptive, defining alternate text and all decorative <img> elements have empty alt attributes (e.g. alt=""). When writing alt text, remember that its purpose is to relay information to blind users about the image’s contents and purpose so that they get as much information from alt text as a sighted user gets from the image itself. Alt text should give the image’s intent, purpose, and meaning.

In the example below, the content of the image tells the user that the portrait is of a girl and what she looks like:

<img src="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">

To ensure your alt text doesn’t get on the nerves of people who use screen readers, use minimal words, be specific, and don’t stuff the alt text with keyword phrases. This is not the place to put keywords. Don’t announce that this is an image. The main task is to describe in words and help blind people understand the purpose of the image on the page.

Alt attribute in Buttons – button alt text

Using the alt attribute in buttons and image buttons is a crucial web accessibility practice. Image buttons use the alt attribute as the label. The alt attribute value must be provided and clear, concise, and representative of the action performed when the user activates the button, not a description of the image itself. This text is read aloud by screen readers, making it possible for individuals who are blind or visually impaired to understand and interact with the button’s functionality.

Check that the <input type="image"> has a non-empty alt attribute.

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

Use specific and meaningful descriptions. Avoid generic terms like “button” or “image.” If the button performs an action, describe that action. For example, “Submit,” “Search,” or “View Details.” If the button is decorative and doesn’t have a function, use an empty alt attribute (alt="") or remove the alt attribute altogether.

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

Alternative Text for content rendered using an <object> element

The <object> element embeds external content, such as images, videos, or interactive applications, into a web page. To make this content accessible to people with disabilities, you should use the alt attribute on the embedded content type.

If the content is an image, use the alt attribute within the <object> element to provide alternative text. The alternative text should describe the content’s purpose or give a meaningful description. For example:

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

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

If the content is purely decorative and does not convey meaningful information, consider using an empty alt attribute or omitting it.

<label> elements as associate text labels with form controls

Using <label> elements to associate text labels with form controls is a fundamental practice in web development and an essential aspect of web accessibility. This method enhances usability and ensures that users, including people with disabilities, can effectively understand and interact with forms.

Use the <label> element to associate a form control with a label explicitly. The label is attached to a particular form control using the for attribute. The value of the for attribute must be the same as that of the id attribute of the form control.

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

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

The screen reader announces a label when the control receives focus, providing disabled users with context and understanding of the control’s purpose. Labels are significant for various types of form controls, such as text inputs, radio buttons, checkboxes, and dropdowns. Always use labels for these controls to ensure a clear and accessible user experience. Explicitly associated labels are used for all <input> elements except:

• buttons – buttons are self-labeling
• hidden inputs – Inputs with the type attribute value of hidden e.g., type="hidden"
• input type=“image” – the label is provided by the alt attribute
• input type=“reset” – the label is provided by the value attribute
• input type=“submit” – the label is provided by the value attribute.

title attribute to identify form controls when a <label> element cannot be used

Use the title attribute to provide an accessible name for form controls when the visual design does not include on-screen text that can be associated with the control as a label. User agents, including assistive technologies, may pronounce this title attribute.

Success

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>

Fail

There is no label binding for the input field and the title attribute is also missing:

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

Alternative text for emojis, emoticons, ASCII art, and leetspeak

Because assistive technologies like screen readers can’t interpret images directly, they rely on alternative text to communicate the meaning of non-text content to users. If an ASCII, emoji, or emoticon image is used, they must also have a textual explanation of what the image is. Because you can’t use an alt attribute on <span>, <div>, etc, and the ARIA recommendation disallows accessible names for generic elements, in order to give emoji accessible names, they are defined as images with the role="img" ARIA property, which then allows you to create an accessible name using this aria-label property.

The attribute role="img" is used to identify the container for a collection of elements that together form a single meaningful image. Alternative text is a word or phrase that is coded in a way that assistive technologies can associate it with a specific non-text object, and conveys the same information as the non-text object.

Success

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

Fail

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

Always aim for a clear and meaningful alternative text that conveys the essence of the emoji, emoticon, ASCII art, or leetspeak while maintaining the intended emotional or expressive tone.

Figure and figcaption

A <figure> element, designed to house <img> and <figcaption>, is self-contained and is typically referenced as a single block from the main flow of the document. The <figure> can be separated from the main flow of the document without affecting its meaning.

The <figure> creates a semantic association with the <figcaption> it contains, which can provide a summary of or additional information about the figure and/or relate it back to the document. However, the <img> still needs alt text, and to avoid redundancy, this information should not be passed through <figcaption>.

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

How to Check Alt Text of an Image with Aspose.HTML.Accessibility

Let’s look at a code snippet related to checking alt text for images and labels. To review your page for alternative text and 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.
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.

Consider an example of the HTML file:

string htmlFile="<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>"

The C# code snippet demonstrates the basic steps for creating a validator, loading an HTML document, and validating it for web accessibility compliance:

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

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

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

// 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(documentPath))
{
    var validationResult = validator.Validate(document);
    if (!validationResult.Success)
    {
        // Get all the 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, in this case, we have an error in the HTML 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);
                    }
                }
            }
        }
    }
}

The result of the file check will be a list of results containing one error with type IError The program will output to the console:

    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