Важность альтернативного текста для пользователей программ экранного доступа: руководство по доступности и хорошему дизайну

Об авторе

Кейси Мэтьюз (Casey Mathews), консультант и научный сотрудник, является основателем WebFriendlyHelp.com, компании, призванной помочь людям получить максимальную отдачу от своих технологий. Он работает в области технологий доступа с середины 1990-х годов.

Он имеет сертификат MCP (Microsoft Certified Professional), а также степень бакалавра в области информационных технологий Университета Феникса. Он также получил подтверждение Флоридского подразделения технологии доступа к услугам для незрячих. Кейси работал в различных организациях Флориды, обслуживающих лиц с нарушениями зрения, где он представлял новое программное обеспечение и идеи для обучения / поддержки от Serotek, программы экранного доступа NVDA, конечно же, apple iDevices. Кейси также сыграл важную роль в создании главы о технологиях «Собаки-поводыри для слепых» в 2011 году. Кейси любит тестировать новые технологии и программное обеспечение и стремится оставаться в курсе событий в области технологий.

Примечание к переводу:

Всё, что далее сказано в отношении документа W3C WCAG, актуально и в отношении национального стандарта ГОСТ Р 52872-2019.

Введение

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

Зачем нужен альтернативный текст

Альтернативный текст (alternative text) представляет собой краткое описание изображения, которое предоставляется в качестве значения атрибута alt в теге изображения imgв разметке HTML на веб-сайте. Наличие такого текста важно по нескольким причинам:

  1. Специальные возможности: программы экранного доступа полагаются на альтернативный текст, чтобы передать смысл и назначение изображений слабовидящим или незрячим пользователям.
  2. SEO: поисковые системы используют альтернативный текст для понимания контекста и содержания изображений, что может улучшить рейтинг сайта в результатах поиска.
  3. Удобство использования: в случаях, когда изображения не загружаются или их загрузка блокируется, альтернативный текст гарантирует, что пользователи смогут понять, что представляет собой отсутствующий контент.

Как правильно составить альтернативный текст

Согласно руководящим принципам WCAG, хороший альтернативный текст должен быть:

  1. Точным: предоставьте точное описание содержания и функций изображения.
  2. Кратким: сделайте описание кратким, обычно менее 125 символов.
  3. По делу (контекстно ориентированным): обдумайте контекст, в котором появляется изображение, и соответствующим образом адаптируйте альтернативный текст.

Примеры

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

Плохой альтернативный текст: «Женщина».

Хороший альтернативный текст: «Женщина в инвалидной коляске улыбается и машет камере»

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

Плохой альтернативный текст: «Круговая диаграмма».

Хороший альтернативный текст: «Круговая диаграмма, иллюстрирующая долю возобновляемых источников энергии, причем доля солнечной энергии является самой высокой — 40%».

Пример 3: фотография горного хребта.

Плохой альтернативный текст: «Горы».

Хороший альтернативный текст: «Живописный пейзаж Скалистых гор с голубым небом и лесом на переднем плане».

Добавление альтернативного текста в некоторых популярных приложениях

Теперь давайте выясним, как добавить альтернативный текст с помощью мыши и клавиатуры в популярных приложениях.

Microsoft Word

С помощью мыши:

  1. Щёлкните правой кнопкой мыши на изображении.
  2. Выберите «Редактировать альтернативный текст» из контекстного меню.
  3. Введите правильно составленный альтернативный текст на панели «Альтернативный текст».
  4. Закройте панель, нажав кнопку «Закрыть».

С помощью клавиатуры:

  1. Перейдите к изображению и выберите его с помощью клавиш CTRL + Shift + Влево или Вправо.
  2. Нажмите сочетание Alt + F10.
  3. Введите правильно составленный альтернативный текст на панели «Альтернативный текст».
  4. Закройте панель, нажав клавишу Escape.

Документы Google

С помощью мыши:

  1. Нажмите на изображение, чтобы выбрать его.
  2. Щёлкните правой кнопкой мыши по изображению, затем нажмите Ctrl + Alt + Y, чтобы открыть диалог для ввода альтернативного текста.
  3. Введите название и описание изображения в соответствующие поля.
  4. Нажмите «OK», чтобы сохранить альтернативный текст.

С помощью клавиатуры:

  1. Перейдите к изображению.
  2. Нажмите сочетание клавиш Ctrl + Alt + Y (для MS Windows) или Cmd + Option + Y (для Mac), чтобы открыть диалоговое окно для ввода альтернативного текста.
  3. Введите заголовок и описание изображения в соответствующие поля.
  4. Нажмите Enter или Return, чтобы сохранить альтернативный текст.

Word Press

С помощью мыши:

  1. Нажмите на изображение в редакторе записи или страницы.
  2. На правой панели найдите поле «Альтернативный текст» в разделе «Настройки изображения».
  3. Введите правильно составленный альтернативный текст.
  4. Нажмите «Обновить», чтобы сохранить изменения в записи или на странице.

С помощью клавиатуры:

  1. Перейдите к изображению в редакторе записей или страниц с помощью клавиши Tab.
  2. Нажмите Alt + Shift + M.
  3. Используйте клавишу Tab для перехода к полю «Альтернативный текст» на правой панели.
  4. Введите правильно составленный альтернативный текст.
  5. Нажмите Escape, чтобы снять выбор изображения и вернуться в область главного редактора.
  6. Перейдите к кнопке Обновить, чтобы сохранить запись или страницу.

Заключение

Альтернативный текст имеет решающее значение для обеспечения того, чтобы пользователи программ экранного доступа имели равные с другими пользователями возможности для взаимодействия с информацией и контекстом, которые предоставляются изображениями на веб-сайтах и в электронных документах. Следуя правилам, основанным на рекомендациях WCAG и W3C, вы можете создавать инклюзивный и доступный контент для всех пользователей, независимо от их визуальных способностей. Не забывайте делать альтернативный текст точным, кратким и контекстуальным и размещать его на своих сайтах, чтобы предоставить максимально полезную информацию для пользователей программы экранного доступа. Кроме того, ознакомьтесь с действиями мышью и сочетаниями клавиш для добавления альтернативного текста в популярных приложениях, таких как Microsoft Word, Google Docs и WordPress, чтобы упростить рабочий процесс и обеспечить постоянную доступность изображений. Отдавая приоритет доступности Интернета, вы не только улучшаете пользовательский опыт для людей с ограниченными возможностями, но и вносите свой вклад в более инклюзивный и справедливый цифровой ландшафт.

Более подробную информацию о создании доступного веб-контента вы можете получить на семинарах АНО «Центр И2Т».

Заявку можно направить на почту: welcome@i2tc.ru

Источник:

The Importance of Alt Text for Screen Reader Users: A Guide to Best Practices and Accessibility by Virtual Tech Advisor and Research Assistant Casey Mathews #Accessibility #AssistiveTechnology #PrintDisabled #Writing

Поделиться