Доступность для программ чтения с экрана – проверка доступности alt-текста и мультимедиа

Aspose.HTML for Java включает пакет com.aspose.html.accessibility, который предназначен для всех манипуляций и проверок, связанных с веб-доступностью.

Доступность для программ чтения с экрана – Улучшение веб-опыта для всех пользователей

Доступность для программ чтения с экрана – важный компонент доступности веб-сайтов, обеспечивающий возможность использования веб-сайтов и цифровых приложений слепыми, слабовидящими или имеющими когнитивные нарушения людьми. Устройство для чтения с экрана – это вспомогательная технология, которая преобразует цифровой контент, включая текст, изображения и интерактивные элементы, в речь или шрифт Брайля, позволяя пользователям эффективно перемещаться по веб-страницам и взаимодействовать с ними. Для поддержки программ чтения с экрана разработчики должны следовать Руководству по доступности веб-контента (WCAG), в частности, предоставлять понятный, описательный альтернативный текст (alt text) для всех информативных изображений, кнопок и медиаэлементов.

В этой статье мы рассмотрим, как с помощью библиотеки Aspose.HTML for Java проверить веб-сайт или любой другой HTML-документ на доступность содержимого для устройств чтения с экрана – содержит ли он четкий, описательный альтернативный текст (alt text) для всех информативных изображений, кнопок и медиаэлементов.

В статье Альтернативный Текст – Веб-доступность вы узнаете, как разработать сайт с учетом доступности для программ чтения с экрана и как использовать различные способы внедрения альтернативного текста на сайте, в том числе для изображений, кнопок, элементов <object>, элементов управления формами, эмодзи и многого другого.

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

Как проверить alt-текст изображения

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

С помощью конструктора WebAccessibility() создайте экземпляр класса WebAccessibility, отвечающего за проверку веб-доступности.
Используйте свойство Rules объекта webAccessibility, которое предоставляет доступ к коллекции правил веб-доступности. Вызовите метод getPrinciple() класса AccessibilityRules и метод getGuideline() класса Principle, чтобы получить требуемый принцип по коду из WCAG.
Вызовите метод createValidator(), чтобы создать объект validator. По сути, вы создаете валидатор, который будет проверять веб-контент на соответствие определенным принципам доступности и критериям успеха, связанным с указанным вами принципом.
Загрузите 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>

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

 1// Prepare a path to a source HTML file
 2String documentPath = "alt-tag.html";
 3
 4// Initialize webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get from the rules list Principle "1. Perceivable"
 8// by code "1" and get guideline "1.1 Text Alternatives"
 9Guideline guideline = webAccessibility.getRules()
10        .getPrinciple("1").getGuideline("1.1");
11
12// Create an accessibility validator - pass the found guideline
13// as parameters and specify the full validation settings
14AccessibilityValidator validator = webAccessibility.createValidator(
15        guideline,
16        ValidationBuilder.getAll()
17);
18
19// Initialize an HTMLDocument object
20final HTMLDocument document = new HTMLDocument(documentPath);
21ValidationResult validationResult = validator.validate(document);
22
23if (!validationResult.getSuccess()) {
24    // Get all the result details
25    for (RuleValidationResult ruleResult : validationResult.getDetails()) {
26        // If the result of the rule is unsuccessful
27        if (!ruleResult.getSuccess()) {
28            // Get an errors list
29            for (ITechniqueResult result : ruleResult.getErrors()) {
30                // Check the type of the erroneous element, in this case,
31                // we have an error in the HTML Element
32                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
33                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
34
35                    System.out.println(String.format("Error in rule %s : %s",
36                            result.getRule().getCode(),
37                            result.getError().getErrorMessage()
38                    ));
39
40                    System.out.println(String.format("HTML Element: %s",
41                            rule.getOuterHTML()
42                    ));
43                }
44            }
45        }
46    }
47}

Example_CheckAltText hosted with ❤ by GitHub

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

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

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

В этом примере выполняется проверка HTML-документа на соответствие всем критериям в руководстве “1.2 Time-based Media”.

 1// Initialize a webAccessibility container
 2WebAccessibility webAccessibility = new WebAccessibility();
 3
 4// Get from the rules list Principle "1.Perceivable" by code "1"
 5// and get guideline "1.2 Time-based Media"
 6Guideline guideline = webAccessibility.getRules()
 7        .getPrinciple("1").getGuideline("1.2");
 8
 9// Create an accessibility validator, pass the found guideline
10// as parameters, and specify the full validation settings
11AccessibilityValidator validator = webAccessibility.createValidator(
12        guideline,
13        ValidationBuilder.getAll()
14);
15
16// Initialize an HTMLDocument object
17final HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0");
18ValidationResult validationResult = validator.validate(document);
19
20// Checking for success
21if (!validationResult.getSuccess()) {
22    // Get all result details
23    for (RuleValidationResult ruleResult : validationResult.getDetails()) {
24        // If the result of the rule is unsuccessful
25        if (!ruleResult.getSuccess()) {
26            // Get an errors list
27            for (ITechniqueResult result : ruleResult.getErrors()) {
28                // Check the type of the erroneous element
29                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
30                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
31
32                    System.out.println(String.format("Error in rule %s : %s",
33                            result.getRule().getCode(),
34                            result.getError().getErrorMessage()
35                    ));
36
37                    System.out.println(String.format("HTML Element: %s",
38                            rule.getOuterHTML()
39                    ));
40                }
41            }
42        }
43    }
44}

Example_ValidateMultimedia hosted with ❤ by GitHub

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

 1    // Get the principle "1. Perceivable" by its code and retrieve the guideline "1.2 Time-based Media"
 2    Guideline guideline = webAccessibility.getRules().getPrinciple("1").getGuideline("1.2");
 3
 4    // Get the specific criterion: 1.2.3 Audio Description or Media Alternative (Prerecorded)
 5    Criterion criterion = guideline.getCriterion("1.2.3");
 6
 7    // Create an accessibility validator with the found criterion and full validation settings
 8    AccessibilityValidator validator = webAccessibility.createValidator(criterion, ValidationBuilder.getAll());
 9
10    ...

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

Полезные ссылки

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

Полезные советы по оценке и улучшению видимости текста вы найдете в статье Доступность цветового контраста, в которой рассматривается проверка контрастности на основе WCAG с использованием Aspose.HTML for Java.
Если вы хотите узнать, как просматривать результаты проверки и выявлять проблемы веб-доступности, обратитесь к статье Результаты проверки.
В статье Проверка доступности веб-сайта – Oшибки и предупреждения вы узнаете как программно собирать информацию об ошибках и предупреждениях при проверке доступности веб-сайта.

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

Результаты проверки Проверка контрастности цвета