Альтернативный Текст – Веб-доступность – Примеры C#

Программа чтения с экрана как вспомогательная технология

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

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

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

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

Альтернативный текст

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

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

Альтернативный текст может быть представлен на вашем сайте несколькими способами:

Альтернативный текст для изображений – атрибут alt в теге img

Убедитесь, что все информативные элементы <img> имеют короткий и описательный, определяющий альтернативный текст, а все декоративные элементы <img> имеют пустые атрибуты alt (например, alt=""). При написании замещающего текста помните, что его цель – передать слепым пользователям информацию о содержании и назначении изображения, чтобы они получали из замещающего текста столько же информации, сколько зрячий пользователь получает от самого изображения. Альтернативный текст должен отражать намерение, цель и значение изображения.

В примере ниже содержимое изображения сообщает пользователю, что на портрете изображена девушка и как она выглядит:

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

A European girl is depicted in an exotic dress, oriental turban and with a very large pearl as an earring

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

Атрибут alt на кнопках

Использование атрибута alt в кнопках и кнопках с изображениями является важной практикой обеспечения веб-доступности. Кнопки изображений используют атрибут alt в качестве метки. Значение атрибута alt должно быть указано четко, кратко и отражать действие, выполняемое при активации кнопки пользователем, а не описание самого изображения. Этот текст читается вслух программами чтения с экрана, что позволяет слепым или слабовидящим людям понимать и взаимодействовать с функциями кнопки.

Убедитесь, что <input type="image"> имеет непустой атрибут alt.

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

Используйте конкретные и содержательные описания. Избегайте общих терминов, таких как «кнопка» или «изображение». Если кнопка выполняет действие, опишите это действие. Например, «Отправить», «Поиск» или «Просмотреть подробности». Если кнопка декоративная и не имеет функции, используйте пустой атрибут alt (alt="") или вообще удалите атрибут alt.

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

Альтернативный текст для контента, отображаемого с использованием элемента `<object>`

Элемент <object> встраивает в веб-страницу внешний контент, например изображения, видео или интерактивные приложения. Чтобы сделать этот контент доступным для людей с ограниченными возможностями, вам следует использовать атрибут alt для встроенного типа контента.

Если содержимое представляет собой изображение, используйте атрибут alt внутри элемента <object>, чтобы предоставить альтернативный текст. Альтернативный текст должен описывать цель контента или давать осмысленное описание. Например:

1<object >
2    <img src="aspose.gif" alt="Logo Aspose company" />
3</object> 
4
5<object data="companylogo.gif" type="image/gif">
6    <p>Company name</p>
7</object>

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

Элементы `<label>` как ассоциированные текстовые метки с элементами управления формой

Использование элементов <label> для связи текстовых меток с элементами управления формой является фундаментальной практикой веб-разработки и важным аспектом веб-доступности. Этот метод повышает удобство использования и гарантирует, что пользователи, в том числе люди с ограниченными возможностями, смогут эффективно понимать формы и взаимодействовать с ними.

Используйте элемент <label>, чтобы явно связать элемент управления формы с меткой. Метка прикрепляется к определенному элементу управления формы с помощью атрибута for. Значение атрибута for должно быть таким же, как и значение атрибута id элемента управления формой.

1<label for="firstname">First name:</label>
2<input type="text" id="firstname">
3
4<label for="password">Enter password:</label>
5<input type="password" id="password">

Средство чтения с экрана объявляет метку, когда элемент управления получает фокус, предоставляя пользователям с ограниченными возможностями контекст и понимание цели элемента управления. Метки важны для различных типов элементов управления формой, таких как текстовые поля, переключатели, флажки и раскрывающиеся списки. Всегда используйте метки для этих элементов управления, чтобы обеспечить понятный и доступный пользовательский интерфейс. Явно связанные метки используются для всех элементов <input>, кроме:

buttons – кнопки имеют самомаркировку
hidden inputs – входы с атрибутом типа value, равным скрытому, например type="hidden"
input type=“image” – метка предоставляется атрибутом alt
input type=“reset” – метка предоставляется атрибутом value
input type=“submit” – метка предоставляется атрибутом value.

Атрибут `title` для идентификации элементов управления формой, когда элемент `<label>` не может быть использован

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

Правильно

Payment card details

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

Неудачно

Для поля ввода нет привязки метки, а также отсутствует атрибут title:

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

Альтернативный текст для смайликов, изображений ASCII и др.

Поскольку вспомогательные технологии, такие как программы чтения с экрана, не могут напрямую интерпретировать изображения, они полагаются на альтернативный текст, чтобы донести до пользователей значение нетекстового контента. Если используются изображения ASCII, эмодзи или смайлики, они также должны иметь текстовое объяснение того, что это за изображение. Поскольку вы не можете использовать атрибут alt для <span>, <div> и т. д., а рекомендация ARIA запрещает доступные имена для общих элементов, чтобы дать смайликам доступные имена, они определяются как изображения. с помощью свойства ARIA role="img", которое затем позволяет вам создать доступное имя, используя это свойство aria-label.

Атрибут role="img" используется для идентификации контейнера для набора элементов, которые вместе образуют одно значимое изображение. Альтернативный текст – это слово или фраза, кодированная таким образом, что вспомогательные технологии могут связать его с конкретным нетекстовым объектом, и передает ту же информацию, что и нетекстовый объект.

Правильно

1<abbr title="sad">:(</abbr>
2<span aria-label="sad" role="img">:(</span>
3<img alt="sad" src="./sad.png">
4
5<div role="img" aria-label="scared face">(ㆆ _ ㆆ)</div>

Неудачно

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

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

`<figure>` и `<figcaption>`

Элемент <figure>, предназначенный для размещения <img> и <figcaption>, является автономным и обычно на него ссылаются как на один блок из основного потока документа. <figure> можно отделить от основного потока документа, не затрагивая его смысла.

<figure> создает семантическую ассоциацию с содержащимся в нем <figcaption>, который может предоставить краткое изложение или дополнительную информацию о рисунке и/или связать его обратно с документом. Однако <img> по-прежнему нуждается в замещающем тексте, и во избежание избыточности эту информацию не следует передавать через <figcaption>.

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

Как проверить alt текст изображения с помощью Aspose.HTML

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

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

Рассмотрим пример HTML-файла alt-tag.html:

 1<html>
 2    <body>
 3        <img src="./resourses/login.png" alt="Login icon">
 4
 5        <label>Enter login:</label>
 6        <!--error: for input missing label with for="login" -->
 7        <input type="text" id="login">
 8
 9        <label for="password">Enter password:</label>
10        <input type="password" id="password">
11    
12        <!--error: for image alt attribute must not be empty -->
13        <img src="./resourses/sign.png"  alt="">
14    </body>
15</html>

Фрагмент кода C# демонстрирует основные шаги по созданию средства проверки, загрузке HTML-документа и его проверке на соответствие требованиям веб-доступности, а именно правилам “1. Perceivable”, “1.1 Text Alternatives”:

 1// Prepare a path to a source HTML file
 2string documentPath = Path.Combine(DataDir, "alt-tag.html");
 3
 4// Initialize webAccessibility container
 5var webAccessibility = new WebAccessibility();
 6
 7// Get from the rules list Principle "1. Perceivable" by code "1" and get guideline "1.1 Text Alternatives"
 8var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.1");
 9
10// Create an accessibility validator - pass the found guideline as parameters and specify the full validation settings
11var validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
12
13// Initialize an HTMLDocument object
14using (var document = new HTMLDocument(documentPath))
15{
16    var validationResult = validator.Validate(document);
17    if (!validationResult.Success)
18    {
19        // Get all the 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                // Get an errors list 
26                foreach (var result in ruleResult.Errors)
27                {
28                    // Check the type of the erroneous element, in this case, we have an error in the HTML Element
29                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
30                    {
31                        var rule = (HTMLElement)result.Error.Target.Item;
32                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
33                        Console.WriteLine("HTML Element: {0}", rule.OuterHTML);
34                    }
35                }
36            }
37        }
38    }
39}

view raw Example-CheckAltText hosted with ❤ by GitHub

Результатом проверки файла будет список результатов, содержащий ошибку типа IError. Программа выведет на консоль:

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

References

Как улучшить доступность веб-сайта Доступность цветового контраста