На следующей неделе пройдет 14-й ежегодный Всемирный день распространения информации о доступности (Global Accessibility Awareness Day, GAAD). Эта традиция была основана в 2011 году с целью заставить людей задуматься и применить практики веб-доступности, чтобы вовлечь пользователей с ограниченными возможностями.

Хотя кажется, что веб-доступность является приоритетом при разработке продуктов, по данным WebAIM, почти 95 % домашних страниц содержат ошибки в соответствии с WCAG, такие как малоконтрастный текст или отсутствие alt-текста.

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

Почему GAAD важен?

Слышали ли вы когда-нибудь вариации следующих двух фраз?

• «У нас просто нет времени, чтобы вернуться и исправить проблемы с доступностью».
• «Сайт работает для меня, не думаю, что нам есть о чем беспокоиться».

Несмотря на то, что веб-доступность продолжает оставаться «модной» темой, количество отказов в ее обеспечении по-прежнему велико (и вызывает разочарование). Возвращаться и исправлять такие проблемы, как доступность клавиатуры или цветовой контраст, дорого, но без их устранения некоторые пользователи не смогут воспользоваться сайтом.

Как легко UX-дизайнер, который является трудоспособным, может забыть о пользователях, которые используют веб-страницы по-другому. Например, вы используете мышь, чтобы переместить карточку Trello, перетаскивая ее из «Не начато» в «В процессе». Пользователь, который может использовать только клавиатуру, не сможет переместить карточку с помощью перетаскивания; для получения тех же результатов ему потребуется альтернативный способ.

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

Каково текущее состояние веб-доступности?

Компания WebAIM (Web Accessibility in Mind) опубликовала результаты «WebAIM Million» за 2025 год. Отчет представляет собой аудит веб-доступности, в ходе которого миллион домашних страниц ведущих веб-сайтов проверяется на соответствие требованиям WCAG (Web Content Accessibility Guidelines).

Почти 95 % из миллиона домашних страниц, протестированных в отчете, содержали ошибки в соответствии с WCAG. Чтобы обнаружить эти сбои, WebAIM использовала сочетание автоматизированного тестирования с помощью инструмента WAVE API в дополнение к ручному тестированию (невозможно выявить все проблемы доступности только с помощью автоматизированного тестирования).

Хотя этот отчет показывает небольшое снижение процента домашних страниц с проблемами доступности по сравнению с прошлым годом (на 1,1%), он также показывает тенденцию, что средняя сложность домашних страниц увеличивается с каждым годом. Таким образом, по мере добавления на домашние страницы все большего количества элементов дизайна они становятся все более подверженными проблемам доступности.

Какие наиболее распространенные проблемы с доступностью были обнаружены?

96 % обнаруженных проблем с доступностью попадают в 6 групп. Ниже приведены группы от наиболее до наименее распространенных:

• Низкоконтрастный текст: 79,1 %
• Отсутствие альтернативного (alt) текста для изображений: 55,5 %
• Отсутствие надписей на форме ввода: 48,2%
• Пустые ссылки: 45,4%
• Пустые кнопки: 29,6%
• Отсутствует язык документа: 15.8%

Эти группы не только преобладают среди проблем доступности, обнаруженных в этом отчете WebAIM, но и являются наиболее распространенными в течение последних 5 лет, что свидетельствует о том, что из года в год не решаются (и продолжают создаваться) одни и те же проблемы.

Какое воздействие на пользователей оказывают эти проблемы с доступностью?

• Низкоконтрастный текст: Если пользователь с плохим зрением не может прочитать слабый текст, он не сможет получить необходимую информацию. Любой текст размером менее 18 ПТ (или менее 14 ПТ, выделенный жирным шрифтом) должен иметь коэффициент цветового контраста 4,5:1 по отношению к фону, чтобы больше людей могли прочитать текст.
• Отсутствие alt-текста для изображений: Когда на изображении есть важная информация, пользователь, который использует контент с помощью программы чтения с экрана, должен иметь возможность получить эту информацию в другой форме. Если изображение не содержит альтернативного текста (через атрибут alt), программа для чтения с экрана может прочитать только имя файла изображения или вообще ничего.
• Отсутствующие метки ввода формы: Допустим, пользователь с устройством чтения с экрана заполняет форму на веб-странице. Если несколько полей ввода не содержат элемента метки, связывающего метку с полем, экранный считыватель прочитает только то, чем управляется поле (например, «Input» или «Select»); таким образом, пользователь не получит никакого контекста или инструкций о том, какая информация запрашивается.
• Пустые ссылки: Пустые ссылки возникают, когда в качестве ссылки используется изображение, но оно не содержит alt-текста. Они также могут возникнуть, если элемент, содержащий ссылку, удаляется без изменения HTML. Когда пользователь считывателя переходит на веб-страницу, он сообщает, что перешел по ссылке, но пользователь не получает информации о том, что эта ссылка делает.
• Пустые кнопки: Как и пустые ссылки, пустые кнопки не выполняют свою функцию. Поэтому, когда пользователь считывателя экрана перемещается по веб-странице, считыватель экрана сообщает о наличии кнопки, но пользователь не получает информации о том, что эта кнопка делает (например, отправляет форму или входит в систему). Поэтому пользователь вынужден сам нажимать на кнопку, чтобы узнать ее функцию. 
• Отсутствие языка документа: Если основной язык веб-страницы не указан, программы чтения с экрана могут неправильно интерпретировать текст, что может запутать пользователей, для которых он не является родным или которым требуется перевод. Пользователь скринридера может услышать неправильно произнесенные слова или грамматику, что мешает ему понять содержание.

Дизайн для предотвращения распространенных проблем с доступностью

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

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

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

Давайте рассмотрим обязанности дизайнера и то, как он может проверять доступность по каждому пункту.

Низкоконтрастный текст

Обязанности дизайнера:

• Для изображений текста и любого текста размером менее 18 PT (что примерно соответствует 24 px) убедитесь, что цветовой контраст имеет соотношение не менее 4,5:1
• Для текста размером более 18 PT (или 14 PT жирного) убедитесь, что цветовой контраст имеет соотношение не менее 3:1
• Единственным исключением из этих требований к цвету являются логотипы, неактивные/отключенные элементы управления пользовательского интерфейса или любые чисто декоративные элементы (например, разделительные линии)

Как проверять сайты на наличие низкоконтрастного текста:

• Проверьте цвет дизайна вручную с помощью инструментов проверки контрастности, таких как WebAIM, или с помощью встроенного в Figma инструмента цветового контраста
• Запустите автоматизированный инструмент тестирования доступности (например, Silktide) в вашем браузере, чтобы отметить проблемы цветового контраста, которые следует перепроверить.

Недостающий alt-текст

Обязанности дизайнера:

• Написать рекомендуемый alt-текст для каждого изображения, используемого на веб-странице (не более 150 символов)
• Для изображений предложите использовать атрибут alt в элементе <img>
• Для SVG предложите дать SVG role="img" и использовать атрибут <title> (например, <svg role="img" title="A brown circle"><circle cx="30" cy="30" r="10" fill="blue"></circle></svg>).
• Если изображение чисто декоративное, рекомендуется использовать нулевой атрибут alt (alt="")

Как проверять сайты на отсутствие alt-текста:

• Самостоятельно прочитайте alt текст для изображений, чтобы убедиться, что он описывает изображение, и проверьте, чтобы декоративные изображения не имели  alt текста
• Запустите автоматизированный инструмент тестирования доступности на вашем продукте в браузере, чтобы отметить любое изображение или SVG, которое не содержит текста alt и не помечено как декоративное

Отсутствующие метки формы

Обязанности дизайнера:

• Использовать описательные метки для полей формы; дать пользователю понять, какие данные ему нужно ввести
• Расположить метку рядом с вводимыми данными, чтобы зрячие пользователи могли предсказать связь
• Рекомендуется использовать теги <label>, использующие атрибут for="", и ссылаться на ID, чтобы сопоставить метку с <input> (например, <label for="firstname1">First name:</label><input type="text" name="firstname" id="firstname1">).

Как проверять веб-сайты на отсутствие ярлыков форм:

• Запустите автоматизированный инструмент тестирования доступности в вашем браузере, чтобы отметить любой тег <input>, который не связан с <label>, а также убедиться, что <label> содержит текст

Пустые ссылки

Обязанности дизайнера:

• Используйте описательные метки для ссылок; пусть пользователь знает, куда его приведет ссылка
• Для ссылок предложите добавить текстовое содержимое в элемент <a> (например, <a href="https://google.com">домашняя страница Google</a>)
• Для ссылок, содержащих SVG или иконки Webfont, предложите скрыть элемент с помощью aria-hidden="true" и добавить атрибут aria-label в элемент <a>

Как проверять веб-сайты на наличие пустых ссылок:

• Запустите автоматизированный инструмент тестирования доступности (например, WAVE API) в вашем браузере, чтобы отметить любую ссылку, в которой отсутствует якорный текст, а также если в ссылке, содержащей SVG или иконку Webfont, отсутствует атрибут aria-label или текст для экранного чтения.

Пустые кнопки

Обязанности дизайнера:

• Для кнопок рекомендуется добавить атрибут value к <input> (например, <input type="button" value="Submit">)
• Для изображений, выполняющих роль кнопок, рекомендуется добавить атрибут alt к изображению, чтобы описать функцию кнопки (например, <img src="button-pic" alt="Submit">)

Как проверять веб-сайты на наличие пустых кнопок:

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

Отсутствует язык документа

Обязанности дизайнера:

• Для веб-страниц рекомендуется использовать атрибут lang в элементе HTML (например, <html lang="en">)
• Для PDF-файлов рекомендуется установить язык по умолчанию с помощью атрибута /Lang в каталоге документов

Как проверять веб-сайты на язык документа:

• В браузере Chrome откройте «Инструменты разработчика» (Option+Command+I на Mac)
• В разделе <!DOCTYPE html> атрибут lang должен быть указан в первом теге <html>.

Бесплатные инструменты для выявления ошибок в обеспечении доступности

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

Ниже мы рассмотрим инструменты для дизайна и контроля качества.

Инструменты для дизайна

• Встроенный в Figma инструмент проверки цвета: Новая функция Figma позволяет проверить контрастность цветов без запуска плагинов или проверки цветов сторонними инструментами. Просто выберите слой с цветом, который вы хотите проверить, а затем убедитесь, что выбран пункт «Проверить цветовой контраст».

• Stark Accessibility Checker: Это плагин для Figma, с помощью которого можно проверить контрастность цветов, смоделировать дальтонизм и даже аннотировать дизайн на предмет порядка фокусировки и alt-текста.

• A11Y Annotation Kit: Бесплатный файл сообщества Figma, предлагающий компоненты пользовательского интерфейса для разметки дизайна с предлагаемым названием страницы, заголовками, ориентирами и т. д. Эти аннотации помогают разработчикам понять, какие действия им необходимо предпринять для реализации доступного дизайна.

Инструменты QA

• WAVE API: Это бесплатный инструмент, который сканирует и отмечает проблемы доступности на действующих веб-сайтах. Он выводит краткую сводку, позволяющую понять, насколько доступен сайт, а также предоставляет подробную информацию о проблемах для их устранения.

• Google Lighthouse: Эта функция бесплатна и уже включена в состав Инструментов разработчика в браузере Chrome. Чтобы открыть DevTools, достаточно нажать Option+Command+I (на Mac), а затем выбрать «Lighthouse» на панели вкладок. С помощью этого инструмента вы сможете найти информацию о проблемах с доступностью, а также о SEO и оптимизации производительности.

• Accessibility Checker: Еще один бесплатный инструмент, в который вы можете вставить свой сайт для проверки, после чего он просканирует его и отметит недостатки доступности. Он даст вам оценку аудита, чтобы вы могли отследить улучшение показателей по мере устранения проблем, а также дает рекомендации по решению каждой проблемы.

В этот Всемирный день распространения информации о доступности стоит задуматься об ее недостаточности. Что каждый из нас может сделать, чтобы улучшить результаты «Миллиона WebAIM» в следующем году? Может быть, перепроверить коэффициент цветового контраста или ввести в систему дизайна требование, чтобы каждое поле ввода в форме имело метку.

Что бы это ни было, возьмите это в привычку

Такое применение «одной привычки за раз» позволяет обеспечить доступный дизайн и разработку. Доступные интерфейсы приносят пользу всем - не только пользователям с ограниченными возможностями - при использовании веб-сайта или нативного приложения. Они дают возможность всем людям расширить свои возможности и сделать то, что они не могли сделать раньше. Продолжать изучать и применять доступные практики лучше, чем вообще не пытаться.

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

Источник: Medium