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

Example_CheckAltText.java 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// Validate HTML for multimedia accessibility using Java
 2
 3// Initialize a webAccessibility container
 4WebAccessibility webAccessibility = new WebAccessibility();
 5
 6// Get from the rules list Principle "1.Perceivable" by code "1"
 7// and get guideline "1.2 Time-based Media"
 8Guideline guideline = webAccessibility.getRules()
 9        .getPrinciple("1").getGuideline("1.2");
10
11// Create an accessibility validator, pass the found guideline
12// as parameters, and specify the full validation settings
13AccessibilityValidator validator = webAccessibility.createValidator(
14        guideline,
15        ValidationBuilder.getAll()
16);
17
18// Initialize an HTMLDocument object
19final HTMLDocument document = new HTMLDocument("https://www.youtube.com/watch?v=Yugq1KyZCI0");
20ValidationResult validationResult = validator.validate(document);
21
22// Checking for success
23if (!validationResult.getSuccess()) {
24    // Get all 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
31                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
32                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
33
34                    System.out.println(String.format("Error in rule %s : %s",
35                            result.getRule().getCode(),
36                            result.getError().getErrorMessage()
37                    ));
38
39                    System.out.println(String.format("HTML Element: %s",
40                            rule.getOuterHTML()
41                    ));
42                }
43            }
44        }
45    }
46}

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

Проверка контрастности цвета Расширенное программирование

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.